ios keyboard covers the input which is located in the bottom of the screen

Question

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?

score 17 · Answer 1 · edited Nov 18 '21 at 22:43

17

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>
  );

edited Nov 18 '21 at 22:43

Raven

30
6

answered Sep 20 '17 at 09:45

bennygenel

23,896
6
65
78

The problem is that above code which I wrote is inside the image, and image is like a container for the whole screen. where must I integrate above code? I added it after the image while the app is not rendering around 2 minutes and there is no any error message. – NewTech Lover Sep 20 '17 at 11:51
@NewTechLover I don't see any `Image` component in your question. You should wrap the main component that you want to be avoided by the keyboard. In your example this should be the `Content` component. – bennygenel Sep 20 '17 at 12:10
It solved for ios thanks. But when I use it android version which was great becomes affected from this solution. How can I specify this for only ios? I am using expo so there are not separate folders for each platform. – NewTech Lover Sep 20 '17 at 12:13
Take a look at [Platform Specific Code](https://facebook.github.io/react-native/docs/platform-specific-code.html) on react-native docs. Please consider mark as answered if you thing the solution solved your main question. – bennygenel Sep 20 '17 at 12:16
I checked it but there is no any info how to ignore KeyboardAvoidingView for android – NewTech Lover Sep 20 '17 at 14:54
@NewTechLover have you found a solution? – Yossi Jan 01 '19 at 07:38

score 4 · Answer 2 · answered Sep 20 '17 at 16:09

4

You can use this library react-native-keyboard-aware-scroll-view just make it as a container for your components

answered Sep 20 '17 at 16:09

Ahmed Ali

2,574
2
23
38

score 2 · Answer 3 · answered Jun 16 '21 at 06:59

Here is my solution which works fine for ios and android both:

return (
   <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <KeyboardAvoidingView
          behavior={Platform.OS === "ios" ? "padding" : ""}
          style={styles.container}>
          ........
          // Your input fields
          ........
         </KeyboardAvoidingView>
   </ScrollView>
)

const styles = StyleSheet.create({
      container: {
         flex: 1
      },
});

score 0 · Answer 4 · answered May 16 '23 at 15:02

Keyboardavoidingview with padding hides the button for this use below code

<KeyboardAvoidingView behavior={"height"} 
style={{flex: 1}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  
      ........
    
</ScrollView>
</KeyboardAvoidingView>

score -1 · Answer 5 · answered May 16 '23 at 07:34

Solution when you use ScrollView and it adds additional padding each time you click on Input:

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={{flex: 1}>
   <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
      
          ........
        
   </ScrollView>
</KeyboardAvoidingView>

ios keyboard covers the input which is located in the bottom of the screen

5 Answers5