React-Native Keyboard Manager

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

This is only for iOS, Android no needed. For Android just add

android:windowSoftInputMode="adjustResize"

Screenshots

| Enabled | Disabled | | - | - | | | |

| | | - | | Credits: IQKeyboardManager |

NOTES:

• for RN 0.60.0 or later use

  [email protected]

• for RN 0.53.0 ... 0.59.10, use

  [email protected]

• for RN 0.47.0 ... 0.52.2, use

  [email protected]

• for RN 0.40.0 ... 0.46.4, use

  [email protected]

Install

yarn add react-native-keyboard-manager

Or

bash
npm i -S react-native-keyboard-manager

Auto linking

If you are using

React Native 0.60.+

pod install

If not, use one of the following methods to link.

Link with

react-native link

:

React native link is no longer supported due to cocoapods dependency. To avoid cocoapods you can use the version

4.0.13-X

Link manual with cocoapods:

1. Add this line to your Podfile

   bash
   pod 'ReactNativeKeyboardManager', :path => '../node_modules/react-native-keyboard-manager'
   

2. run

   bash
   pod install
   

Post install

Because IQKeyboardManager is written in

Swift

Swift

1. Open

   ios/YourAppName.xcworkspace

   in Xcode
2. Right-click on

   YourAppName

   in the

   Project Navigator

   on the left, and click

   New File

   .
3. Create a single empty

   Swift

   file to the project (make sure that

   YourAppName

   target is selected when adding)
4. When Xcode asks, press Create Bridging Header and do not remove

   Swift

   file then.
5. Re-run your build.

Usage

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

But, if you need some configuration, there are some options available.

import { Platform } from 'react-native';
import KeyboardManager from 'react-native-keyboard-manager';

if (Platform.OS === 'ios') {
    KeyboardManager.setEnable(true);
    KeyboardManager.setEnableDebugging(false);
    KeyboardManager.setKeyboardDistanceFromTextField(10);
    KeyboardManager.setLayoutIfNeededOnUpdate(true);
    KeyboardManager.setEnableAutoToolbar(true);
    KeyboardManager.setToolbarDoneBarButtonItemText("Done");
    KeyboardManager.setToolbarManageBehaviourBy("subviews"); // "subviews" | "tag" | "position"
    KeyboardManager.setToolbarPreviousNextButtonEnable(false);
    KeyboardManager.setToolbarTintColor('#0000FF'); // Only #000000 format is supported
    KeyboardManager.setToolbarBarTintColor('#FFFFFF'); // Only #000000 format is supported
    KeyboardManager.setShouldShowToolbarPlaceholder(true);
    KeyboardManager.setOverrideKeyboardAppearance(false);
    KeyboardManager.setKeyboardAppearance("default"); // "default" | "light" | "dark"
    KeyboardManager.setShouldResignOnTouchOutside(true);
    KeyboardManager.setShouldPlayInputClicks(true);
    KeyboardManager.resignFirstResponder();
    KeyboardManager.isKeyboardShowing()
      .then((isShowing) => {
          // ...
      });
}

Enable Next/Previous buttons

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

if (Platform.OS === 'ios') {
    KeyboardManager.setToolbarPreviousNextButtonEnable(true);
}

And if you want to use Next/Previous buttons inside a

Modal

PreviousNextView

class App extends Component {
  render() {
      return (
          
              // others views
              
                  // others views
                  
                      // all TextInput
                  
              
          
      );
  }
}

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

Contribute

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

License

The MIT License (MIT)

Copyright (c) 2017 Douglas Nassif Roma Junior

See the full license file.

IQKeyboardManager License

The MIT License (MIT)

Copyright (c) 2013-16 Iftekhar Qurashi

See the full IQKeyboardManager license file.