React Native External Keyboard

Native-first React Native toolkit for physical (external) keyboard support on iOS and Android — focus management, key-press events, custom focus order, and focus locking.

• 🎯 Keyboard focus management — focus/blur events, autoFocus, imperative focus via ref
• ⌨️ Key press events — handle key-down / key-up with full modifier info
• 🔢 Custom focus order — link-based, index-based, or direction locking
• 🔒 Focus lock — keep focus inside modals and overlays (Focus.Frame / Focus.Trap)
• 🎨 Native focus styling — iOS halo effect & tintColor, Android defaultFocusHighlightEnabled
• ⚡ New Architecture · Old Architecture · Bridgeless · Expo prebuild

[!TIP] The quickest start is the K namespace — K.Pressable, K.View, and K.Input are drop-in, keyboard-focusable versions of Pressable, View, and TextInput. To add focus to a component you already have (a custom button, TouchableOpacity, …), reach for the withKeyboardFocus HOC. See the getting started guide.

[!NOTE] On iOS, long-pressing the spacebar does not fire a long press — iOS routes it through Full Keyboard Access. Use Tab + M (the default "open context menu" command) instead.

Installation

npm install react-native-external-keyboard
cd ios && pod install

Get started with the getting started guide or jump straight to the component overview.

Quick start

Use the K namespace — K.Pressable, K.View, and K.Input are ready-made, keyboard-focusable replacements for Pressable, View, and TextInput:

import { K } from 'react-native-external-keyboard';
import { Text } from 'react-native';

<K.Pressable
  autoFocus
  onPress={onPress}
  focusStyle={{ backgroundColor: 'dodgerblue' }}
>
  <Text>Press me with Space or Enter</Text>
</K.Pressable>

Need focus on a component the K namespace doesn't cover — TouchableOpacity, a custom button, a third-party component? Wrap it with the withKeyboardFocus HOC:

import { withKeyboardFocus } from 'react-native-external-keyboard';
import { TouchableOpacity } from 'react-native';

const KeyboardTouchable = withKeyboardFocus(TouchableOpacity);

Architecture support

| Capability | Supported | | :-- | :-- | | New Architecture (Fabric / Turbo Modules) | ✅ | | Old Architecture (Bridge) | ✅ | | Bridgeless mode | ✅ | | Expo (prebuild / bare) | ✅ |

React Native compatibility

| Library version | React Native | | :-- | :-- | | 1.0.0 | ≥ 0.80 | | 0.11.0 | ≤ 0.79 |

Documentation

New here? Start with the getting started guide, then follow a task-focused guide. The full docs index links everything.

Guides — task-focused walkthroughs

• Pressable focus handling — focus/blur events, focusStyle, render props
• Native focus styling — iOS halo & tintColor, Android focus highlight
• Programmatic focus — ref.focus(), keyboardFocus(), autoFocus
• Keyboard text input — KeyboardExtendedInput, focusType, blurType
• Focus order — link-based, index-based, and direction-lock ordering

Advanced

• Native focus services — native-side focus API & memory service for custom native code

Reference

• Component overview — every component and its props
• API reference — modules, hooks, the imperative ref, shared types
• Migration guide — version-to-version upgrade notes

What's available

Components

| Export | Purpose | | :-- | :-- | | K.Pressable / K.View / K.Input | Ready-made, keyboard-focusable Pressable / View / TextInput. Start here. | | withKeyboardFocus(C) | HOC that adds keyboard focus to any Pressable/Touchable-like component. | | KeyboardExtendedView | Focus-aware View for key handling and grouping (also K.View). | | KeyboardExtendedInput | TextInput with keyboard focus support (also K.Input). | | KeyboardExtendedBaseView | Low-level focusable view (alias ExternalKeyboardView). | | KeyboardFocusGroup | iOS focusGroupIdentifier grouping + global tintColor. | | Focus.Frame / Focus.Trap | Confine focus to a region (modals, overlays). | | KeyboardOrderFocusGroup | Namespacing + index-based focus ordering. |

API

| Export | Purpose | | :-- | :-- | | Keyboard | Dismiss the soft keyboard from a hardware keyboard. | | KeyboardFocus ref | Imperative focus handle (focus, keyboardFocus, screenReaderFocus). | | Hooks | useIsViewFocused, useOrderFocusGroup. | | Focus-order props | orderId, order*, orderIndex, orderGroup, lockFocus. |

Roadmap

All planned features are implemented and released. No new functionality or API changes are planned.

Future work is limited to:

• React Native version support (new releases)
• Bug fixes and issue resolution

Both active versions receive fixes:

| Version | React Native | Status | | :-- | :-- | :-- | | 1.0.0 | ≥ 0.80 | Active — bug fixes and new RN support | | 0.11.0 | ≤ 0.79 | Active — bug fixes only |

Contributing

Any type of contribution is highly appreciated. Feel free to create PRs, raise issues, or share ideas — see the contributing guide for the development workflow.

Acknowledgements

It has been a long journey since the first release of the react-native-external-keyboard package. Many features have been added, and a lot of issues have been fixed.

With that, I would like to thank the contributors, those who created issues, and the followers, because achieving these results wouldn't have been possible without you.

Thanks to the initial authors: Andrii Koval, Michail Chavkin, Dzmitry Khamitsevich.

Thanks to the contributors: João Mosmann, Stéphane.

Thanks to those who created issues: Stéphane, proohit, Rananjaya Bandara, SteveHoneckPGE, Wes.

I really appreciate your help; it has truly helped me move forward!

License

MIT

Made with create-react-native-library