import React, { useState, useRef } from 'react';
import {
View,
ScrollView,
StyleSheet,
Text,
Dimensions,
KeyboardAvoidingView,
Platform,
Vibration,
} from 'react-native';
import {
Input,
SearchBar,
Icon,
Button,
ThemeProvider,
InputProps,
} from 'react-native-elements';
import { Header, SubHeader } from '../components/header';
const SCREEN_WIDTH = Dimensions.get('window').width;
const dummySearchBarProps = {
showLoading: true,
onFocus: () => console.log('focus'),
onBlur: () => console.log('blur'),
onCancel: () => console.log('cancel'),
onClear: () => console.log('cleared'),
};
const SearchBarCustom = (props) => {
const [value, setValue] = useState('');
return ;
};
type InputsComponentProps = {};
const Inputs: React.FunctionComponent = () => {
let email2Input = useRef(null);
let passwordInput = useRef(null);
let password2Input = useRef(null);
let shakeInput = useRef(null);
let confirmPassword2Input = useRef(null);
const InputFieldsStyle = {
borderWidth: 0,
};
const inputProps = {};
return (
}
leftIconContainerStyle={{ marginLeft: 0, marginRight: 10 }}
containerStyle={styles.inputContainerStyle}
placeholder="Input with left icon"
style={InputFieldsStyle}
/>
}
containerStyle={styles.inputContainerStyle}
placeholder="Input with right icon"
style={InputFieldsStyle}
/>
(shakeInput = ref)}
rightIcon={
Login
}
leftIconContainerStyle={{
marginRight: 10,
}}
containerStyle={{ paddingHorizontal: 0 }}
placeholder="Email"
placeholderTextColor="black"
autoCapitalize="none"
autoCorrect={false}
keyboardAppearance="light"
style={InputFieldsStyle}
keyboardType="email-address"
returnKeyType="next"
onSubmitEditing={() => {
passwordInput.focus();
}}
blurOnSubmit={false}
/>
}
placeholder="Password"
placeholderTextColor="black"
autoCapitalize="none"
keyboardAppearance="light"
secureTextEntry={true}
autoCorrect={false}
style={InputFieldsStyle}
keyboardType="default"
returnKeyType="done"
ref={(input) => (passwordInput = input)}
blurOnSubmit={true}
/>
Sign up
}
placeholder="Username"
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
style={InputFieldsStyle}
returnKeyType="next"
onSubmitEditing={() => {
email2Input.focus();
}}
/>
}
placeholder="Email"
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
style={InputFieldsStyle}
returnKeyType="next"
ref={(input) => (email2Input = input)}
onSubmitEditing={() => {
password2Input.focus();
}}
/>
}
placeholder="Password"
autoCapitalize="none"
secureTextEntry={true}
autoCorrect={false}
keyboardType="default"
style={InputFieldsStyle}
returnKeyType="next"
ref={(input) => (password2Input = input)}
onSubmitEditing={() => {
confirmPassword2Input.current.focus();
}}
/>
}
placeholder="Confirm Password"
autoCapitalize="none"
keyboardAppearance="light"
secureTextEntry={true}
autoCorrect={false}
keyboardType="default"
returnKeyType="done"
style={InputFieldsStyle}
ref={(input) => (confirmPassword2Input = input)}
blurOnSubmit
/>
);
};
export default Inputs;
const styles = StyleSheet.create({
heading: {
color: 'white',
marginTop: 10,
fontSize: 22,
fontWeight: 'bold',
},
contentView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
triangleLeft: {
position: 'absolute',
left: -20,
top: 0,
width: 0,
height: 0,
borderRightWidth: 20,
borderRightColor: 'white',
borderBottomWidth: 25,
borderBottomColor: 'transparent',
borderTopWidth: 25,
borderTopColor: 'transparent',
},
triangleRight: {
position: 'absolute',
right: -20,
top: 0,
width: 0,
height: 0,
borderLeftWidth: 20,
borderLeftColor: 'white',
borderBottomWidth: 25,
borderBottomColor: 'transparent',
borderTopWidth: 25,
borderTopColor: 'transparent',
},
inputContainerStyle: {
marginTop: 16,
width: '90%',
},
keyboardAvoidingView: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
});