Ensure Text Fields Don't Get Covered by the On Screen Keyboard

Ensure Text Fields Don't Get Covered by the On Screen Keyboard

If a Text Input is on the bottom half of the screen, then it will get covered by the on screen keyboard when a user selects that input. We’ll show two ways to automatically avoid this by using KeyboardAvoidingView or keyboard-aware-scroll-view

Multiline inputs

The <TextInput /> component can be turned into a multiline input - similar to HMTL <textarea /> - by adding the multiline={true} and numberOfLines={5} props. The numberOfLines can be any number.

<TextInput
  // other props
  multiline={true}
  numberOfLines={2}
/>

Onscreen keyboard

When focusing an input the onscreen keyboard is automatically displayed. If this does not open in the simulator, it can be toggled from the developer menu - cmd + d or cmd + m on macOS and ctrl + m on Windows.

👍The onscreen keyboard can cover the page content. To fix this we can install the <KeyboardAwareScrollView /> component from NPM.

npm i react-native-keyboard-aware-scrollview

👍This can be used to wrap each screen to ensure the keyboard does not hide page content.

render() {
  return (
    <KeyboardAwareScrollView>
      <TextInput />
      // other components
    </KeyboardAwareScrollView>
  )
}

🐦   Previous   💼   Next