Skip to main content
Hermes + JSI + Fabric Android & iOS

react-native-keyboard-bridge

Build a mobile system keyboard with ordinary React Native components — one component, real React Native, live on Android and iOS.

Get StartedGitHub
2
Platforms, 1 codebase
0
Native UI code to write
∞
Languages & scripts
100%
Real React Native
The keyboard you write
import { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { commitText, deleteSurroundingText } from 'react-native-keyboard-bridge';

export default function KeyboardApp() {
  const [shifted, setShifted] = useState(false);

  return (
    <View style={styles.row}>
      {['q', 'w', 'e', 'r', 't', 'y'].map((key) => (
        <TouchableOpacity
          key={key}
          onPress={() => commitText(shifted ? key.toUpperCase() : key)}>
          <Text style={styles.key}>
            {shifted ? key.toUpperCase() : key}
          </Text>
        </TouchableOpacity>
      ))}
      <TouchableOpacity onPress={() => deleteSurroundingText(1, 0)}>
        <Text style={styles.key}>⌫</Text>
      </TouchableOpacity>
    </View>
  );
}

Real React Native

Hermes + JSI + Fabric, hosted live inside the Android IME process and iOS's Custom Keyboard Extension. Not a schema interpreter, not a compiled subset — your actual component tree, rendered by Fabric.

One component, both platforms

Write View/Text/TouchableOpacity once. The exact same file runs on Android and iOS — no per-platform reimplementation, no native Kotlin or Swift UI code to maintain.

Any language, any script

commitText takes a plain Unicode string. Bangla, Arabic, Devanagari, CJK, and right-to-left layouts are first-class, not an afterthought bolted on for English.

Gestures & prediction, built in

Swipe-typing key-path matching and a pluggable word-prediction interface ship in the same package — bring your own dictionary or frequency model.

Get started in minutes

Four steps, and both platforms are running your keyboard.

01

Install

One package. JS bridge, native modules, and the iOS setup CLI all ship together.

yarn add react-native-keyboard-bridge
02

Write your keyboard

Register a plain component under the fixed name KeyboardApp.

import { AppRegistry } from 'react-native';
import KeyboardApp from './src/keyboard/KeyboardApp';

AppRegistry.registerComponent('KeyboardApp', () => KeyboardApp);
03

Wire up iOS

Apple requires a distinct App Extension target — one CLI command scaffolds it.

npx react-native-keyboard-bridge setup-ios
npx react-native-keyboard-bridge build-keyboard
04

Let users enable it

Prompt from your own app screen — neither platform allows a silent switch.

import { openInputMethodSettings } from 'react-native-keyboard-bridge';

<Button title="Enable keyboard" onPress={openInputMethodSettings} />

Works in every language, natively

commitText takes a plain Unicode string — no transliteration layer, no script whitelist, no special-casing for right-to-left.

বাংলা
commitText('বাংলা')
Bangla
العربية
commitText('العربية')
Arabic (RTL)
हिन्दी
commitText('हिन्दी')
Devanagari
中文
commitText('中文')
CJK
Русский
commitText('Русский')
Cyrillic
English
commitText('English')
Latin

How it works

The same live surface, hosted the native way each platform expects.

AndroidiOS
RuntimeReal React Native (New Architecture, ReactHost)Real React Native (New Architecture, RCTReactNativeFactory)
Your componentRuns live, unmodifiedRuns live, unmodified
RenderingFabric, same as any RN screenFabric, same as any RN screen
Text editingInputConnectionUITextDocumentProxy
Bridge moduleKeyboardBridgeModule.ktKeyboardBridgeModule.swift
Native module setupAutolinked automaticallyOne-time setup-ios CLI command
Host processInputMethodServiceCustom Keyboard App Extension

No native UI code to maintain

The Kotlin/Swift side only wires up a runtime and a text-editing bridge — every pixel comes from your JS.

One JS bundle, two hosts

The same registered "KeyboardApp" component is requested by ReactHost on Android and RCTRootViewFactory on iOS.

Autolinked where possible

Android needs zero manual wiring. iOS needs one Xcode App Extension target — Apple requires it, so one CLI command scaffolds it.

Ready to build your keyboard?

One install. Real React Native. Live on both platforms.

Read the docsStar on GitHub