import { StatusBar } from "expo-status-bar";
import React, { useState, createRef, Component } from "react";
//import * as ImagePicker from 'react-native-image-picker';
import {
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableOpacity,
KeyboardAvoidingView,
} from "react-native";
import {MaterialIcons} from '@expo/vector-icons';
import {MaterialCommunityIcons} from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';
import { ScrollView } from "react-native";
import Camera from 'react-native-camera';
import ImagePicker from 'react-native-image-picker';
const options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};
class RegistrationPage extends Component {
constructor(props) {
super(props);
this.state = {
firstname: "",
lastname: "",
phonenumber: "",
email: "",
show: "false",
visible: "true",
isRegistrationSucces: "false",
loading: "false",
errortext:"",
filepath: {
data: '',
uri: ''
},
fileData: '',
fileUri: '',
setErrortext: '',
};
}
handleSubmitButton = () => {
setErrortext('');
if (!firstname) {
alert('Please fill First Name');
return;
}
if (!lastname) {
alert('Please fill Last Name');
return;
}
if (!email) {
alert('Please fill Email');
return;
}
if (!password) {
alert('Please fill Password');
return;
}
if (!confirmpassword) {
alert('Please fill Confirm Password');
return;
}
}
launchCamera = () => {
let options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.launchCamera(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
alert(response.customButton);
} else {
const source = { uri: response.uri };
console.log('response', JSON.stringify(response));
this.setState({
filePath: response,
fileData: response.data,
fileUri: response.uri
});
}
});
}
renderFileData() {
if (this.state.fileData) {
return <Image source={{ uri: 'data:image/jpeg;base64,' + this.state.fileData }}
style={styles.images}
/>
} else {
return <Image source={require("../assets/screens/plane.png")}
style={styles.images}
/>
}
}
renderFileUri() {
if (this.state.fileUri) {
return <Image
source={{ uri: this.state.fileUri }}
style={styles.images}
/>
} else {
return <Image
source={require("../assets/screens/plane.png")}
style={styles.images}
/>
}
}
launchImageLibrary = () => {
let options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.launchCamera(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
alert(response.customButton);
} else {
const source = { uri: response.uri };
console.log('response', JSON.stringify(response));
this.setState({
filePath: response,
fileData: response.data,
fileUri: response.uri
});
}
});
}
render() {
//const [firstname, setFirstName] = useState("");
return (
<KeyboardAvoidingView style={styles.background} keyboardVerticalOffset={-50} behavior={Platform.OS === "ios" ? "padding" : "height"} >
<Image style={styles.top} source={require("../assets/screens/top.png")} />
<Image style={styles.plane} source={require("../assets/screens/plane.png")} />
<Image style={styles.building} source={require("../assets/screens/building.png")} />
<View style={styles.rectangle}>
<TouchableOpacity onPress={this.launchImageLibrary} style={styles.btnSection} >
<MaterialCommunityIcons
name={'camera'}
size={40}
color={'white'}
style={{flexDirection:"row", alignSelf:"center"}}
/>
</TouchableOpacity>
<View style={styles.container}>
<ScrollView>
<View style={styles.inputView}>
<FontAwesome name="user" size={15} color="gray" />
<TextInput
style={styles.TextInput}
placeholder="First Name"
secureTextEntry={false}
onChangeText={(text) => this.setState({firstname: text})}
value={this.state.firstname}
/>
</View>
<View style={styles.inputView}>
<FontAwesome name="user" size={15} color="gray" />
<TextInput
style={styles.TextInput}
placeholder="Last Name"
secureTextEntry={false}
onChangeText={(text) => this.setState({lastname: text})}
value={this.state.lastname}
/>
</View>
<View style={styles.inputView}>
<MaterialCommunityIcons
name={'email'}
size={15}
color={'gray'}
/>
<TextInput
style={styles.TextInput}
placeholder="Email Address"
secureTextEntry={false}
onChangeText={(text) => this.setState({email: text})}
/>
</View>
<View style={styles.inputView}>
<MaterialCommunityIcons
name={'lock'}
size={15}
color={'gray'}
/>
<TextInput
style={styles.TextInput}
placeholder="Password"
secureTextEntry={this.visible}
onChangeText={(text) => this.setState({password: text})}
/>
<TouchableOpacity style={styles.btneye} onPress={
()=>{
setVisible(!this.visible),
setShow(!this.show)
}
}>
<MaterialCommunityIcons
name={this.show === false ? 'eye-outline' : 'eye-off-outline'}
size={15}
color={'gray'}
/>
</TouchableOpacity>
</View>
<View style={styles.inputView}>
<MaterialCommunityIcons
name={'lock'}
size={15}
color={'gray'}
/>
<TextInput
style={styles.TextInput}
placeholder="Re-Enter Password"
secureTextEntry={this.visible}
onChangeText={(text) => this.setState({password: text})}
/>
<TouchableOpacity style={styles.btneye} onPress={
()=>{
setVisible(!this.visible),
setShow(!this.show)
}
}>
<MaterialCommunityIcons
name={this.show === false ? 'eye-outline' : 'eye-off-outline'}
size={15}
color={'gray'}
/>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.signupBtn} activeOpacity={0.5} onPress={this.handleSubmitButton}>
<Text style={styles.loginText}>Sign Up</Text>
</TouchableOpacity>
</ScrollView>
</View>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
image:{
marginBottom: 40,
},
container:{
flex: 1,
},
containerAvoidingView:{
flex: 1,
alignItems: "center",
padding: 10,
},
inputView: {
flexDirection: "row",
paddingHorizontal: 12,
borderRadius: 1
