React Native
Load a Ready Player Me avatar in your React Native app in less than 5 minutes.
Last updated
Load a Ready Player Me avatar in your React Native app in less than 5 minutes.
Last updated
Learn how to install the required packages and load and render your first avatar in your Android app.
This quickstart tutorial assumes you have a device(Android, iOS, etc.) with the Expo Go app installed.
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:
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:
Install and run the project:
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.
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.
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.
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.
