react-native-keyboard-manager

by douglasjunior

⚛ Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects.

501 Stars 43 Forks Last release: 11 months ago (4.0.13-16) MIT License 110 Commits 24 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React-Native Keyboard Manager

Licence MIT npm version npm downloads

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"
to your activity.

Screenshots

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

| | | - | | Credits: IQKeyboardManager |

NOTES:

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.+
go to the folder your-project/ios and run
pod install
, and you're done.

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

Link with
react-native link
:

  1. Link the native project

    bash
    react-native link react-native-keyboard-manager
    
  2. (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.js
      :
      if (Platform.OS === 'ios') {
          KeyboardManager.setToolbarPreviousNextButtonEnable(true);
      }
      

Link with cocoapods:

  1. Add this line to your Podfile

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

    bash
    pod install
    

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 { 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.setPreventShowingBottomBlankSpace(true); KeyboardManager.setEnableAutoToolbar(true); KeyboardManager.setToolbarDoneBarButtonItemText("Done"); KeyboardManager.setToolbarManageBehaviour(0); KeyboardManager.setToolbarPreviousNextButtonEnable(false); KeyboardManager.setShouldToolbarUsesTextFieldTintColor(false); KeyboardManager.setShouldShowTextFieldPlaceholder(true); // deprecated, use setShouldShowToolbarPlaceholder KeyboardManager.setShouldShowToolbarPlaceholder(true); KeyboardManager.setOverrideKeyboardAppearance(false); KeyboardManager.setShouldResignOnTouchOutside(true); KeyboardManager.resignFirstResponder(); KeyboardManager.isKeyboardShowing() .then((isShowing) => { // ... }); }

Enable Next/Previous buttons

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

If you linked using

react-native link
, make sure you linked the resource file.
if (Platform.OS === 'ios') {
    KeyboardManager.setToolbarPreviousNextButtonEnable(true);
}

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

Modal
, you need to wrap the fields in a
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.

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 IQKeyboardManager licence file.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.