After 3+ hrs of unsuccessful tryings to link this useful library to my project, I created this pull request (actually copied previous one) for those, who mad with integration problems.

#24

The podspec will not break anything in the library, it just allows you to integrate keyboard manager with your project with one line:
pod 'RNKeyboardManager', :path => '../node_modules/react-native-keyboard-manager'

And yes. This is the easiest way to link the lib =(

I have checked in iPhone X and its above series which are notch devices like rounded corners.

When I opened the keyboard first time then it works well, can see the footer view above the keyboard.

After closing the keyboard, when I opened it for the next time then footer view shows a little bit lower means SafeAreaView is not worked for after first time.

It works well below the iPhone X which have no corners,

React native has a TextInput prop called onSubmitEditing where you specify what should happen when the user presses "Done" or "Return" on the keyboard. I feel like this function should be executed when the user presses "Done" on the toolbar. Otherwise, "Done" on the keyboard has different results than "Done" on the toolbar, which is bad UX.

Is there a way to customize the functionality of "Done" rather than it just dismissing the keyboard?

hey guys
thank you for this integration
i've spent too much time to make my form-ux perfect, and your package is significant part of it

here is known issue:
when using react-native-keyboard-manager, app stops firing internal react-native NativeMethodsMixin.focus() behavior, which is contain logic like this:

TextInputState.focusTextInput(findNodeHandle(this.inputRef));

except you manage it imperative with this.inputRef.focus()

it cause problem with Keyboard.dismiss(), with inputRef.blur(), cause they linked to TextInputState internal state, which isnt refreshed from last focus.

in my app, i solved it by patching like this:

onFocus={() => TextInputState.focusTextInput(findNodeHandle(this.input))}

it's okay for my situation, cause i have generic input component
but will be better to solve somehow globally

Issue template

• How did you link to the library: Autolinking w. CocoaPods
• React Native version: 0.61.5
• Library version: 4.0.13-16
• iOS version: 13.3
• Are you using the library for the first time: No

Hi 👋

This is not really an issue, but I noticed that the current IQKeyboardManager version installed by this module is a bit out of date.

Is upgrading to the latest version something you want? If you do, I can write a PR 🙂

It works perfectly on iOS but on Android I have this crash on startup

SOLVED:

In one component I imported this lib, and this causes the crash on android.
Removing the import the problem has disappeared

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

toolbar alway show ...

I followed all the directions for prev next and i am seeing KeyboardManager.setToolbarPreviousNextButtonEnable is not a function

I am using RN 0.50.3, iOS 11, and version 4.0.13-4

collected in excellent-RN-libs

Scenario is when keyboard is open and I click back button it takes sometime for the keyboard to get disappear. Which is causing bad user experience. As keyboard get hide on the other screen.

to solve this I used :

import KeyboardManager from 'react-native-keyboard-manager'

componentWillUnmount () {

     KeyboardManager.resignFirstResponder();

}

After which I am getting this error.

I'm trying to implement a chat screen similar to Telegram.
So I have a TextInput at the bottom of the screen. When I open the keyboard, the whole screen is pushed up.

Just like this:

At the top of the screen, I have a native navBar that is being pushed too (that's my problem).

There is some way to overcome this issue?

Hi all,

thanks for the package, it works really good :)

The only problem I've found is when testing on iPhone X, which has a bottom safe area (because of the new interaction system on the bottom). Is it possible to add the suggested margin (I think is 18px if I'm right), or increase the size to have the text and the button over the "safe area".

Thank you!

RCTTextInput.h not found on [email protected]

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?

### import KeyboardManager from 'react-native-keyboard-manager'

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

Hi guys,

Thanks for this useful project!

I've faced an issue today. When I try to run project I see the following error message:

I went to the index.js file and saw that NativeModules.ReactNativeKeyboardManager is undefined. I tried to remove all node_modules and install them again, link/unlink this package, npm run -- --reset-cache, restart XCode, project clean. Nothing helps.

Looks like it happened after XCode updating to 9.2 version.

Any advice?

Not sure if it's possible but it would be really handy to be able to scroll view manually (with your finger) when keyboard is shown and Keyboard Manager does its magic. Now we're only able to scroll view with prev/next buttons and it's not really cool for UX. Especially it would be useful when there are not required fields in multiple fields forms, when you want to skip few and forced to tap [Next] for few times to get to desired field.

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?

It does not work correctly in expo after installing it. I followed the documentation, however it seems that it does not work ... could support me?

