Let's Build an Image recognition App in React native.

Firstly, you'll need to initialize a new React Native app. For this I will use a React Native app with Expo. Because it is the easiest way to get started.

npm install -g expo-cli

expo init ImageClasify

You'll also want to install Clarifai. If you guys don't know about the Clarifai , The Clarifai API offers image and video recognition as a service. Whether you have one image or billions, you are only steps away from using artificial intelligence to recognize your visual content. The API is built around a simple idea. You send inputs (an image or video) to the service and it returns predictions. The best thing about this API is this has custom models build for us as well as we can build our own model inside this. 

Now Let's install Clarifai in to the React Native app

npm install clarifai 

Now Simply Visit Clarifai site and create a new account. Then Create a new Application and navigate inside to it.

Then You will able to see a interface like below

In here You can create your own Models with your images as well but now i will continue with the public models that Clarifai provides. So what we just need is only the API.   Under the API Keys Just copy the text under ImageClassify-all-scopes in my screen shot.

Lets Move to Build the Application. Hope You guys have basic Knowledge the React Native.

// Require the client

const Clarifai = require('clarifai');

// To initialize with your API key.

const app = new Clarifai.App({

    apiKey: 'YOUR_API_KEY'

});

Below i paste the source code with comments which will give you a clear idea. Just try it yourself in your app

import React from 'react';

import { Text, View, TouchableOpacity } from 'react-native';

import { Camera, Permissions, ImageManipulator } from 'expo';

import { PulseIndicator } from 'react-native-indicators';

import { Button } from 'react-native-elements';

import Icon from 'react-native-vector-icons/FontAwesome';

const Clarifai = require('clarifai');

const clarifai = new Clarifai.App({

    apiKey: 'Your Api'

});

process.nextTick = setImmediate;

export default class SearchByImage extends React.Component {

    state = {

        hasCameraPermission: null,

        predictions: [],       

    };

    async componentWillMount() {

        const { status } = await Permissions.askAsync(Permissions.CAMERA);

        this.setState({ hasCameraPermission: status === 'granted' });

    }

   

    //Method to capture the photo from camera and return the uri

    capturePhoto = async () => {

        if (this.camera) {

            var photo = await this.camera.takePictureAsync();            

            return photo.uri;

        }

    };

    //method to resize and return the byted image.

    //Resizing the photo from high resolution to a 300px by 300px 
    //image size is necessary for speed optimization when 
    //we send the photo to our prediction model. 

    resize = async photo => {

        let manipulatedImage = await ImageManipulator.manipulateAsync(

            photo,

            [{ resize: { height: 300, width: 300 } }],

            { base64: true }

        );

        return manipulatedImage.base64;

    };

    //method to get the prediction of the image and return

    predict = async image => {

        let predictions = await clarifai.models.predict(

        clarifai.GENERAL.MODEL, // model need to get prediction from

        image

        );

        return predictions;

    };

    //method call when Capture Image button pressed

    //set the state for predictions get

    objectDetection = async () => {

        let photo = await this.capturePhoto();

        let resized = await this.resize(photo);

        let predictions = await this.predict(resized);

        this.setState({ predictions: predictions.outputs[0].data.concepts });

        console.log(this.state.predictions)        

    };

    

    render() {

        const { hasCameraPermission, predictions } = this.state;

        if (hasCameraPermission === null) {

            return <View />;

        } else if (hasCameraPermission === false) {

            return <Text>No Permission to camera</Text>;

        } else {

            return (

                <View style={{ flex: 1 }}>

                    <Camera

                        ref={ref => {

                            this.camera = ref;

                        }}

                        style={{ flex: 1 }}

                        type={this.state.type}

                    >

                        <View

                            style={{

                                flex: 1,

                                backgroundColor: 'transparent',

                                flexDirection: 'column',

                                justifyContent: 'flex-end'

                            }}

                        >                            

                            <TouchableOpacity

                                style={{

                                    flex: 0.1,

                                    alignItems: 'center',

                                    backgroundColor: 'black',

                                    height: '10%',

                                }}

                                onPress={this.objectDetection}

                            >

                                <Text style={{ fontSize: 30, color: 'white', padding: 15 }}>                                    

                                    Capture Image

                                </Text>

                            </TouchableOpacity>

                        </View>

                    </Camera>

                </View>

            );

        } 

    }

}

Comment If you Have Issues.