Search code examples
reactjsreact-nativenativenative-base

How to set TextInput fields above the keyboard in React Native


enter image description hereHere in Image you can see that when i press On Input Field the keyboard covers most of it and the user cant see the rest of the Input Fields. I want something that when the user clicks on the Input field it slights up to show the field and keyboard both.

Here's The code:

**

[![<Container style={styles.background}>
      <Content>
        <View style={styles.placeholderstyle}>
          <Item>
            <Input
              placeholder="Email"
              placeholderTextColor={'rgb(243, 243, 244)'}
              onChangeText={(text) => setEmail(text)}
              value={email}
              style={styles.inputstyle}
            />
          </Item>
          <Item>
            <Input
              placeholder="User Name"
              placeholderTextColor={'rgb(243, 243, 244)'}
              onChangeText={(text) => setName(text)}
              value={user_name}
              style={styles.inputstyle}
            />
          </Item>
          <Item>
            <Input
              placeholder="Password"
              secureTextEntry={true}
              placeholderTextColor={'rgb(243, 243, 244)'}
              onChangeText={(text) => setPassword(text)}
              value={password}
              style={styles.inputstyle}
            />
          </Item>
          <Item>
            <Input
              placeholder="Confirm Password"
              secureTextEntry={true}
              placeholderTextColor={'rgb(243, 243, 244)'}
              onChangeText={(text) => setResetPassword(text)}
              value={resetPassword}
              style={styles.inputstyle}
            />
          </Item>
        </View>
        <Button
          style={styles.btnstyle}
          onPress={() => signinUser(user_name, resetPassword, email, password)}>
          <Text style={styles.btntextstyle}>SignUp</Text>
        </Button>
      </Content>
    </Container>][1]][1]

**


Solution

  • You can use KeyboardAvoidingView to wrap your code. Here's the documentation: https://reactnative.dev/docs/keyboardavoidingview