Absolutely, it’s totally feasible! While React Native doesn’t have built-in support for system-level keyboards out of the box, you can combine React Native’s UI capabilities with native platform extensions (iOS Keyboard Extensions and Android Input Method Services) to build a fully functional custom keyboard that works across all apps on a device—just like the example you referenced.

Here’s how to pull this off:

1. Set Up Native Keyboard Extensions #

First, you’ll need to create platform-specific keyboard extensions, since system-level input methods are handled natively:

• iOS: In your Xcode project, add a new "Keyboard Extension" target. This will be the container that hosts your React Native UI.
• Android: Create a new service that extends InputMethodService—this is Android’s way of defining custom keyboards.

2. Embed React Native into the Extension #

Next, bridge your React Native code into the native extension so your custom UI can render:

Android Example (Simplified) #

In your custom InputMethodService subclass, initialize a React Native root view to display your keyboard UI:

@Override
public View onCreateInputView() {
    ReactRootView reactRootView = new ReactRootView(this);
    ReactInstanceManager reactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setCurrentActivity(this)
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
    reactRootView.startReactApplication(reactInstanceManager, "CustomKeyboard", null);
    return reactRootView;
}

iOS Example (Simplified) #

In your keyboard extension’s ViewController, load the React Native root view:

import UIKit
import React

class KeyboardViewController: UIInputViewController {
    var reactRootView: RCTRootView?

    override func viewDidLoad() {
        super.viewDidLoad()
        let jsCodeLocation = RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
        reactRootView = RCTRootView(
            bundleURL: jsCodeLocation,
            moduleName: "CustomKeyboard",
            initialProperties: nil,
            launchOptions: nil
        )
        view.addSubview(reactRootView!)
        reactRootView?.frame = view.bounds
    }
}

3. Add and Use Custom Fonts #

Integrating custom fonts works similarly to regular React Native apps, but you need to ensure they’re accessible to the native extension:

1. Place your font files (.ttf/.otf) in your RN project’s assets/fonts folder.
2. Configure react-native.config.js to include the fonts:

   module.exports = {
     assets: ['./assets/fonts/'],
   };
   

3. Run npx react-native link (for RN <0.60) or let auto-linking handle it (RN 0.60+).
4. Critical: For iOS, add the font filenames to your keyboard extension’s Info.plist under the Fonts provided by application array. For Android, ensure the fonts are included in the extension’s assets folder.
5. Use the font in your RN keyboard components:

   <Text style={{ fontFamily: 'YourCustomFont-Regular', fontSize: 18 }}>A</Text>
   

4. Handle Text Input & System Communication #

Your keyboard needs to send text to the active app’s input field—this requires a native module bridge:

1. Create a native module (iOS/Android) that exposes methods to send text, delete characters, etc.
   • Android: Use getCurrentInputConnection().commitText(text, 1) to send text, or deleteSurroundingText(1, 0) for backspace.
   • iOS: Use textDocumentProxy.insertText(text) or textDocumentProxy.deleteBackward().
2. Call these methods from your React Native code:

   import { NativeModules } from 'react-native';
   const { KeyboardCommunicator } = NativeModules;
   
   const onPressKey = (keyValue) => {
     KeyboardCommunicator.sendText(keyValue);
   };
   
   const onPressBackspace = () => {
     KeyboardCommunicator.deleteBackward();
   };
   

5. Test & Enable the Keyboard #

• iOS: On your device/simulator, go to Settings → General → Keyboard → Keyboards → Add New Keyboard, select your custom keyboard, and enable "Full Access" (if needed for advanced features).
• Android: Go to Settings → System → Languages & Input → Virtual Keyboard → Manage Keyboards, toggle on your keyboard, then select it as your active input method.

• Performance: System keyboards need low latency—optimize your RN components by reducing unnecessary re-renders, using React.memo for stateless components, and avoiding heavy JS logic in the keyboard UI.
• Permissions: If your keyboard needs access to the clipboard or other device features, declare the required permissions in Info.plist (iOS) or AndroidManifest.xml (Android).
• Compatibility: Test your keyboard across different apps (messaging, browsers, notes) and OS versions to ensure consistent behavior.

内容的提问来源于stack exchange，提问作者user999