React Native SDK

This guide explains how to integrate the Streamoji Avatar SDK into your React Native or Expo application.

1. Installation

First, install the SDK and its required 3D rendering dependencies:

# Install the SDK
npm install @streamoji/react-native-avatar-sdk

# Install 3D Rendering dependencies
npm install three@0.150.0 @react-three/fiber @react-three/drei expo-gl expo-three react-native-webview

Note: We recommend using three@0.150.0 for maximum compatibility with React Native and Expo environments.

2. Authentication

Streamoji uses a secure token-based authentication system. You should generate tokens on your backend and provide them to the mobile app.

import { useStreamojiAuth } from '@streamoji/react-native-avatar-sdk';

const MyComponent = () => {
  const { getAuthToken, authToken, isFetching } = useStreamojiAuth({
    tokenEndpoint: 'https://your-backend.com/api/streamoji-token'
  });

  const handleLogin = async () => {
    await getAuthToken({
      userId: 'user_123',
      userName: 'Alex',
      expiresIn: 3600
    });
  };
}

3. Launching the Avatar Creator

Use the StreamojiAvatarCreator component to let users build their avatars. It emits a v1.avatar.exported event when the user saves their work.

import { StreamojiAvatarCreator } from '@streamoji/react-native-avatar-sdk';

// ... inside your component
{authToken && (
  <StreamojiAvatarCreator
    authToken={authToken}
    config={{
      bodyType: 'Full',
      whiteLabelTitle: 'My App',
      whiteLabelColor: '#0F766E'
    }}
    onAvatarExported={(event) => {
      console.log('GLB URL:', event.data.url);
      console.log('Avatar ID:', event.data.avatarId);
      // Close creator and save the URL/ID to your database
    }}
  />
)}

4. Rendering the 3D Avatar

To display the saved avatar with high-quality 3D graphics, use the StreamojiAvatar component. It uses React Three Fiber for a premium, interactive experience.

import { StreamojiAvatar } from '@streamoji/react-native-avatar-sdk';

const AvatarPreview = ({ glbUrl }) => {
  return (
    <View style={{ height: 400, width: '100%' }}>
      <StreamojiAvatar 
        url={glbUrl} 
        style={{ flex: 1 }}
      />
    </View>
  );
};

Features of the 3D Renderer:

Interactive Controls: Users can rotate and zoom using standard gestures.
Premium Lighting: Includes studio lighting, environment maps, and contact shadows.
Cross-Platform: Works seamlessly on both iOS/Android (via Expo-GL) and Web.

5. Summary of Data Types

The onAvatarExported event returns the following payload:

Field	Type	Description
`url`	string	The direct URL to the .glb 3D model file.
`avatarId`	string	Unique identifier for the created avatar.
`userId`	string	The ID of the user who created the avatar.
`thumbnailUrl`	string?	(Optional) A static PNG image of the avatar.

Best Practices

Cache the URL: Always save the url and avatarId to your own database so you can reload the avatar without opening the creator again.
Keep Secrets Secure: Never put your Client Secret in the React Native code. Always handle token generation on your server.
Use Suspense: The StreamojiAvatar component works with React Suspense for smooth loading states.