ios keyboard covers the input which is located at the bottom of the screen. How can this trouble be solved?
here is the code.
<Content style={styles.content}>
<Form>
<Item style={{borderBottomColor:'#42e8f4'}}>
<Icon active name='mail' style={{color: '#42e8f4'}} />
<Input placeholder='Email'placeholderTextColor= '#42e8f4' style={{color:'#0dc49d'}}/>
</Item>
<Item style={{ borderBottomColor:'#42e8f4'}}>
<Icon active name='lock' style={{color: '#42e8f4'}} />
<Input secureTextEntry={true} placeholder='Password'placeholderTextColor= '#42e8f4' style={{color:'#42e8f4'}}/>
</Item>
</Form>
<ListItem style={{borderBottomWidth:0,borderTopWidth:0,borderBottomColor:'#42e8f4'}}>
<Button transparent onPress={() => this.props.navigation.navigate("Signup")}>
<Text style={{color:'#42e8f4'}}>Create Account</Text>
</Button>
<Button transparent onPress={() => this.props.navigation.navigate("Forgetpass")}>
<Text style={{color:'#42e8f4'}}>Forget Password</Text>
</Button>
</ListItem>
<Button full
style={{backgroundColor:'#42e8f4'}}
onPress={() => this.props.navigation.navigate("Welcome")}>
<Text style={{color: '#FFF'}}>Sign In</Text>
</Button>
</Content>
const styles = {
content:{
position:'absolute',
bottom:10,
left:0,
right:0
},
}
I am using Native-Base. How can this issue be solved?
Check the documentation for React Native Keyboard Avoiding View.
It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard.
Example from the How to make your React Native app respond gracefully when the keyboard pops up article
return (
<KeyboardAvoidingView
style={styles.container}
behavior="padding"
>
<Image source={logo} style={styles.logo} />
<TextInput
placeholder="Email"
style={styles.input}
/>
<TextInput
placeholder="Username"
style={styles.input}
/>
<TextInput
placeholder="Password"
style={styles.input}
/>
<TextInput
placeholder="Confirm Password"
style={styles.input}
/>
<View style={{ height: 60 }} />
</KeyboardAvoidingView>
);