CODEWITHSUNDEEP
react-native
Ammar Tariq
Ammar Tariq

Reputation: 847

Keyboard Handling in React Native

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?

Upvotes: 0

Views: 1872

Answers (3)

Danilo
Danilo

Reputation: 226

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...

}

Upvotes: 2

Georgiy T.
Georgiy T.

Reputation: 1211

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.

Upvotes: 1

Rajneesh Shukla
Rajneesh Shukla

Reputation: 1392

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

Upvotes: 0

Related Questions