CODEWITHSUNDEEP
react-nativereact-native-iosnative-base
NewTech Lover
NewTech Lover

Reputation: 1263

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

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?

Upvotes: 32

Views: 32361

Answers (6)

user1710406
user1710406

Reputation: 1

Works for me:

  1. Select info.plist in Project Navigator

  2. Right-click on "Information Property List" at the top and select "Add Row"

  3. Select "Launch screen interface file base name" from the droplist.

  4. Set the type to "String".

  5. I put "LaunchScreen" (without the quotes) for the value.

Upvotes: 0

Anand P
Anand P

Reputation: 16

Keyboardavoidingview with padding hides the button for this use below code

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

Upvotes: 0

PiotrK
PiotrK

Reputation: 1

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>

Upvotes: -1

bennygenel
bennygenel

Reputation: 24680

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

Upvotes: 20

Harshit Rastogi
Harshit Rastogi

Reputation: 2122

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

Upvotes: 3

Ahmed Ali
Ahmed Ali

Reputation: 2668

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

Upvotes: 5

Related Questions