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.

Transform your business

I have more than 13 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:

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.

8 details

11 details

5 details

4 details

You only have one chance
to make a first impression

Let’s make it an amazing one.

Let’s create something together

Have an interesting web, mobile or design project?

Hi, I’m David

I’m a french freelance designer and developer. I help companies to ship quality software for happy customers.

Transform your business

I have more than 13 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:

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.

8 details

11 details

5 details

4 details

You only have one chance to make a first impression

Let’s make it an amazing one.

Let’s create something together

Have an interesting web, mobile or design project?

I’m a french freelance designer and developer.
I help companies to ship quality software for happy customers.

You only have one chance
to make a first impression