Part 1: Creating a custom image keyboard with React Native.

The other parts of this series can be found here: Part 2, Part 3

Disclaimer: The actual custom keyboards will be written in the respective platforms’ native language. This is not something React Native is capable of out of the box.

A picture is worth a thousand words

People love to communicate through imagery. Be that pictures, emojis or gifs. We set out to create a custom keyboard capable of sending rich content like pngs and gifs.

At Gravitywell we love React Native so chose that as the starting point.

Why React Native?

Although the actual keyboards will be written in the respective platforms native language, the main app providing information about the app, install instructions and T&Cs will be mostly the same across both platforms. It made sense to share the codebase as much as possible and so decided to use React Native.

So in this part of the series, we will be building a simplified version of the app where we will detect if our custom keyboard is installed and show instructions if not. Obviously, you could do much more with this app but we are keeping it as simple as possible.

How?

Let's create a new React Native project for us to work in.

react-native init rncustomkeyboard

and then get it running:

cd rncustomkeyboard && react-native run-android

You should now be greeted with that familiar RN starter screen.

Detecting the existence of our custom keyboard

Although we have not written our custom keyboard yet we will write the react native code to detect if our keyboard is enabled and if not provided platform-specific instructions if not.

I wrote an npm package that simplified this process so we will first go ahead and install it.

npm install --save react-native-active-keyboards

once that has installed we need to link the library.

react-native link react-native-active-keyboards

You may need to restart the packer for these changes to take effect.

Open the App.js file and replace the contents with the following:

All we are doing here is calling keyboardEnabled from the react-native-active-keyboards package. We do this in componentWillMount and assign the returned value to a property in the local state. keyboardEnabled is an async function so we make use of async/await.

Based on whether the keyboard is enabled or not we display instructions. Obviously, you could do lots more here, but we are keeping it super simple as the meat of the tutorial is in the actual coding of the custom keyboardsThe completed project can be found here.

See what we have done for others and get in touch to discuss what we can achieve together