Skip to content

shadahmad7/react-native-keyboard-manager

Repository files navigation

@shadahmad7/react-native-keyboard-manager

A lightweight, fully native IQKeyboardManager TurboModule for React Native (iOS only).

This module provides a clean API to enable or disable automatic keyboard management on iOS without depending on Expo — supports both New Architecture & Classic Bridge.

⚡ Built on top of IQKeyboardManager

📱 Native Objective-C++ implementation

🧠 Smart UI adjustments (no manual keyboard handling needed)

🚀 Plug-and-play: enable or disable at runtime


✨ Features

  • Fully native TurboModule (New Architecture Ready)
  • iOS-only (Android behaves normally, no crashes)
  • Auto fixes:
    • Keyboard covering inputs
    • Smart scroll to focused input
    • Next/Previous toolbar navigation
  • Can enable/disable dynamically
  • Zero UI changes required

📦 Installation

Using npm

npm install @shadahmad7/react-native-keyboard-manager

Using Yarn

yarn add @shadahmad7/react-native-keyboard-manager

⚠️ iOS Pod Requirement

Add to your ios/Podfile:

pod 'IQKeyboardManager'

Then run:

cd ios && pod install

🔧 Usage

import KeyboardManager, {
  enableKeyboardManager,
  disableKeyboardManager,
} from "@shadahmad7/react-native-keyboard-manager";

// Option 1: Use helper methods
enableKeyboardManager();

// Option 2: Disable later if needed
disableKeyboardManager();

// Option 3: Direct TurboModule access
KeyboardManager.enable();

💡 Tip: You can disable for special screens (e.g., chat layouts or custom keyboards).


📌 Platform Notes

📱 iOS

  • Powered by IQKeyboardManager
  • Fully configurable at runtime
  • No additional setup within React Native code

🤖 Android

  • ❌ Not supported (module safely reports no-ops)
  • Does not crash or break your app

🛠 API

enable()

Enables automatic keyboard handling.

KeyboardManager.enable();

disable()

Disables automatic keyboard handling.

KeyboardManager.disable();

Helpers (Recommended)

enableKeyboardManager();
disableKeyboardManager();

🎯 Best Practices

✔ Enable globally in App.tsx

✔ Disable for custom scrollable UI like chat or custom animated layouts

✔ Do not try to replicate UI manually if IQKeyboardManager is active

Example:

useEffect(() => {
  enableKeyboardManager();
  return disableKeyboardManager; // cleanup on unmount if needed
}, []);

❓ FAQ

🔹 Does this work on Android?

No. Android handles keyboard differently. This package safely skips without crashing.

🔹 Will it conflict with custom keyboards?

If using custom animated layouts, disable temporarily.

🔹 Can I customize toolbar buttons & behavior?

Currently no — feature planned for future releases.


📄 License

MIT © @shadahmad7

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published