React Native

Load a Ready Player Me avatar in your React Native app in less than 5 minutes.

Quickstart

Learn how to install the required packages and load and render your first avatar in your Android app.

Before you begin

• This quickstart tutorial assumes you have a device(Android, iOS, etc.) with the Expo Go app installed.

1. Pull down the example repo

Go to the Ready Player Me GitHub organization and pull down an example project to your local machine. You can find this example repository here:

• https://github.com/readyplayerme/Example-React-Native/

2. Install packages

This example uses expo.io for bootstrapping the React Native project, however, it should be easily adaptable for any React Native project using the react-native-webview package. Installing expo:

npm install --global expo-cli

Install and run the project:

npm install
expo start

After this, the expo should start in the CLI.

This command starts the Expo locally, allowing connections to the Expo on the local network. To test outside the local network, use the --tunnel flag.

expo start --tunnel

3. Run in device

Now once the expo is running, you can scan the QR code in your device with the Expo Go application. This should open the Application on your device.

If you finished the flow of creating the avatar, the 2D image is rendered on the avatar page. The default link will load the avatar with default settings. You can update the URL based on the parameters defined under 2D Render API to have a more specific 2D image of the avatar.

4. Use your subdomain in your project

Now that the project is working locally, you can ensure that the avatars created in the project will be associated with your Ready Player Me application by including your subdomain in the project. First, sign in (or sign up) to Studio (Developer Dashboard), navigate to the details page of the application you want to use, and then copy the subdomain value at the top of the page. Once you have your subdomain, go back to your project then navigate to the App.tsx file and replace the 'demo' value with your subdomain.

Now your project will successfully connect to your Ready Player Me application.

5. Make your project awesome!

You now have a working native React app with a working implementation of the Ready Player Me avatar creator that will create avatars linked to your Ready Player Me application. At this point you can go in any direction you think makes sense for your project:

• You can explore our web avatar creator docs more here, to find out more about how you can get data in and out of the creator.
• You can learn how to customize the web avatar creator to match your branding here.
• If you want something really custom, you can even explore our REST APIs and build a completely custom avatar creator without using our web creator at all.