Need help with react-native-keyboard-manager?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

douglasjunior
619 Stars 54 Forks MIT License 159 Commits 2 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 36,556
Java
Objecti...
popup-w...
React
112 commits
# 13,561
React N...
Ruby
Objecti...
Firebas...
15 commits
# 322,345
Objecti...
keyboar...
iOS
React N...
3 commits
# 348,468
Objecti...
React N...
serverl...
aws-lam...
2 commits
# 541,103
Objecti...
keyboar...
iOS
React N...
1 commit
# 126,808
Objecti...
Firebas...
React
crashly...
1 commit
# 140,176
Objecti...
keyboar...
iOS
React N...
1 commit
# 225,568
Objecti...
keyboar...
iOS
React N...
1 commit
# 75,791
Objecti...
React N...
google-...
React
1 commit

React-Native Keyboard Manager

License 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
:

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
, you need to enable
Swift
on your native Xcode project.
  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
, 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

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.

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.