How to Build Landmark Recognition App with React Native and Vision AI

In this article, we cover the second part of our two part series. We will create a React Native application that makes use of the Firebase Cloud Function that we created in the . Here I will cover building the application in detail. If you want to skip ahead to the finish line, the full code is available . first part here Sample image of the application: What is React Native? React Native lets coders develop applications for both Android and iOS with just one codebase. React Native applications are built using JavaScript or TypeScript, which simplifies the transition to mobile development for web developers. Unsurprisingly, the framework has gained popularity over the past few years. What is Expo? is a set of tools and services built around React Native that help you quickly develop, build and deploy both iOS and Android apps from the same JavaScript/TypeScript codebase. Expo Setting up React Native with Expo In this project we will be using Expo with React Native. We are going to go through step by step on how to set it up. If you run into problems you can take a look at their which goes into more detail. docs npm install -g expo-cli Make sure that you’re in the landmark root folder that we created earlier in part 1. expo init frontend After running the command there will be an option to choose a template. Select the option. init blank (Typescript) You can now start the application by running: frontend expo start cd This opens your default browser with the following view You will have to test and run the application on your mobile phone. You can do so by running and just scanning the QR code to start. You can shake the phone to see the developer menu, . it through the Expo mobile application read more with this application because the dependency does not support that. NOTE: Emulators will not work expo-camera Installing dependencies First make sure that you are in the frontend folder Expo created. Also make sure that Expo is not while running these commands. running We will be using Expo to install most dependencies since that’s the way to do it. recommended expo install firebase expo-camera expo-file-system Setting up Firebase in the frontend Go ahead and create a folder within the folder and within that folder create . helpers frontend firebase_init.ts Start by coding the file. firebase_init.ts You need to replace the firebase config settings with your own. They can be found in the in the landmark project you created in . Click on the cog and select Firebase console part 1 Project settings. This code should be pretty self-explanatory. One thing to take note of here is that this is a good way to make sure that you are only initializing Firebase once within the project. Components In this chapter we will go through all components we will be creating for this application. The components will all be inside the . Start by creating the components folder and add the following files to it: frontend/components folder Setting up CameraPage.tsx Start with setting up the component which is responsible for taking the images and uploading them for validation. CameraPage : CameraPage.tsx This component has several dependencies. Let’s go through them all so we can get this component working, start with the component. LandmarkCamera : LandmarkCamera.tsx Next add a button to the that will take the image. CameraPage : CircleButton.tsx Next up is the LandmarkModal component that will display the results of the taken image. : LandmarkModal.tsx Then we have the vision function that is placed in the folder. Inside the helpers folder create an folder and then inside it: helpers api vision.ts : api/vision.ts This function will send the request to the cloud function. Updating App.tsx Let’s not forget to update which was created by Expo in the frontend folder. In this file we will sign-in and request the camera permission from the user. App.tsx App.tsx: In the hook we are first signing in anonymously and then requesting camera permissions. We want to start this process as early as possible so that we get the user id as quickly as possible. useEffect And that should cover all code needed by the application. Wrapping up To test the application, take a picture of this image of the Eiffel Tower. When snapping the pic, please ensure that the Eiffel Tower is fully included in the picture but nothing else on your screen is. By doing so, you increase the chances of the landmark being identified. After the Vision API has validated the image a modal should pop up with the results. You can just press to go and take an image of something else. OK You should now have a fully functional React Native mobile application that you can take images with. The images will then be pushed to the firebase storage and validated by the Cloud Vision API through the Cloud Function. Have fun with the app! Mathias Rahikainen is a Full Stack Developer and Consultant at Acelvia, where we build web and mobile apps for our awesome customers. We’re always interested in taking on new interesting projects. Read more about us at https://www.acelvia.com/en or get in touch via contact@acelvia.com .