Want to build an iOS application but don’t know Swift? Well, React Native lets you build a native mobile application with JavaScript and React so you don’t have to learn a whole new language in order to create an iOS app. Here’s a tutorial on how to create an iOS app with Clarifai’s API and React Native!

shirleyfaceAs you might already know, Swift is a programming language created by Apple for building apps for iOS, Mac, Apple TV, and Apple Watch. Whether or not you’re familiar with Swift, it may not be your favorite programming language to work with. So, today I will walk you through how to start an iOS app using React Native, a framework that lets you build mobile apps using only JavaScript and the Clarifai API so you can not only easily build iOS apps, but iOS apps powered by machine learning and visual recognition!

Let’s setup our dev environment first!

  • Npm
    Install Node.js if you don’t have npm installed
    Npm is a robust and consistent package manager for JavaScript. It will help us to specify and install package dependencies. Due to its consistency, npm is very quick to deploy and allows teams or users to quickly collaborate with others or set up projects of the same build with a simple npm install.
$ npm install -g react-native-cli

Add sudo to the front if you get a permission error. -g is global mode that the package will be installed globally.

Getting started

  • Initializing your project by running react-native command line
$ react-native init <YOUR_PROJECT_NAME> 
$ cd <YOUR_PROJECT_NAME>

react-native init calls npm install react react-native –save and npm init for you. So that after running the command line, a React-Native project will be created.

$ npm install clarifai --save

To access the Clarifai API, we first need to install our JavaScript client. This is so that we will be able to call the tag endpoint in order to get the contents of images or videos.

–save writes dependencies into the package.json file for you.

$ npm install react-native-image-picker@latest --save

A React Native module for creating native UI component to access camera or gallery folder.

Running the application

First, choose your favorite text editor. I use Sublime, however you can use Atom, Vim, or anything you prefer.

Once you open your project, your project folder should look like this:

image01

Now you must be curious about what the application looks like! You can either run the application through Xcode or through the following command:

$ react-native run-ios

If you run into “couldn’t find preset ‘es2015’ TransformError”, install the babel-preset-es2015:

$ npm install babel-preset-es2015 --save

Here is a screenshot of the application after you run the command through the terminal:

image05

Or if you are wondering how to run the application through xcode:

image07

Modifying the application

Great! Now that that’s done, time to add some components! This application will let user to take a picture or select one from the gallery. The Clarifai API will then analyze the image and tell you the inside visual contents.

This tutorial will focus on modifying index.ios.js only, for you to easily follow. When you master React Native, separating all the components into different files will be ideal.

  • Adding a clickable text

Update return value for render() function to following

<View style={styles.container}>
  <TouchableHighlight onPress={this.selectImage.bind(this)}>
    <Text>Select an image</Text>
  </TouchableHighlight>
</View>

Therefore, when a user clicks on ‘Select an image’, the function selectImage() will be triggered. The function bind(this) allows us to set YOUR_PROJECT_NAME object to be bound to this when selectImage() is called so that we won’t get a TypeError with the binding function at the end.

TouchableHighlight is one of the components for React Native, import it from ‘react-native’ as:

import {
  ...,
  TouchableHighlight
} from 'react-native';
  • Importing image picker

In order to import the downloaded react-native-image-picker package, we need to link it using the following steps:

In Xcode, right click on your project folder. Add Files to “YOUR_PROJECT_NAME” -> find RNImagePicker.xcodeproj under node_modules/react-native-image-picker/ios

image06

Scroll down to Linked Frameworks and Libraries, add libRNImagePicker.a from Workspace.

image08

For iOS 10+, add NSPhotoLibraryUsageDescription and NSCameraUsageDescription keys to your Info.plist for permissions.

image00

After setting up project libraries, let’s go back to our index.ios.js file.

Import react-native-image-picker package first:

import ImagePicker from 'react-native-image-picker';

Add an options variable for ImagePicker customization. We want to set value for title, skip iCloud backup, and maxWidth for better performance when we send the image to the Clarifai service.

var options = {
  title: 'Select an Image',
  storageOptions: {
    skipBackup: true,
  },
  maxWidth: 480
};
  • Implementing selectImage()

Paste following lines above your render() function inside the class:

selectImage(){
  ImagePicker.showImagePicker(options, (response) => {
    console.log('Response = ', response);
    if (response.didCancel) {
      console.log('User cancelled image picker');
    }
    else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    }
    else {
      // Do something with the selected image
    }
  });
}

Now run your application again, you should have an image picker available:

image03

  • Let’s show the image that the user selected

Display image in render() function with:

<View style={styles.container}>
  ...
  <Image
    source={{uri: this.state.imageSource}}
    style={styles.image}
  />
</View>

Image is one of the components. Lets import it from ‘react-native’:

import {
  ...,
  Image
} from 'react-native';

Update the style sheet for image display:

const styles = StyleSheet.create({
  ...,
  image: {
    width: 200,
    height:200 
  }
});

Set initial state under the constructor inside of the class:

constructor() {
  super();
  this.state = {imageSource:'https://community.clarifai.com/uploads/default/_emoji/clarifai.png'};
}

Update selectImage():

// Do something with the selected image
this.setState({imageSource: response.uri.replace('file://', '')});

Your application should look like this after selecting image from the gallery:

image04

The Clarifai API

Now we are getting to the most exciting part – getting visual content using the Clarifai API!

First, if you don’t have a Clarifai account yet, create one through developer.clarifai.com. The next step is to create your first application. Copy the Client Id and Client Secret values and replace {CLIENT_ID} and {CLIENT_SECRET} outside of your class:

var app = new Clarifai.App(
  '{CLIENT_ID}',
  '{CLIENT_SECRET}'
);

Don’t forget to import the Clarifai API:

import Clarifai from 'clarifai';

Because of the Clarifai API, we will be able to get visual contents using the image that a user selects. A simple way to show what has been returned by Clarifai is by adding a text under render() function:

<View style={styles.container}>
  ...
  <Text>{this.state.tagText}</Text>
</View>

First, we can initialize the state tagText as an empty string:

constructor() {
  ...
  this.state = {imageSource:'https://community.clarifai.com/uploads/default/_emoji/clarifai.png', tagText: ''};
  ...
}

One last thing is to update the selectImage() function and add following code under comment:

// Do something with the selected image
this.setState({imageSource: response.uri.replace('file://', '')});
app.models.predict(Clarifai.GENERAL_MODEL, {base64:response.data}).then(
(res) => {
  console.log('Clarifai response = ', res);
  let tags = '';
  for (let i = 0; i<res.data.outputs[0].data.concepts.length; i++) {
    tags += res.data.outputs[0].data.concepts[i].name + ' ';
  }
  this.setState({tagText:tags});
},
(error)=>{
  console.log(error);  
});

Hooray! Let’s test our application. You should get results by selecting images from your iOS device or simulator:

image02

Please check out the GitHub repo for this tutorial if you need more instruction and resources! Exponent, NativeBase, and Material Design are great tools you can use for designing, and also Deco is a nice React Native IDE for developing.

I learned how to create an iOS app with #JavaScript #Clarifai #ReactNative – here’s the awesome tutorial I used <3