I have followed the installations steps correctly

"react-native-keyboard-manager": "^4.0.13-12",
"react-native": "^0.59.4",

• What version of React Native?
  0.59.10

• What version of the library?
  4.0.13-12

• iOS version?
  10.14.6 Mojave

• Did the problem happen after updating React Native?
  No

• Are you using the library for the first time?
  Yes

We want to use this library on a screen-by-screen basis, because until now we've been using other solutions for keyboard management, and when this library is installed it impacts the way those existing solutions work, sometimes with adverse effects. Therefore we want to migrate over to it gradually but build new screens with it.

However, if I do this in my index file:

if (Platform.OS === 'ios') {
  // since we introduced this after other solutions, have to turn it on/off per screen that uses it, else it will impact globally
  KeyboardManager.setEnable(false);
}

and enable it on the startup of specific screens, it is still impacting everywhere (as evidenced by the extra line above the keyboard containing the placeholder and the "Done" link). Is there a workaround? Is there more than just setEnable to set to false to disable all functionality?

I have an Expo ejected project (SDK version: 33)

RN version: 0.59.8

Lib version: 4.0.13-15

Linked the library with react-native link

The problem happens when I try pod install

[!] Unable to find a specification for `React-RCTText` depended upon by `ReactNativeKeyboardManager`

You have either:
 * out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.

Note: as of CocoaPods 1.0, `pod repo update` does not happen on `pod install` by default.

Already tried all of that, nothing helps.

I had to manually install the original lib to my Xcode project, but then I can't use the methods from my JS code.

I followed the install steps with CoCoPods, but after I executed 'pod install', that error showed immediately.

Need to press twice on the button when the keyboard is opened
This is my code related to keyboard

import KeyboardManager from 'react-native-keyboard-manager'

KeyboardManager.setEnable(true);
KeyboardManager.setEnableDebugging(false);
KeyboardManager.setKeyboardDistanceFromTextField(10);
KeyboardManager.setPreventShowingBottomBlankSpace(true);
KeyboardManager.setEnableAutoToolbar(false);
// KeyboardManager.setToolbarDoneBarButtonItemText("Done");
KeyboardManager.setToolbarManageBehaviour(0);
// KeyboardManager.setToolbarPreviousNextButtonEnable(false);
KeyboardManager.setShouldToolbarUsesTextFieldTintColor(false);
KeyboardManager.setShouldShowTextFieldPlaceholder(true); // deprecated, use setShouldShowToolbarPlaceholder
KeyboardManager.setShouldShowToolbarPlaceholder(true);
KeyboardManager.setOverrideKeyboardAppearance(true);
KeyboardManager.setShouldResignOnTouchOutside(true);
KeyboardManager.resignFirstResponder();
KeyboardManager.isKeyboardShowing()
.then((isShowing) => {
// ...
});

Not sure what I'm doing wrong here. The toolbar isn't showing the left and right arrows. I am using the default KeyboardManager configuration:

Hi,
I noticed that PreviousNextView works perfectly when using the up and down arrow on the screen, but using the tab key will ignore this.
This can easily be tested using a modal, the iOS simulator and the regular tab key on your regular keyboard.

Using tab will jump to a hidden form and the next/prev buttons will navigate between the hidden inputs.

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

• What version of React Native?
  0.59.10

• What version of the library?
  4.0.13-12

• iOS version?
  10.14.6 Mojave

• Did the problem happen after updating React Native?
  No

• Are you using the library for the first time?
  Yes

Awesome library, but I'm finding that when the input is in a scrollview and the library scrolls down to a multi-line input, if returns are input to force a new line, the library doesn't scroll the view down further to allow the user to automatically see what he is typing, he has to scroll manually. Inputs are in a modal but not sure this is a modal issue.

If I call this

KeyboardManager.setToolbarPreviousNextButtonEnable(true);

the toolbar still doesn't show Prev/Next buttons. Is there anything else I need to do?

This is on react-native 0.46.4.

I've installed the package on project, is working, but i have a specific place that i need to disable the KeyboardManager, but isn`t.

I added KeyboardManager.setEnable(false); to my componentDidMount and nothing happens.

