npm package: @pratik.vekariya1/kyc-sdk
Description: A React Native SDK with TypeScript
Latest version: 1.0.5

# @pratik.vekariya1/react-native-sdk

React Native SDK that provides a ready-to-use, multi-screen flow powered by React Navigation and Redux, with a simple programmatic API and optional modal wrapper.

## Features

- Multiple screens with navigation and theming
- Typed API (TypeScript)
- Programmatic control via `MySDK`
- Callbacks for success/error/progress/cancel/screen-change
- Use inline (no modal) or with the built-in `SDKModal`

## Requirements

- React Native 0.70+
- iOS 11+ / Android API 21+

## Installation

```bash
npm install @pratik.vekariya1/react-native-sdk
# or
yarn add @pratik.vekariya1/react-native-sdk
```

### iOS

```bash
cd ios && pod install && cd ..
```

### Android

In `android/build.gradle` (project), ensure:

```gradle
ext {
  minSdkVersion = 21
  compileSdkVersion = 33
  targetSdkVersion = 33
}
```

If needed, in `android/app/build.gradle`:

```gradle
android {
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
}
```

## Getting Started

You can embed the SDK inline (no modal) or use the provided modal.

### Option A: Inline (no modal, recommended for full-screen flows)

Render the SDK’s navigator directly in your app. The SDK ships its own Redux `store` and navigator (`AppNavigator`).

```tsx
import React, { useEffect } from 'react';
import { Provider } from 'react-redux';
import { store, AppNavigator, MySDK, SDKCallbacks } from '@pratik.vekariya1/react-native-sdk';

const callbacks: SDKCallbacks = {
  onSuccess: (data) => console.log('Success', data),
  onError: (error) => console.log('Error', error),
  onCancel: () => console.log('Cancelled'),
  onProgress: (p) => console.log('Progress', p),
  onScreenChange: (name) => console.log('Screen', name),
};

export default function SDKRoot() {
  useEffect(() => {
    MySDK.getInstance().initialize({
      apiKey: 'your-api-key',
      environment: 'development', // or 'production'
      theme: {
        primaryColor: '#007AFF',
        backgroundColor: '#FFFFFF',
        textColor: '#000000',
        headerColor: '#007AFF',
      },
      navigation: {
        enableBackButton: true,
        showHeader: true,
        headerTitle: 'My SDK',
      },
      callbacks,
    });
  }, []);

  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
}
```

Notes:
- `AppNavigator` uses an independent `NavigationContainer`, so it can be nested inside your app’s navigator without conflicts.
- Mount/unmount `SDKRoot` based on your app’s routing/conditions.

### Option B: Modal (drop-in)

```tsx
import React, { useState } from 'react';
import { SDKModal, SDKCallbacks } from '@pratik.vekariya1/react-native-sdk';

export default function App() {
  const [visible, setVisible] = useState(false);

  const callbacks: SDKCallbacks = {
    onSuccess: (data) => console.log('Success', data),
    onError: (error) => console.log('Error', error),
    onCancel: () => setVisible(false),
    onProgress: (p) => console.log('Progress', p),
    onScreenChange: (name) => console.log('Screen', name),
  };

  return (
    <>
      {/* Your trigger UI */}
      <SDKModal
        visible={visible}
        onClose={() => setVisible(false)}
        options={{
          apiKey: 'your-api-key',
          environment: 'development',
          theme: { primaryColor: '#007AFF', backgroundColor: '#FFFFFF', textColor: '#000000', headerColor: '#007AFF' },
          navigation: { enableBackButton: true, showHeader: true, headerTitle: 'My SDK' },
          callbacks,
        }}
      />
    </>
  );
}
```

## Programmatic API (`MySDK`)

```ts
import { MySDK } from '@pratik.vekariya1/react-native-sdk';

const sdk = MySDK.getInstance();

await sdk.initialize({
  apiKey: 'your-api-key',
  environment: 'development',
  callbacks: {
    onSuccess: console.log,
    onError: console.log,
  },
});

const result = await sdk.performOperation({ anyInput: 123 });
if (result.success) {
  console.log('Result', result.data);
}

// State access
const isReady = sdk.isSDKInitialized();
const progress = sdk.getProgress();
const state = sdk.getState();
const navState = sdk.getNavigationState();
```

### Methods

- `initialize(options: SDKInitOptions): Promise<SDKResult>`
- `performOperation(data?: any): Promise<SDKResult>`
- `isSDKInitialized(): boolean`
- `getState(): SDKState`
- `getNavigationState()`
- `getProgress(): number`
- `isLoading(): boolean`
- `getOperationResult(): any`
- `updateCallbacks(partial: Partial<SDKCallbacks>): void`
- `reset(): void`

## Types

```ts
export interface SDKCallbacks {
  onSuccess: (data: any) => void;
  onError: (error: string) => void;
  onCancel?: () => void;
  onProgress?: (progress: number) => void;
  onScreenChange?: (screenName: string) => void;
}

export interface SDKConfig {
  apiKey: string;
  environment?: 'development' | 'production';
  theme?: {
    primaryColor?: string;
    backgroundColor?: string;
    textColor?: string;
    headerColor?: string;
    buttonColor?: string;
  };
  navigation?: {
    enableBackButton?: boolean;
    showHeader?: boolean;
    headerTitle?: string;
  };
}

export interface SDKInitOptions extends SDKConfig {
  callbacks: SDKCallbacks;
}

export interface SDKResult {
  success: boolean;
  data?: any;
  error?: string;
}
```

## Theming & Navigation

- Theme keys: `primaryColor`, `backgroundColor`, `textColor`, `headerColor`, `buttonColor`
- Navigation options: `enableBackButton`, `showHeader`, `headerTitle`

## Embedding inside your app’s navigator

Because the SDK’s `AppNavigator` uses an independent `NavigationContainer`, you can:

- Render `SDKRoot` on a dedicated screen in your app’s navigator, or
- Conditionally render it in any view. Unmount to “close” the SDK.

## Troubleshooting

- If you see nested navigator warnings: already handled (independent container).
- iOS build issues: run `cd ios && pod install`, clean Derived Data if needed.
- Android build issues: ensure `minSdkVersion >= 21`, clean with `./gradlew clean`.

## Exports

```ts
// Core
export { default as MySDK } from './sdk/MySDK';

// UI
export { SDKModal } from './components/SDKModal';
export { default as AppNavigator } from './navigation/AppNavigator';

// Redux (for Provider)
export { store } from './redux/store';
export type { RootState, AppDispatch } from './redux/store';

// Types
export * from './types';
```

## License

MIT