senraa-rn-tryon

React Native virtual try-on plugin. Standalone — uses the same Senraa API as the JavaScript SDK (no SDK dependency).

Installation

npm install senraa-rn-tryon
# or
yarn add senraa-rn-tryon

No external SDK dependency — uses the same Senraa API directly.

Setup

1. Wrap your app with SenraaProvider:

import { SenraaProvider } from 'senraa-rn-tryon';

function App() {
  return (
    <SenraaProvider
      config={{
        apiKey: 'YOUR_API_KEY',
        baseUrl: 'https://api.senraa.com', // optional
        timeout: 180000, // optional, ms (default: 3 min for try-on)
      }}
    >
      <YourApp />
    </SenraaProvider>
  );
}

2. Use the try-on hook or button:

Option A: useSenraaTryOn hook

import { useSenraaTryOn } from 'senraa-rn-tryon';

function TryOnScreen() {
  const { tryOn, loading, error, resultUrl, paymentRequired, reset } = useSenraaTryOn();

  const handleTryOn = async () => {
    // Pass image URLs or base64 data URLs
    const result = await tryOn(
      'https://example.com/user-photo.jpg',
      'https://example.com/garment.png'
    );
    if (result.success) {
      console.log('Result:', result.data?.resultImageUrl);
    }
    if (paymentRequired) {
      // Navigate to subscription / billing
    }
  };

  return (
    <View>
      <Button onPress={handleTryOn} title="Try On" disabled={loading} />
      {loading && <ActivityIndicator />}
      {error && <Text>{error}</Text>}
      {resultUrl && <Image source={{ uri: resultUrl }} style={{ width: 200, height: 300 }} />}
    </View>
  );
}

Option B: TryOnButton component

import { TryOnButton } from 'senraa-rn-tryon';

function ProductScreen() {
  const [userImage, setUserImage] = useState('');
  const [garmentImage, setGarmentImage] = useState('');

  return (
    <View>
      {/* Use your image picker to set userImage and garmentImage (URLs or base64) */}
      <TryOnButton
        userImage={userImage}
        garmentImage={garmentImage}
        onResult={(url) => console.log('Result:', url)}
        onError={(err) => Alert.alert('Error', err)}
        onPaymentRequired={() => navigation.navigate('Subscribe')}
        label="Try On"
      />
    </View>
  );
}

Image sources

Images can be:

• Remote URLs (HTTPS)
• Base64 data URLs (data:image/jpeg;base64,...) — use with expo-image-picker or react-native-image-picker and convert the picked asset to base64

Example with expo-image-picker

import * as ImagePicker from 'expo-image-picker';

const pickImage = async (setImage: (uri: string) => void) => {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    base64: true,
  });
  if (!result.canceled && result.assets[0].base64) {
    setImage(`data:image/jpeg;base64,${result.assets[0].base64}`);
  }
};

API Reference

SenraaProvider

| Prop | Type | Required | Description | |--------|------------------|----------|------------------------------------| | config | SenraaRNConfig | Yes | API key and optional base URL | | children | ReactNode | Yes | App or subtree |

useSenraaTryOn()

Returns: { tryOn, reset, loading, error, resultUrl, paymentRequired }

• tryOn(userImage, garmentImage) — Run try-on, returns Promise<TryOnResult>
• reset() — Clear state
• loading — Request in progress
• error — Error message or null
• resultUrl — Result image URL or null
• paymentRequired — True when trial exhausted and subscription is needed

TryOnButton

| Prop | Type | Description | |-----------------|------------|-------------------------------------------| | userImage | string | User/photo image URL or base64 | | garmentImage | string | Garment/product image URL or base64 | | onResult | (url) => void | Called with result image URL | | onError | (err) => void | Called on error | | onPaymentRequired | () => void | Called when payment is required | | label | string | Button text (default: "Try On") | | disabled | boolean | Disable button | | style | ViewStyle | Button container style | | textStyle | TextStyle | Button text style |

Publishing (for maintainers)

cd senraa-rn-tryon
npm run build
npm publish --access public

Get your API key

1. Sign up at Senraa
2. Create an organization and subscribe to a plan
3. Copy your API key from the dashboard or billing page

Docs

• Senraa Documentation
• JavaScript SDK

License

MIT