LogoLogo
WebsiteBlogForumsSign up
  • Welcome
  • How Ready Player Me works
  • FAQ
  • 👩‍💻Integration Guides
    • Overview
    • Unity
      • Quickstart
      • Avatar Creator Integration
        • WebView Avatar Creator
          • Avatar Creator for Android & iOS
          • Avatar Creator for WebGL
        • Build your own Avatar Creator
          • Start with the sample
          • Elements
            • Asset Selection Element
            • Color Selection Element
            • Template Selection Element
            • Body Shapes Selection Element
            • Gender Selection Element
            • Avatar List Element
            • Photo Capture Element
            • Signup Element
            • Login Element
            • Logout Element
          • User Management
      • Load 2D Renders
      • Avatar Loader Window
      • Setup Multiplayer
      • Setup for XR (Beta)
        • Setup the Player Avatar
        • Setup Meta Movement SDK
        • Setup Final IK
        • Setup XR Hands
          • RpmHandDriver script
        • Facial Animations
        • VR Avatar Creator
      • Animations
        • Ready Player Me Animation Library
        • Mixamo Animations
      • Optimize
        • Avatar Configuration
        • Avatar Caching
        • Defer Agents
      • Code Samples
        • Loading 3D Avatars
        • Loading 2D Avatars
        • Avatar Creator (WebGL)
        • Avatar Creator (Desktop)
        • Avatar Creator (Mobile)
        • Distance-based LODs
      • Troubleshooting
        • Editor UI Window Issues
        • Avatar loading issues
        • iOS issues
        • WebGL issues
        • Firewall issues
        • Updating the SDK
          • Unity SDK 3.0.0 Migration guide
          • Unity SDK 4.0.0 Migration guide
          • Unity SDK 5.0.0
          • Unity SDK 7.0.0
          • WebView 2.0 Migration
        • Package installation issues
      • Help us improve the Unity SDK
      • FAQ for Unity
      • Early Access Features
    • Unreal Engine
      • Quickstart
        • Import SDK Manually
      • Avatar Creator Integration
        • Build your own Avatar Creator
          • Sample Structure
          • Customization Guide
        • WebView Avatar Creator
      • Load Avatars
      • Animations
        • Ready Player Me Animation Library
        • Loading Mixamo animations
        • Mannequin animation retargeting
        • Blender FBX export to UE
        • Oculus Lipsync integration
      • Optimize
        • Avatar configuration
        • Avatar caching
        • Avatar preloading
      • Code Samples
        • Unreal Engine 5 samples
        • Lyra project integration example
        • VR Avatars
        • Unreal Engine 4
      • Troubleshooting
        • Project compilation issues
        • Missing materials on built applications
        • Avatar loading issues
        • Animation issues
        • Unreal SDK breaking changes
        • Avatar lighting issues
        • Updating from earlier versions
          • Unreal SDK 3.0.0 Migration guide
        • Auto LOD issues
      • Help us improve the Unreal Engine SDK
      • FAQ for Unreal Engine
      • Early Access Features
    • React
      • Quickstart
    • React Native
    • iOS Native
    • Android Native
    • Web Integration
      • Quickstart
      • User Management
        • Guest Accounts
        • Account Linking
      • Avatar Creator integration
      • Optimize
    • API Integration
      • Quickstart
      • Custom Avatar Creator
      • User management
        • Ready Player Me Account
        • Anonymous Accounts
    • UX/UI Guidelines
      • Summary & quick tips
      • UX and UI guidelines and essentials
        • Foundation for good user experience
          • Layout
          • Colors
          • Typography
          • Icons
          • Dark mode and light mode
        • Mobile best practices
          • Layout
        • Making Ready Player Me feel native
          • Seamless Avatar Integration
          • Consistent Branding
          • Responsive Layout
          • Performance Optimization
        • Discoverability of the avatar editor
          • Onboarding tutorial
          • Clear navigation
          • Contextual Placement
  • 🖌️Customizing Guides
    • Studio (Developer Dashboard)
    • Avatar Creator Appearance
      • Avatar URLs
      • Avatar Shortcodes
    • Upload and Manage Custom Assets
      • Asset Manager in Studio
      • Configure in Studio
      • Manage custom assets using the API
      • Unlocking assets through API (Beta)
    • Create Custom Assets
      • Fullbody Outfits
        • Checking Skin Weights
      • Tops, Bottoms, Shoes
        • Editing templates
      • Hairstyle
      • Headwear
      • Facewear
      • Glasses
      • Hero Characters
      • Modeling Guidelines
  • 🔃API Reference
    • REST API
      • Authentication
      • Avatars
        • GET - 3D avatar
        • GET - 2D Render of an Avatar
        • GET - Metadata
        • PUT - Equip an asset
        • PUT - Unequip an asset
      • Assets
        • Asset Entity Properties
        • POST - Create Asset
        • GET - List Assets
        • PATCH - Update Asset
        • POST - Upload Asset Files
        • POST - Add Asset to Application
        • DELETE - Remove Asset from Application
        • PUT - Unlock asset for a user
        • PUT - Lock asset for a user
      • Users
        • POST - Create User
      • Auth
        • GET - Token
      • Changelog
    • Avatars
      • Full-body avatars
      • Full-body XR avatars
      • Half-body avatars
      • Morph targets
        • Apple ARKit
        • Oculus OVR LipSync
    • Avatar Creator
  • 🔉Support
    • Forums
    • Licensing & Privacy
Powered by GitBook
On this page
  • Quickstart
  • Before you begin
  • 1. Pull down the example repo
  • 2. Install packages
  • 3. Run in device
  • 4. Use your subdomain in your project
  • 5. Make your project awesome!

Was this helpful?

  1. Integration Guides

React Native

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

PreviousQuickstartNextiOS Native

Last updated 11 months ago

Was this helpful?

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:

2. Install packages

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.

4. Use your subdomain in your project

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:

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

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 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 (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.

You can explore our web avatar creator docs more , 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 .

If you want something really custom, you can even and build a completely custom avatar creator without using our web creator at all.

👩‍💻
https://github.com/readyplayerme/Example-React-Native/
expo.io
react-native-webview
2D Render API
Studio
here
here
explore our REST APIs