node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

react-native-keyboard-manager

React-Native Keyboard Manager

Licence MIT npm version npm downloads

This library allows to prevent issues of keyboard sliding up and cover on React-Native iOS projects ⚛. Thanks to awesome IQKeyboardManager ❤️.

This is only for iOS, Android no needed. For Android just add android:windowSoftInputMode="adjustResize" to your activity.

Demo

Enabled Disabled
Credits: IQKeyboardManager

Requirements

  • React Native >= 0.45.0
  • React >= 16.0.0-alpha.8
  • iOS >= 8.0

NOTES:

  • for RN >= 0.47.0, use react-native-keyboard-manager@latest
  • for RN <= 0.46.4, use react-native-keyboard-manager@4.0.13-1

Use

It does not need any library setup to work, just install and go.

But, if you need some configuration, there are some options available. (with default values)

import KeyboardManager from 'react-native-keyboard-manager'
 
KeyboardManager.setEnable(true);
KeyboardManager.setEnableDebugging(true);
KeyboardManager.setKeyboardDistanceFromTextField(10);
KeyboardManager.setPreventShowingBottomBlankSpace(true);
KeyboardManager.setEnableAutoToolbar(true);
KeyboardManager.setToolbarDoneBarButtonItemText("Ok");
KeyboardManager.setToolbarManageBehaviour(0);
KeyboardManager.setShouldToolbarUsesTextFieldTintColor(false);
KeyboardManager.setToolbarPreviousNextButtonEnable(false);
KeyboardManager.setShouldShowTextFieldPlaceholder(true);
KeyboardManager.setOverrideKeyboardAppearance(false);
KeyboardManager.setShouldResignOnTouchOutside(true);
KeyboardManager.resignFirstResponder();
KeyboardManager.isKeyboardShowing()
  .then((isShowing) => {
      // ...
  });

If you want to use Next/Previous buttons, enable it.

import KeyboardManager from 'react-native-keyboard-manager'
 
KeyboardManager.setToolbarPreviousNextButtonEnable(true);

If you want to use Next/Previous buttons inside a Modal, you need to wrap the fields in a PreviousNextView.

import KeyboardManager, { PreviousNextView } from 'react-native-keyboard-manager'
....
render() {
    return (
        <View ... >
            // others views
            <Modal ... >
                // others views
                <PreviousNextView style={...} >
                    // all TextInput
                </PreviousNextView>
            </Modal>
        </View>
    )
}

For more details, see the Sample Project and the official IQKeyboardManager documentation.

Install

  1. Install dependency package
  npm i -S react-native-keyboard-manager
  1. Link the native project
  react-native link react-native-keyboard-manager
  1. (Optional) If you want to use Next/Previous buttons, link the IQKeyboardManager resources to your Xcode project.

    1. Open your Xcode project

    2. Got to folder your-project/node_modules/react-native-keyboard-manager/ios/IQKeyboardManager/

    3. Drag and drop the Resources folder to your project root. (If you already have Resources group, drag and drop the IQKeyboardManager.bundle)


    4. In your index.ios.js just call KeyboardManager.setToolbarPreviousNextButtonEnable(true);.

Known Issues

You can find IQKeyboardManager known issues list here.

Contribute

New features, bug fixes and improvements are welcome! For questions and suggestions use the issues.

Become a Patron! Donate

Licence

The MIT License (MIT)

Copyright (c) 2017 Douglas Nassif Roma Junior

See the full licence file.

IQKeyboardManager License

The MIT License (MIT)

Copyright (c) 2013-16 Iftekhar Qurashi

See the full licence file.