douglasjunior / react-native-keyboard-manager

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

Home Page:https://www.npmjs.com/package/react-native-keyboard-manager

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Summary

Notes:

  • for RN 0.60.0 or later use react-native-keyboard-manager@latest
  • for RN 0.53.0 ... 0.59.10, use react-native-keyboard-manager@4.0.13-12
  • for RN 0.47.0 ... 0.52.2, use react-native-keyboard-manager@4.0.13-5
  • for RN 0.40.0 ... 0.46.4, use react-native-keyboard-manager@4.0.13-1

Install

yarn add react-native-keyboard-manager

Or

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

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

    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) => {
          // ...
      });
}

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

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

import { View, Modal } from 'react-native';
import { PreviousNextView } from 'react-native-keyboard-manager';

class App extends Component {
  render() {
      return (
          <View {...} >
              // others views
              <Modal {...} >
                  // others views
                  <PreviousNextView style={...} >
                      // all TextInput
                  </PreviousNextView>
              </Modal>
          </View>
      );
  }
}

Mock with jest

jest.mock('react-native-keyboard-manager', () => require('react-native-keyboard-manager/jest/mock'));

Known issues

  • If your project is managed by Expo, you will need to eject: #100
  • Problem with "@react-navigation/native-stack" and "IQKeyboardManager" on iOS: #89
  • Pod install failed on M1 machines: #104

Contribute

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

Become a Patron! Donate

Star History

Star History Chart

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.

About

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

https://www.npmjs.com/package/react-native-keyboard-manager

License:MIT License


Languages

Language:Objective-C 73.9%Language:TypeScript 12.9%Language:JavaScript 7.9%Language:Ruby 3.9%Language:Swift 0.9%Language:C 0.5%