@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

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

iOS

cd ios && pod install && cd ..

Android

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

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

If needed, in android/app/build.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).

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)

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)

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

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

// 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