react-native-keyboard-manager

This library is in maintenance mode and is no longer receiving new features. It was originally designed to solve iOS-only keyboard issues by integrating IQKeyboardManager.

Because Android now handles edge-to-edge layouts by default, this library's iOS-only focus is less relevant.

Recommended Alternatives:

• KeyboardAvoidingView (React Native built-in)
• react-native-keyboard-controller (Cross-platform edge-to-edge approach)

Before running the application, you must start Metro, the JavaScript bundler that ships with React Native. Run this command from the root of your project in a dedicated terminal window.

# using npm
npm start

# OR using Yarn
yarn start

After modifying your code (e.g., in App.tsx), use the following shortcuts to reload the app and see your changes:

• Android: Press the <kbd>R</kbd> key twice, or open the Developer Menu using <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) and select "Reload".
• iOS: Press <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in the iOS Simulator.

To launch the application on an Android emulator or device, run the following command from the root of your project in a new terminal (keep the Metro Bundler running in a separate terminal).

# using npm
npm run android

# OR using Yarn
yarn android

Since IQKeyboardManager is written in Swift, you must enable Swift in your native Xcode project to avoid build errors.

1. Open ios/YourAppName.xcworkspace in Xcode.
2. Right-click on your project in the Project Navigator and select New File.
3. Create a single empty Swift file (ensure your app target is selected).
4. When prompted, click Create Bridging Header.
5. Do not remove the Swift file.
6. Re-run your build.

To launch the application on an iOS simulator, run the following command from the root of your project in a new terminal (keep the Metro Bundler running in a separate terminal).

# using npm
npm run ios

# OR using Yarn
yarn ios

To prevent errors during unit testing when your code imports react-native-keyboard-manager, add the following mock to your Jest setup:

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

To use Next/Previous buttons on the keyboard toolbar, call KeyboardManager.setToolbarPreviousNextButtonEnable(true).

If you are using these buttons inside a Modal, you must wrap your TextInput fields within a PreviousNextView component to ensure correct behavior.

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

class App extends Component {
  render() {
      return (
          <View> 
              <Modal> 
                  <PreviousNextView style={...} >
                      {/* All TextInput components go here */}
                  </PreviousNextView>
              </Modal>
          </View>
      );
  }
}

The KeyboardManager object is the primary interface for controlling how the keyboard interacts with your React Native application. It provides methods to enable/disable management, adjust toolbar appearance, and control keyboard distance. Most methods are synchronous and affect the global keyboard management state.

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

// Enable keyboard management
KeyboardManager.setEnable(true);

// Set distance between keyboard and text field
KeyboardManager.setKeyboardDistanceFromTextField(20);

// Configure toolbar text
KeyboardManager.setToolbarDoneBarButtonItemText('Done');

// Check if keyboard is visible
const isShowing = await KeyboardManager.isKeyboardShowing();