Skip to Content
React Native SDKQuick Start

Quick Start

A screen that lists products and checks out, on both paths. Pick the tab that matches how much of the UI you want to own.

1. Wrap your app

import { VioProvider } from '@vio-live/react-native-sdk/react';
import AsyncStorage from '@react-native-async-storage/async-storage';
 
export default function App() {
  return (
    <VioProvider
      apiKey={process.env.EXPO_PUBLIC_VIO_API_KEY}
      environment="testing"
      currency="NOK"
      country="NO"
      storage={AsyncStorage}
    >
      <Shop />
    </VioProvider>
  );
}

2. Render products

import { VioProductCarousel } from '@vio-live/react-native-sdk/ui';
import { useProducts } from '@vio-live/react-native-sdk/react';
 
function Shop() {
  const { data: products, loading } = useProducts({ currency: 'NOK' });
 
  if (loading) return null;
  return <VioProductCarousel products={products} title="New in" />;
}

Tapping Add to cart already works — the card calls Vio.cart for you.

3. Check out

import { VioCheckout } from '@vio-live/react-native-sdk/ui';
import { useCart } from '@vio-live/react-native-sdk/react';
 
function Checkout({ onDone }) {
  const { cart } = useCart();
 
  return (
    <VioCheckout
      cartId={cart?.cart_id}
      onComplete={(checkout) => onDone(checkout)}
    />
  );
}

Four steps, validated, saved to the backend as the user leaves each one. It renders into whatever container you give it — a screen, a modal, a sheet — so your navigation stays yours.

Backend-driven placements

Once you declare the slots your layout exposes, an operator can bind products to them from the Vio dashboard and the app follows — no release.

// At module scope, next to your screens
Vio.placements.register({ id: 'home_top', displayName: 'Home — Top' });
<VioProductCarousel locationId="home_top" />

That carousel resolves whatever is bound to home_top, renders it, and updates itself when the operator changes it. See Core Concepts.

Next steps

Last updated on
InstallationConfiguration