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

Overview

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

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

    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

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

    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.setToolbarTintColor('#0000FF'); // Only #000000 format is supported
    KeyboardManager.setToolbarBarTintColor('#FFFFFF'); // Only #000000 format is supported
    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 (
          <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.

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.

Comments
  •  KeyboardManager.setEnable(boolean)  don't working

    KeyboardManager.setEnable(boolean) don't working

    show: (key: string) => { KeyboardManager.setEnable(true)
    KeyboardManager.setToolbarDoneBarButtonItemText(key) }, hide: () => { KeyboardManager.setEnable(false) // this don't working }

    toolbar alway show ...

    help wanted Waiting for feedback 
    opened by leadmedev 18
  • Update IQKeyboardManager to latest version

    Update IQKeyboardManager to latest version

    Following https://github.com/douglasjunior/react-native-keyboard-manager/issues/64

    I updated IQKeyboardManager to v6.5.4 (latest one), but also cleaned up the project a bit (lots of unused dependencies, prettier was only applied on the /Sample project).

    Changes

    • Bump peer dependency to React Native 0.60
    • Add TypeScript definition
    • Remove setPreventShowingBottomBlankSpace
    • Replace setToolbarManageBehaviour by setToolbarManageBehaviourBy and accept a string enum instead of random int
    • Remove setShouldToolbarUsesTextFieldTintColor
    • Remove setShouldShowTextFieldPlaceholder
    • Add setKeyboardAppearance
    • Add setShouldPlayInputClicks
    • isKeyboardShowing now returns a Promise<boolean>
    • Remove the now useless hack

    PS: Don't fear the number of lines, it's principally the new IQKeyboardManager folder 😅

    opened by zoontek 11
  • Crash on IOS 14

    Crash on IOS 14

    • How did you link to the library (autolinking, manual, rn link, cocoapods)? cocoapods
    • What version of React Native? 0.63.4
    • What version of the library? 6.5.4-0
    • iOS version? 14.2
    • Did the problem happen after updating React Native? No
    • Are you using the library for the first time? No
    • It's a bug? Provide a link to a minimal reproduction case. Yes

    App chased on start with error

    static let kbManager = IQKeyboardManager() "Modifications to the layout engine must not be performed from a background thread after it has been accessed from the main thread."

    bug 
    opened by VitamineC 10
  • Attempting to swipe back but not actually swiping back causes undesirable blank view while text input is focused

    Attempting to swipe back but not actually swiping back causes undesirable blank view while text input is focused

    • How did you link to the library (autolinking, manual, rn link, cocoapods)? I used eas build from expo
    • What version of React Native? 0.64.3
    • What version of the library? 6.5.4-4
    • iOS version? 14.4
    • Did the problem happen after updating React Native? nope
    • Are you using the library for the first time? yes
    • It's a bug? Provide a link to a minimal reproduction case. The repro is in a private project. The setup just requires two screen(ScreenA, ScreenB) in a stack navigator. Navigate to ScreenB and let there be a textinput and focus on it, then partially swipe back but then give up swiping back, there should be a blank space. If you are not able to reproduce it. I will definitely provide a minimal repro.

    https://user-images.githubusercontent.com/80689446/160818446-082d47ad-19ae-460b-bd5e-71fd51bb7933.mp4

    https://user-images.githubusercontent.com/80689446/160818617-ffcfb84d-9dbb-4b6c-8a66-f7449ecc2985.mp4

    I understand that this package depends on IQKeyboardManager, and this issue was opened a long time in https://github.com/hackiftekhar/IQKeyboardManager/issues/1361. It was mentioned that it was resolved but it doesnt seem to be.

    Can you please confirm the bug and if possible suggest a solution if any?

    bug 
    opened by itsramiel 7
  • null is not an object (evaluating '_reactNativeKeyboardManager.default....

    null is not an object (evaluating '_reactNativeKeyboardManager.default....

    • How did you link to the library (manual, rn link, cocoapods)?

    I am running RN 60.4 so my understanding is that it links automatically after installation.

    • What version of React Native?

    I am running React Native 60.4.

    • What version of the library?

    I am running [email protected]

    • Did the problem happen after updating React Native?

    Yes, I upgraded from RN 0.53.3 where it used index.ios.js and index.android.js, but with RN 60.4 its now all index.js. So my question is, if I used to have this configuration:

    import KeyboardManager from "react-native-keyboard-manager";
    // old config code ^^^
    import NFIBEngage from "./App";
    import { name as appName } from "./app.json";
    
    // old config code
    import { Sentry } from "react-native-sentry";
    
    Sentry.config(
      "https://[email protected]/264268"
    ).install();
    
    KeyboardManager.setToolbarPreviousNextButtonEnable(true);
    // old config code ^^^
    
    

    inside of index.ios.js, where do I place it now that its all index.js for both android and ios? I believe that is why my android emulator is complaining, because its receiving this library and it does not need it.

    • Are you using the library for the first time?

    yes

    help wanted 
    opened by ldco2016 7
  • Fix crash `Exception 'accessing _cachedSystemAnimationFence requires …

    Fix crash `Exception 'accessing _cachedSystemAnimationFence requires …

    Fix crash

    Exception 'accessing _cachedSystemAnimationFence requires the main thread' was thrown while invoking setEnableAutoToolbar on target ReactNativeKeyboardManager with params (0)
    

    IMG_6542

    opened by thanhcuong1990 6
  • Is there anyway to adapt the library to scroll content without header

    Is there anyway to adapt the library to scroll content without header

    now I am using the library and it is working very well, but a big issue is that it moves all things up when the keyboard is shown even the header. Is there any way we can resolve or change this behavior?

    help wanted 
    opened by MorcosS 6
  • fix: use <React/*.h> header import styles for compatibility with Expo SDK 44

    fix: use header import styles for compatibility with Expo SDK 44

    First of all, thanks for the awesome library! It has greatly improved the keyboard handling UX in my apps.

    However, after the upgrade to Expo SDK 44 in my app, I noticed that this Pod fails to compile. The root of the issue is that starting with SDK 44, Expo enforces the usage of #import <React/*.h> React header import style instead of #import "*.h"

    See this discussion for more info: https://github.com/expo/expo/issues/15622#issuecomment-997141629

    This PR alters the imports in this library so the Pod successfully compiles.

    opened by fobos531 5
  • iOS build error: duplicate interface definition for class 'RCTBaseTextInputView'

    iOS build error: duplicate interface definition for class 'RCTBaseTextInputView'

    My project is throwing the following error when I try to build for iOS:

    image image

    It happens when I try with yarn ios command or directly running the .xcworkspace on XCode.

    • How did you link to the library (autolinking, manual, rn link, cocoapods)? Autolinking.
    • What version of React Native? 0.64.3
    • What version of the library? 6.5.4-3
    • iOS version? 12
    • Did the problem happen after updating React Native? After updating Expo SDK from 43 to 44.
    • Are you using the library for the first time? No.
    • It's a bug? Provide a link to a minimal reproduction case. I can't provide a minimal reproduction case right now, but I will try to share as soon as I can.
    opened by vinifraga 5
  • Can't find keyplane that supports type 8 for keyboard

    Can't find keyplane that supports type 8 for keyboard

    This lib is awesome, but sometimes my app is freezing after I started to use this library.

    Here is the log:

    Can't find keyplane that supports type 8 for keyboard iPhone-PortraitChoco-DecimalPad; using 25712_PortraitChoco_iPhone-Simple-Pad_Default 2019-10-14 17:46:50.320640+0300 App[20893:2271211] [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ( "<NSAutoresizingMaskLayoutConstraint:0x600001c26a80 h=--& v=--& _UIToolbarContentView:0x7fdf8cd97d40.width == 0 (active)>", "<NSLayoutConstraint:0x600001ccac10 H:|-(0)-[_UIButtonBarStackView:0x7fdf8cd983d0] (active, names: '|':_UIToolbarContentView:0x7fdf8cd97d40 )>", "<NSLayoutConstraint:0x600001cc8af0 _UIButtonBarStackView:0x7fdf8cd983d0.trailing == _UIToolbarContentView:0x7fdf8cd97d40.trailing (active)>", "<NSLayoutConstraint:0x600001c6a6c0 'TB_Leading_Leading' H:|-(8)-[_UIModernBarButton:0x7fdf8ce063f0'Done'] (active, names: '|':_UIButtonBarButton:0x7fdf8ceeab60 )>", "<NSLayoutConstraint:0x600001c7d400 'TB_Trailing_Trailing' H:[_UIModernBarButton:0x7fdf8ce063f0'Done']-(0)-| (active, names: '|':_UIButtonBarButton:0x7fdf8ceeab60 )>", "<NSLayoutConstraint:0x600001c26bc0 'UISV-canvas-connection' UILayoutGuide:0x60000067e3e0'UIViewLayoutMarginsGuide'.leading == UIView:0x7fdf8ced3560.leading (active)>", "<NSLayoutConstraint:0x600001c25450 'UISV-canvas-connection' UILayoutGuide:0x60000067e3e0'UIViewLayoutMarginsGuide'.trailing == _UIButtonBarButton:0x7fdf8ceeab60.trailing (active)>", "<NSLayoutConstraint:0x600001c275c0 'UISV-spacing' H:[UIView:0x7fdf8ced3560]-(0)-[UIView:0x7fdf8cd86370] (active)>", "<NSLayoutConstraint:0x600001c25130 'UISV-spacing' H:[UIView:0x7fdf8cd86370]-(0)-[UIView:0x7fdf8ceaaa20] (active)>", "<NSLayoutConstraint:0x600001c27160 'UISV-spacing' H:[UIView:0x7fdf8ceaaa20]-(0)-[_UIButtonBarButton:0x7fdf8ceeab60] (active)>", "<NSLayoutConstraint:0x600001cb5e50 'UIView-leftMargin-guide-constraint' H:|-(0)-UILayoutGuide:0x60000067e3e0'UIViewLayoutMarginsGuide' (active, names: '|':_UIButtonBarStackView:0x7fdf8cd983d0 )>", "<NSLayoutConstraint:0x600001cb77a0 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x60000067e3e0'UIViewLayoutMarginsGuide']-(0)-|(LTR) (active, names: '|':_UIButtonBarStackView:0x7fdf8cd983d0 )>" )

    Will attempt to recover by breaking constraint <NSLayoutConstraint:0x600001c7d400 'TB_Trailing_Trailing' H:[_UIModernBarButton:0x7fdf8ce063f0'Done']-(0)-| (active, names: '|':_UIButtonBarButton:0x7fdf8ceeab60 )>

    Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful. 2019-10-14 17:47:12.785209+0300 App[20893:2314454] XPC connection interrupted

    • How did you link to the library (autolinking, manual, rn link, cocoapods)? auto
    • What version of React Native? latest
    • What version of the library? latest
    • iOS version? latest
    opened by mydesweb 5
  • README install instructions are incorrect

    README install instructions are incorrect

    I ran react native link react-native-keyboard-manager, expecting it to link in the required libraries (not via a pod), however, it added a dependency in my Podfile and left the xcode project file untouched.

    If this is intended, can you please include instructions on how to link this project into the iOS xcode project manually?

    help wanted 
    opened by WoodyWoodsta 5
  • Add type for PreviousNextView

    Add type for PreviousNextView

    Hi there! Wanted to say thanks for making this, it's very helpful. Thanks for adding types for the main exported Keyboard manager, that does make my life a lot easier. Wanted to bring up PreviousNextView as a nice-to-have for a type as well, as currently typescript complains about no such exported member. I'm running a ts-ignore for now, but wanted to at least raise awareness of it. If I have a moment to make it myself I'll come back and submit a PR.

    • How did you link to the library (autolinking, manual, rn link, cocoapods)? autolinking
    • What version of React Native? 0.63.4
    • What version of the library? 6.5.4-1
    enhancement 
    opened by rpadilla6 0
Releases(6.5.4-4)
Owner
Douglas Nassif Roma Junior
Software Craftsman at @smarppy
Douglas Nassif Roma Junior
A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.

react-native-keyboard-accessory A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard. Expo Snack Playground https:

Arda Pektaş 458 Sep 26, 2022
Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

React Native Textinput Effects I've come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-nativ

Halil Bilir 2.9k Sep 20, 2022
Plug and play react-native keyboard spacer view.

react-native-keyboard-spacer Plug and play iOS react-native keyboard spacer view. Quick Start Install View: npm install --save react-native-keyboard-s

Andrew Hurst 1.5k Sep 17, 2022
Keyboard events for react-native

react-native-keyboardevents Keyboard events for react-native As of react-native 0.11 this module is obsolete. Now you can do something like the follow

Johannes Lumpe 247 Apr 16, 2022
A Virutal Screen keyboard implementation for React-Native

React Native Screen Keyboard is a virutal screen keyboard implementation for React Native. It is fully customizable, the last row of the keys can be completely customized or changed to fit perfectly with your projects.

Usman Hassan 2 Sep 11, 2022
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 6.3k Sep 21, 2022
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 346 Jul 30, 2022
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

Talut TASGIRAN 26 May 23, 2021
MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects

AwesomeClockView MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects. Installatio

MindInventory 10 Sep 1, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 414 Aug 29, 2022
A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.

A React Native library provides Image Blur Shadows, highly customizable and mutable component. Supports Android, iOS and Web.

Vivek Verma 81 Sep 26, 2022
A light weight and customisable content loader for react native apps, will work both on expo and init projects.

Provide a placeholder at the place which need waiting for loading, Easy to implement and fun to use, this package is highly customizable, Please go th

Sarmad 191 Sep 21, 2022
React Native Blur Overlay Library For Ios And Android

react-native-blur-overlay Getting started $ npm install react-native-blur-overlay --save Mostly automatic installation $ react-native link react-nativ

Sajjad Asadi 95 Sep 24, 2022
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

React Native Modals React Native Modals Library for iOS & Android. How to thank me ? Just click on ⭐️ button ?? Try it with Exponent BREAKING CHANGE A

Jack Lam 2.1k Sep 22, 2022
⚛️A feature rich Android & iOS notifications library for React Native.

⚛️ A feature rich notifications library for React Native, built by @invertase, the authors of @react-native-firebase.

Invertase 957 Sep 22, 2022
Wraps SKStoreProductViewController for use in react-native projects

ReactNativeStoreView Wraps SKStoreProductViewController to open items in the App Store from within react-native projects. NB: v2 and v3 require React

Rob Hogan 29 Jul 17, 2022
react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for andriod and iOS platforms.

react-native-select-dropdown react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for and

Adel Reda 144 Sep 26, 2022
Native iOS UITableView for React Native with JSON support and more

React Native TableView Native iOS UITableView for React Native with JSON support Contents Features Installation Styles Examples Customization Features

Pavel Aksonov 1.4k Sep 18, 2022