Using React Native in an Android Custom Keyboard

Disclaimer: I'm not very experienced with Android Java. If I've made a mistake, let me know.

In this post, I'll show you how I got React Native working in a custom system keyboard in Android.

React Native View

Let's start with the
Create a new file called xml/popup.xml.

mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
        .setApplication(getApplication())
        .setBundleAssetName("index.android.bundle")
        .setJSMainModulePath("index")
        .addPackage(new MainReactPackage())
        .setUseDeveloperSupport(BuildConfig.DEBUG)
        .setInitialLifecycleState(LifecycleState.RESUMED)
        .build();
mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

Custom Keyboards in Java

Structure of your Java:

• Your service will extend InputMethodService.
• Your service will return a KeyboardView in onCreateInputView. You create this by inflating an xml.
• You will attach a Keyboard to you KeyboardView with method setKeyboard. You create a KeyboardView by providing an xml. 

Now normally you give a View. You then have a choice - create a View, or inflate an xml. Note that KeyboardView specifically does not give you this option.

Structure of your XML

• Not much happens in the xml that you give to your KeyboardView. 
• All the interesting things happen on the xml you give to your Keyboard.
• The xml you give to your Keyboard has a <Keyboard>, which has <Row>s, and each <Row> has <Key>s.

You're not supplying an Activity, merely a service. You're not being asked for a View, merely an xml. I think these restrictions are intentional. I think Android intentionally wants to restrict what can be done on Custom System Keyboards. For this reason, I don't think that you can use React Native in any of the parts listed above.

The solution - CandidatesView

CandidatesView is supposed to be used for suggestions and the like. Since it takes a View, we can just drop in our React Native ReactRootView, like so:

setCandidatesView(mReactRootView);
setCandidatesViewShown(true);

That's all there is to it. I'm not quite sure how to control the height yet, but I presume that it's not that difficult. Let me know if you figure it out.