Components

High-level component guidance for external client teams.

Start Simple

Most integrations should begin with VECUProvider and WalletHub. These two pieces are enough for the majority of host applications.

Recommended Starting Point

For most client integrations, the component model is:

mount VECUProvider near the top of your app
render WalletHub inside your wallet screen

High-level example:

import { VECUProvider, WalletHub } from '@vecu/wallet-react-native-sdk';

function App() {
  const authToken = tokenFromYourLoginFlow;

  return (
    <VECUProvider
      config={{
        authToken,
        deploymentStage: 'sandbox',
      }}
    >
      <WalletScreen />
    </VECUProvider>
  );
}

function WalletScreen() {
  return <WalletHub />;
}

Core Components

`VECUProvider`

VECUProvider initializes the SDK for your application.

You typically use it to:

pass the host app auth token into the SDK
choose the deployment environment
attach optional host-app callbacks such as token refresh or error handling

See Configuration for the supported public configuration options.

`WalletHub`

WalletHub is the main wallet experience for most applications.

It gives you a ready-made wallet surface that can include:

credentials
offers
wallet-level interactions inside a single screen

This is the recommended starting point for external clients because it provides the wallet experience with the least amount of host-app assembly work.

Other Public Components

The SDK also exports lower-level public components such as:

VECUWallet
OfferList
OfferListGrouped
flow-specific components for presentation, NFC, Bluetooth, and QR experiences

These are available when your application needs more control over how wallet features are arranged, but they are not the best starting point for most integrations.

Use Lower-Level Components Only When Needed

If you are new to the SDK, do not start by assembling many individual wallet components. Start with WalletHub, confirm your host app configuration and permissions are correct, and only then move to lower-level components if your app truly needs a more customized layout.

When To Use What

Use WalletHub when:

you want the shortest path to a working wallet screen
you want a high-level SDK-managed wallet experience
your app does not need a heavily customized wallet layout on day one

Look at lower-level public components when:

your app needs a more customized wallet layout
you want to isolate a specific capability, such as an offers list or a flow-specific screen
your team already understands the basic provider and wallet-screen setup

Reference Applications

The wallet application and demo application are useful examples of the basic pattern:

mount VECUProvider in the host app
render WalletHub inside a wallet screen
place that wallet screen inside the app's navigation flow

Treat those applications as conceptual references, not as line-by-line templates.

Related Guidance

Quick Start for the minimum integration path
Integration Approaches for how the wallet screen fits into your app
Configuration for provider setup and optional callbacks
Theming for branding customization

Vehicle Custody