# Demo Walkthrough

This walkthrough explains how the `mobile-sdk-demo` package implements the SDK integration patterns.

## Project Structure

```
packages/mobile-sdk-demo/
├── App.tsx                 # Main app with provider setup
├── src/
│   ├── providers/
│   │   └── SelfClientProvider.tsx  # SDK provider configuration
│   ├── screens/            # Screen wrappers
│   │   ├── CountrySelection.tsx
│   │   ├── IDSelection.tsx  
│   │   └── DocumentCamera.tsx
│   └── navigation/         # Navigation logic
```

## Provider Setup

The demo shows how to configure adapters for different environments:

```tsx
// src/providers/SelfClientProvider.tsx
const adapters: Adapters = {
  scanner: webNFCScannerShim, // Web environment
  network: {
    http: { fetch: createFetch() },
    ws: createWsAdapter()
  },
  documents: persistentDocumentsAdapter,
  crypto: { hash, sign: stubSign },
  auth: { getPrivateKey: getOrCreateSecret }
};
```

## Screen Wrapper Pattern

The demo wraps SDK screens in custom components:

```tsx
// src/screens/DocumentCamera.tsx
import { DocumentCameraScreen } from '@selfxyz/mobile-sdk-alpha/onboarding/document-camera-screen';

export default function DocumentCamera({ onBack, onSuccess }) {
  return <DocumentCameraScreen onBack={onBack} onSuccess={onSuccess} />;
}
```

## Event Listener Setup

```tsx
// src/providers/SelfClientProvider.tsx
const listeners = useMemo(() => {
  const { map, addListener } = createListenersMap();

  addListener(SdkEvents.DOCUMENT_COUNTRY_SELECTED, event => {
    navigation.navigate('IDSelection', {
      countryCode: event.countryCode,
      countryName: event.countryName,
      documentTypes: event.documentTypes,
    });
  });

  return map;
}, [navigation]);
```

## Key Patterns

### 1. Environment Adaptation

The demo handles both web and mobile environments by choosing appropriate adapters.

### 2. Custom Navigation

Uses React Navigation with custom screen wrappers that pass navigation props to SDK screens.

### 3. State Management

Manages document catalog and selected document state at the app level.

### 4. Error Handling

Basic error handling with console warnings and fallback states.

This demonstrates a practical, working integration you can reference for your own implementation.

## Related Documentation

* [Getting Started Guide](/self-pass/getting-started.md) - SDK overview and installation
* [SelfClient Provider Setup](/self-pass/getting-started/selfclient-provider.md) - Detailed adapter configuration
* [Minimal Setup](/self-pass/getting-started/examples/minimal-setup.md) - Basic integration example
* [Navigation Setup](/self-pass/getting-started/examples/navigation-setup.md) - Event-driven navigation patterns


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.self.xyz/self-pass/getting-started/examples/demo-walkthrough.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.