streamoji avatars react native sdk

README.md

@@ -1,49 +1,70 @@
-# Ready Player Me embedded in a React Native WebView
+# Streamoji Avatar SDK for React Native
 
-This example showcases embedding [Ready Player Me](https://readyplayer.me) avatar creator as a `WebView` to React Native mobile applications and retrieving the URL to the 3D model of the avatar.
+This SDK helps React Native apps launch the [Streamoji Avatar Creator](https://avatars.streamoji.com), apply white-label options, and receive exported avatar events.
 
-The example uses the cross-platform (iOS, Android, MacOS, Windows) [react-native-webview](https://github.com/react-native-webview/react-native-webview) module to load and interact with Ready Player Me inside a WebView.
+The SDK is designed for a backend-issued token flow. Your app should request a short-lived Streamoji auth token from your own server, then pass that token into the creator. Do not ship a Streamoji client secret inside a mobile app.
 
-## Demo
+## Features
+- **Backend-first auth flow**: Request a session token from your backend instead of exposing secrets on-device.
+- **Custom Branding**: Configure white-labeling options directly from your app.
+- **Easy Integration**: High-level `StreamojiAvatarCreator` component built on top of `react-native-webview`.
+- **Event Handling**: Listen for avatar export events to receive GLB and thumbnail URLs.
 
-Try this example [live on Snack](https://snack.expo.io/@rainerwolf3d/readyplayerme-with-react-native-expo).
+## Quick Start
 
-## How to use
-
-This example uses [expo.io](https://expo.io) for bootstrapping the React Native project, however it should be easily adaptable for any React Native project using the [react-native-webview](https://github.com/react-native-webview/react-native-webview) package.
-
-1. Install [expo-cli](https://docs.expo.io/get-started/installation/).
-
-```
-npm install --global expo-cli
+1. Install dependencies:
+```bash
+npm install react-native-webview
 ```
 
-2. Run the project in development mode
-
-```
-npm install
-expo start
+2. Expose a backend endpoint that returns an auth token:
+```json
+{
+  "authToken": "streamoji-session-token"
+}
 ```
 
----
-
-## About Ready Player Me
+3. Generate a session token from your app:
+```tsx
+import { useStreamojiAuth } from '@streamoji/react-native-avatar-sdk';
 
-[Ready Player Me](https://readyplayer.me/developers) is a cross-game avatar platform for Unity, Unreal Engine, and all web-based stacks.
+const { getAuthToken } = useStreamojiAuth({
+  tokenEndpoint: 'https://your-backend.example.com/streamoji/token'
+});
 
-We give users an interoperable personal avatar that travels with them across many virtual experiences. Developers use our plug-and-play avatar creator so they wouldn’t have to spend months on building their own.
-
-
-### Getting Started
-
-Visit [docs.readyplayer.me](https://docs.readyplayer.me/) to get started with integrating Ready Player Me or explore the [examples](https://github.com/readyplayerme).
-
-### Community
+const token = await getAuthToken({
+  userId: 'user_12345',
+  userName: 'Jane Doe',
+  expiresIn: 1800
+});
+```
 
-Get in touch with the Ready Player Me community over at our [Forums](https://forum.readyplayer.me/).
+4. Launch the creator:
+```tsx
+import { StreamojiAvatarCreator } from '@streamoji/react-native-avatar-sdk';
+
+<StreamojiAvatarCreator
+  authToken={token}
+  config={{
+    whiteLabelTitle: 'My App',
+    whiteLabelColor: '#0F766E',
+    bodyType: 'Full',
+    thumbnail: true
+  }}
+  onAvatarExported={(event) => {
+    console.log('Avatar URL:', event.data.url);
+  }}
+/>
+```
 
-### Becoming a partner
+## Token Endpoint Contract
+Your backend endpoint should:
+- accept the SDK request body with `userId`, `userName`, and optional Streamoji auth parameters
+- attach your private Streamoji credentials server-side
+- return JSON with either `authToken` or `token`
 
-Ready Player Me is already used in [thousands of apps and games](https://readyplayer.me/partners).
+## Demo Integration
+The [App.tsx](/abs/c:/Example-React-Native/App.tsx:1) file in this repository is a demo app that exercises the SDK with a configurable backend token endpoint.
 
-Want to add Ready Player Me avatars to your own app or game? Apply [here](http://readyplayer.me/become-a-partner) or let us know at [support@readyplayer.me](mailto:support@readyplayer.me).
+## About Streamoji
+Streamoji provides a powerful avatar creation platform that can be integrated into any application. For more information, contact support at Streamoji.

dist/ExampleUsage.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * A simple example of how to use the Streamoji Avatar SDK.
+ * This component demonstrates the two-step process:
+ * 1. Authenticating to get a session token.
+ * 2. Launching the Avatar Creator.
+ */
+declare const StreamojiExample: () => React.JSX.Element;
+export default StreamojiExample;
+//# sourceMappingURL=ExampleUsage.d.ts.map

dist/StreamojiAvatarCreator.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StreamojiConfig } from './types';
+import { AvatarExportedEvent } from './events';
+export interface StreamojiAvatarCreatorProps {
+    authToken: string;
+    config?: StreamojiConfig;
+    onAvatarExported: (event: AvatarExportedEvent) => void;
+    onReady?: () => void;
+    onError?: (error: any) => void;
+    style?: any;
+}
+export declare const StreamojiAvatarCreator: React.FC<StreamojiAvatarCreatorProps>;
+//# sourceMappingURL=StreamojiAvatarCreator.d.ts.map