Keyboard Handling in React Native

Question

How to make your app respond gracefully on keyboard appearance? So far I have tried keyboard-aware-scroll, keyboardspacer and keyboard Avoiding view

Keyboard avoiding view didn't help at all I have tried it several times but it doesn't even respond to keyboard appearance.

Keyboardspacer gracefully works but in many cases it destroys the whole UI by crushing other view

keyboardaware scroll works when there is no scroll in the app but for long forms it doesn't work.

android:windowSoftInputMode="adjustPan" only works for android

What are the other options that we have for the app to gracefully respond when keyboard appears.

What do you use in your apps?

score 2 · Answer 1 · answered Nov 08 '18 at 14:05

2

If none of these libraries does what you need, you can adjust your view manually by using the Keyboard module (docs at https://facebook.github.io/react-native/docs/keyboard) With it you can react when you know a keyboard opens or closes, like so:

import * as React from 'react';
import { Keyboard } from 'react-native';

class MyComponent extends React.Component {
  componentDidMount() {
      this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
      this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
  }

  componentWillUnmount() {
    this.keyboardDidHideListener.remove();
    this.keyboardDidShowListener.remove();
  }

  keyboardDidShow = () => {
      //Fix your view for when a keyboard shows
  };

  keyboardDidHide = () => {
      //Fix your view for when a keyboard hides
  };

    //Rest of component...

}

answered Nov 08 '18 at 14:05

Danilo

186
7

I gave it try but could do much because I had 17 fields on the same scree. what i was doing is placing an empty view at the bottom of screen, but it was not a good solution – Ammar Tariq Nov 08 '18 at 14:28
@AmmarTariq are your fields inside a scrollview? They tend to work best for views that can resize with a keyboard and would be your best bet to have all those fields show consistently in different devices. If they are, you can just scroll it to get the views where you want them, without having to add padding to the bottom. – Danilo Nov 08 '18 at 15:05
I have a custom InputText component and all these fields are in scrollview on android scrollview keyboard pushes the focused component up but ios overlaps it, can't think of a fix :( – Ammar Tariq Nov 08 '18 at 15:08

score 1 · Answer 2 · answered Nov 08 '18 at 07:51

For my projects I use react-native-keyboard-aware-scroll-view as well as KeyboardAvoidingView (try to play with behavior prop, it depends on your styling).

Take a look in Android configuration section in docs of react-native-keyboard-aware-scroll-view. I think it's something that you're looking for.

score 0 · Answer 3 · answered Nov 08 '18 at 07:16

0

You can find following usefull answer related your question.

Q.How to change the Softkeyboard “Enter” button Text in android? https://stackoverflow.com/a/53098939/6477946

Q. How to close or hide SoftKeyBoard

https://stackoverflow.com/a/53077131/6477946

answered Nov 08 '18 at 07:16

Rajneesh Shukla

554
6
14

I wanted a cross platform solution, what you have suggested would work but is limited to android. Thanks – Ammar Tariq Nov 08 '18 at 15:12

Keyboard Handling in React Native

3 Answers3