In this tutorial I will show how to solve keyboard related issues in React Native apps. As you know React Native is providing "KeyboardAvoidingView" component and it is useful in most cases. However sometimes it is impossible to solve some kind of problems like page jumping, flickering etc.(especially on Android).

I will show you how to solve these kind of problems using a unique approach.

Basically we will hide the elements other than the input elements on the page. Yes this may sound weird in the beginning but this is solving the keyboard related issues and improving UX.

This is our login page UI:

JSX code for this page looks like this:

<>
  { !keyboardDidShow && <Text>App Title</Text> }
  <TextInput placeholder="E-mail"/>
  <TextInput placeholder="Password"/>
  <Button>Login</Button>
  { !keyboardDidShow && <BottomNav /> }
</>

As you see we are using a flag to show & hide the elements on the page.

We can add Keyboard listener in useEffect hook to update this flag:

useEffect(() => {
  Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
  Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
}, []);

const _keyboardDidShow = () => {
  setState((state) => ({ ...state, keyboardDidShow: true }));
}

const _keyboardDidHide = () => {
  setState((state) => ({ ...state, keyboardDidShow: false }));
};

Our page will look like this when the keyboard is active:

We can even use this method for the long forms: