During your life as a React Native developer, you are going to handle a lot of different scenarios using keyboards. You need to know all possible combinations to choose the one that corresponds to your situation.

In this article, we are going to define and compare all types of keyboards available in react-native.

Imagine it's Monday morning, you have a new bubble on slack, your lovely designer wants small feedback for his call to action...


It's a good practice for mobile Call To Action to be within the thumb reach.


💯 Indeed, but from a technical perspective, the React Native platform comes with some limits.

How to use the Input Keyboard type in React Native

This is an example of a controlled component in React Native.

import { TextInput } from "react-native";

const App = () => {
  const [inputValue, setInputValue] = useState("Example text");

  return (
    <View>
      <TextInput
        onChangeText={setInputValue}
        value={inputValue}
      />
    </View>
  );
};

TextInput props values for `keyboardType​` by example

Protip to toggle the iOS keyboard on macOS

If you are using the macOS simulator to work on iOS mobile, you will need to toggle the keyboard or it will never appear (IO > Keyboard > Toggle Software Keyboard)

All keyboardType examples (iOS on the left, Android on the right)

With all the screenshots above we are using this code and changing only keyboardType​ props. The source code is available on GitHub.

This is the basic keyboard when you just want to handle data from a TextInput.

Numeric keyboards are used when you need to take data as a number. As you can see the Android keyboard is a little bit different, the user can have access to string characters on his screen while apple doesn't show them.

When the user wants to write his password, the first letter is not always a capital letter that's why we need to use this type of keyboard for password input.

For the Email type, the keyboard is basic and we can easily have access to the "@" and the "." character.

As you can see the type defines the phone suggestion and I can select faster my mail address.

The phone-pad type is the keyboard that we use when we made a phone call. We have access to special characters like #,+,*.

Even if on Android the keyboard is a little bit different, this is the principal functionality of this keyboard.

When the user wants to find a website, he needs to have ".", "/" and the domain extension quickly

How to choose the right keyboard to handle text or numbers with React Native.

13 React Native keyboard examples on iOS and Android

An overview of all keyboard types available in React Native

This demo shows you how to take pictures from your phone, upload them to the cloud, from there Google analyzes them and returns text-based information about your image.

I was reading the Google Vision documentation, and to have an API_KEY you need to complete theses 2 steps:

Select Google cloud vision and you should be able to Create Credentials to get your API_KEY.

Don't forget to keep your API_KEY, we are going to use it later.

To be able to use the camera, you need to ask some users permissions. From a brand new React Native Expo application (after running expo init), import the library:

import * as ImagePicker from 'expo-image-picker';

And ask users permissions to use the camera

  const [permissions, setPermissions] = React.useState(false);
  const askPermissionsAsync = async () => {
    let permissionResult = await ImagePicker.requestCameraPermissionsAsync();

    if (permissionResult.granted === false) {
      alert('Permission to access camera roll is required!');
      return;
    } else {
      setPermissions(true);
    }
  };

we are going to use the launchCameraAsync feature from expo-image-picker

  const [image, setImage] = React.useState(null);
  const [status, setStatus] = React.useState(null);
  const takePictureAsync = async () => {
    const { cancelled, uri, base64 } = await ImagePicker.launchCameraAsync({
      base64: true,
    });

    if (!cancelled) {
      setImage(uri);
      setStatus('Loading...');
      try {
        
        // Call the Google API here

      } catch (error) {
        setStatus(`Error: ${error.message}`);
      }
    } else {
      setImage(null);
      setStatus(null);
    }
  };

Getting results from the Google Vision API

The last thing we need to add is calling the API to preview the results.

// Remplace "Call the Google API here" with this
const result = await callGoogleVisionAsync(base64);
setStatus(result);

{image && <Image style={styles.image} source={{ uri: image }} />}
{status && <Text style={styles.text}>{status}</Text>}

Your first mobile application with Machine Learning

If everything is correctly set up, congratulation! You can play with your new mobile app and try to identify everything.

All the code source is available on my GitHub repository.

Use the Google Cloud Vision API with React Native to identify the content of an image from your phone camera.

Machine Learning with Google Vision in Expo React Native

Using Machine Learning from your iOS or Android phone

⚠️ Projects with Native Code Only: The following section only applies to projects with native code exposed. If you are using the managed expo-cli workflow, see the issue for expo support.


It's Monday and as a developer, you have a new card on your backlog.

Scenario:

As a User,
I can open the mail app,
So that I can continue the password-less onboarding

If you check the documentation you need to use Linking:

The problem with Linking is you need to call a mailto:

I don't want to compose an email. I just want to be able to launch the main email app. If you are familiar with Slack here is a screenshot of their onboarding.

When you push the button, you can select the email app of your choice. In my case, it's between Gmail and the Apple mail app.

I found a solution with the library react-native-email-link. You can open an email client from React Native (for 'magic link' type feature). 

import { openInbox } from 'react-native-email-link'

openInbox()

If you want to try on iOS you need to have a real device because there is no mail.app on iOS Simulator.

This article seams simple. We "just" want to replicate the user onboarding of Slack with a maginc link. In the real world you need to add a third part library.

How to open the email application with React Native

In his guide "how to become a hacker", Eric Steven Raymond said: “No problem should ever have to be solved twice”. 

Since I left university, I am following this advice every day to become an efficient developer.

One of the most important things —when you are building a mobile application— is your velocity.

Building a mobile app is different than developing a website. You need to be able to test your app quickly on real devices (mainly iOS and Android).  

Today I am going to show you how to automate the deploy of your React Native application built with Expo.

If you have a look at the documentation, the workflow to deploy your code is something like this:

This simple workflow is working but we have some problems.

If you want multiple environments for your application you can use the release channels.

If you want to deploy a new version of your application. From your develop branch you can use

From master you can use a production environment

expo publish --release-channel production

✅ We have a production and a testing environment

With Github actions, you can automate all your software workflows, with world-class CI/CD.

Expo released an official CLI tool for GitHub Actions.

To make it work you need to add theses 2 variables on repository > settings > secrets 

Create 2 files staging.yml and production.yml

// .github/workflows/staging.yml

name: Expo Publish on Staging
on:
  push:
    branches:
      - develop
jobs:
  publish:
    name: Install and publish
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - uses: expo/expo-github-action@v5
        with:
          expo-version: 3.x
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
          expo-cache: true
      - run: yarn
      - run: expo publish --release-channel staging

// .github/workflows/production.yml

name: Expo Publish on Production
on:
  push:
    branches:
      - master
jobs:
  publish:
    name: Install and publish
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - uses: expo/expo-github-action@v5
        with:
          expo-version: 3.x
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
          expo-cache: true
      - run: yarn
      - run: expo publish --release-channel production

When you merge on develop you can quickly test your application on real devices without using the expo app.

When you merge on master you deploy your application on production.

Use GitHub actions to avoid manual deploy during the release of your React Native application. In this example we are using the Over The Air updates with Expo.

Hi, I’m David

I’m a french freelance designer and developer.
I help companies to ship quality software for happy customers.
I am offering monthly engagement options to fit your project.

Transform your business

I have more than 15 years of experience in building web products. I am traveling around the world to sharpen my skills, meeting mentors in conferences, and use the same tools as theses successful companies:

13 React Native keyboard examples on iOS and Android

Machine Learning with Google Vision in Expo React Native

How to open the email application with React Native

Simple automated release workflow for React Native with Expo

My mission

As a designer, my mission is to transform your users into ambassadors of your product. To achieve this goal, we need to deliver a memorable user experience.

I analyze a lot of mobile applications, to understand what makes a successful design in the modern world where everyone has a phone.

2 details

8 details

11 details

5 details

You only have one chance
to make a first impression

Let’s make it an amazing one.

Let’s create something together today

Turn your ideas into incredible products.

Hi, I’m David

I’m a french freelance designer and developer.I help companies to ship quality software for happy customers.I am offering monthly engagement options to fit your project.

Transform your business

I have more than 15 years of experience in building web products. I am traveling around the world to sharpen my skills, meeting mentors in conferences, and use the same tools as theses successful companies:

13 React Native keyboard examples on iOS and Android

Machine Learning with Google Vision in Expo React Native

How to open the email application with React Native

Simple automated release workflow for React Native with Expo

My mission

As a designer, my mission is to transform your users into ambassadors of your product. To achieve this goal, we need to deliver a memorable user experience.

I analyze a lot of mobile applications, to understand what makes a successful design in the modern world where everyone has a phone.

2 details

8 details

11 details

5 details

You only have one chance to make a first impression

Let’s make it an amazing one.

Let’s create something together today

Turn your ideas into incredible products.

I’m a french freelance designer and developer.
I help companies to ship quality software for happy customers.
I am offering monthly engagement options to fit your project.

You only have one chance
to make a first impression