Lets Code the Painting

To start, let’s create a simple React Native app from your terminal.

react-native init MyStylingApp

We’ll use a couple of libraries to help us get to our destiny. Let’s add them upfront:

yarn add react-native-image-picker react-native-fritz

React native Image Picker will help us get the image from the user’s device, either from the gallery or camera.

will help us get the image from the user’s device, either from the gallery or camera. React Native Fritz AI is a wrapper around the Fritz SDK for implementing a range of cool ML features in our React Native apps.

Attaching Libraries

We prefer linking libraries using CocoaPods in iOS. CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects (just like we use npm for our React and other Node.js-based projects). You can install it using Homebrew.

Once CocoaPods is installed, navigate to your projects directory and execute the following commands to initialize the pods in your app:

cd ios/

pod init

This will create a Podfile in your ios directory. Update that file with the following code:

Here, we’ve added 4 libraries besides React Native in our pods.

Fritz v3.0 — It adds all the basic structures of the Fritz SDK that’s required for running any of Fritz AI’s modules in your app.

— It adds all the basic structures of the Fritz SDK that’s required for running any of Fritz AI’s modules in your app. Fritz VisionStyleModel — For default style transfer models, and an API for custom models.

— For default style transfer models, and an API for custom models. RNFritz — React Native wrapper for the Fritz SDK that exposes the native API to out React Native environment.

— React Native wrapper for the Fritz SDK that exposes the native API to out React Native environment. react-native-image-picker for linking the image picker library to get a user’s images

In order to install these libraries in your app, execute pod install in the ios directory from your terminal. You can read more about using React Native with CocoaPods here.

Some Project Configuration

Since the Fritz SDK is built using Swift, while React Native relies on Objective-C, there are a few extra steps that we have to perform before we get our app running.

Setting “Always Embed Swift Standard Libraries” to YES. This option is available in build settings in Xcode of your App’s target:

Setting Allow Non-modular Include in Framework Module to Yes in build settings of RNFritz Target Under Pods project:

Setting up Fritz AI App — The Journey begins!

Creating a Fritz AI account and setting up a project should only take a few minutes.

Once you’ve created your account, you can create a new app from your dashboard. Please make sure that your bundle identifier input is the same as the bundle identifier of your app. Download Fritz-Info.plist from the dashboard and add it to your Xcode project. This will link your app with Fritz AI. You’ll then be able monitor your model’s performance in real-time on your Fritz dashboard.

Configuring the Fritz SDK in our app

Before using the Fritz SDK for any ML-based task, we have to configure it. The ideal place to do this will be your App.js, where your React Native app kicks off.

Selecting an Image

As mentioned above, we’ll use the React Native image picker for selecting the image from the user’s gallery or camera (depending upon their choice). Here’s the code that will get us the image. Pay special attention to inline comments for more info about what the code is doing:

Using Fritz AI Pre-Trained Styles

Now that we have a path of the image we want to style, it’s time to style our first image. There are 11 different styles pre-trained for you within the Fritz SDK, including Claude Monet’s The Poppy Field, Picasso’s Les Femmes d’Alger and Vincent van Gogh’s Starry Night, among others. The API to use these models is incredibly simple.

We break this styling process into two small steps. First, we’ll create an instance of RNFritzVisionImageStyling , and then we’ll use this instance for styling images.

Creating instance of RNFritzVisionImageStyling

For initializing the RNFritzVisionImageStyling instance, we have to pass an object with the following keys that include details of model we will be using.

name — In the case of Fritz AI pre-trained models, it will one from this list.

We’ll discuss other parameters in detail later in this tutorial, where we’ll be integrating our custom models.

Our react-native-fritz wrapper allows us to use multiple models in a single app so that you can build great user experiences. The code above can be used to initialize any other model by just changing the parameters. Please make sure you create just one instance per model to avoid any memory leaks in your app. You can use the same instance for styling as many images as you want.

Here is the list of available pre-trained models.

We’ll now style the image that we got from the image picker using the URI of the file.