I`ve installed the package using cocoapods.

If the component has a text input with autoFocus, the keyboard accessory does not appear on that field (until navigating off it and back to it).

When I try to use it with a TextInput with text keyboard, it scroll way longer than it needs. It doesn't happens with the numeric keyboard as you can see on the gif below:

Is there a way to make the Done button just hide the Keyboard?

Thanks

I upgraded to the following environment:

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 574.93 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.12.0 - /usr/local/opt/node@8/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/opt/node@8/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 23.0.1, 26.0.2, 27.0.3, 28.0.3
    IDEs:
      Android Studio: 3.4 AI-183.5429.30.34.5452501
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.9 => 0.59.9
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

And when I try to run this command: react-native bundle --entry-file ./index.ios.js --platform ios --bundle-output ios/main.jsbundle

I get the following error: error node_modules/react-native-keyboard-manager/index.js: Cannot read property 'bindings' of null.

This is the version I am using: "react-native-keyboard-manager": "4.0.13-7",

Please help. I upgraded to the latest version and that did not help. I removed node modules and reinstalled and that did not help.

• How did you link to the library (autolinking, manual, rn link, cocoapods)? cocapods
• What version of React Native? 0.61.4
• What version of the library? 4.0.13-15
• iOS version? 12
• Did the problem happen after updating React Native? No
• Are you using the library for the first time? No

Following the installation instructions "link the IQKeyboardManager resources to your Xcode project", this produced the following on error on building for iOS:

❌ error: Multiple commands produce '/Users/jeremybradshaw/rn060/ios/build/ccf/Build/Products/Debug-iphonesimulator/Competence.app/IQKeyboardManager.bundle':

I think because there's already something in the generated [CP] Copy Pods Resources build phase to do this, though I'm not certain how it got there:

Removing my manual copy of the bundle (copied as per the instructions) sorted the issue out. Perhaps the docs could clarify whether this step is still required when using pods.

I have installed react-native-keyboard-manager with yarn and linked it with react-native link. But I'm hitting this error:

import KeyboardManager from 'react-native-keyboard-manager';

...
KeyboardManager.setEnable(true);
...

Hi, this is what I see after calling

KeyboardManager.setEnable(true);
KeyboardManager.setToolbarPreviousNextButtonEnable(true);

iOS 10.3, on simulator, RN 0.47.1. I did follow step 3 and rebuilt.

Thanks!

KeyboardManager.setEnableDebugging(false); doesn't affect logging disabling
actually we get console.info every time, when we call any method of KeyboardManager
it's produce a lot of messy messages every reload

i remove them by this patch:

const keyboardManagerPrefix = 'KeyboardManager.';
const originalLogToConsole = require('react-native/Libraries/Utilities/RCTLog.js').logToConsole;

require('react-native/Libraries/Utilities/RCTLog.js').logToConsole = (logLevel, ...rest) => {
   if (
      logLevel === 'info' &&
      typeof rest[0] === 'string' &&
      rest[0].slice(0, keyboardManagerPrefix.length) === keyboardManagerPrefix
   ) {
      return;
   }
   originalLogToConsole(logLevel, ...rest);
};

but it's better to save some state on native side, and dont produce any messages, if debug==false

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

I tested two forms, and when the form is in a modal the arrows do not show

I have used for RN 0.53.0 or later use react-native-keyboard-manager@latest
But it's not working as expected. I am getting this error while declaring :

import KeyboardManager from 'react-native-keyboard-manager';

'KeyboardManager' is declared but its value is never read.ts(6133)
Could not find a declaration file for module 'react-native-keyboard-manager'. '/Users/mac/Development/My Masjid/MyMasjid/node_modules/react-native-keyboard-manager/index.js' implicitly has an 'any' type.
Try npm install @types/react-native-keyboard-manager if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-keyboard-manager';

Xcode version: Version 9.0 (9A235)
node -v: 8.4.0
npm -v: 5.3.0

"react": "16.0.0-alpha.12",
"react-native": "0.48.1",
"react-native-keyboard-manager": "^4.0.13-3"

I followed the 4 listed steps:

1. npm i -S react-native-keyboard-manager
2. react-native link react-native-keyboard-manager
3. Open the Xcode, drag and drop the Resources folder to my project root
4. Call KeyboardManager.setToolbarPreviousNextButtonEnable(true)

But I still can not get the prev/next buttons. Am I missing something?

I tried them in this package.

• 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

On any of my screens with any text inputs the prev/next buttons show but they don't have any impact. They don't switch between inputs

Hi,

I noticed that read me include steps on installing this library via cocoapods but the podspec is not existing in the latest version. I saw that this pr had been merged.
#24

But not yet released I think obviously. :-)

I just thought that it might be a good idea to update the read me. 👍
I'll create a PR. 😄