npm package: @fetihonal/react-native-json-ui-sdk
Description: React Native SDK for rendering UI from JSON
Author: fetihonal
Latest version: 1.1.29

# React Native Onboarding SDK

A flexible and customizable onboarding flow SDK for React Native applications.

## Installation

```bash
npm install inspirex-onboarding-sdk
# or
yarn add inspirex-onboarding-sdk
```

## Usage

1. Import and initialize the SDK:

```typescript
import sdk from 'inspirex-onboarding-sdk';

// Initialize the SDK
sdk.initialize('your-api-key');

// Set user information
sdk.setUser({
  id: 'user-123',
  name: 'John Doe',
  email: 'john.doe@example.com',
  properties: { plan: 'premium' },
});
```

2. Start the flow and listen for events:

```typescript
// Start the flow
sdk.startFlow();

// Listen for events
sdk.on('flowStart', (data) => {
  console.log('Flow started:', data.flowId);
});

sdk.on('flowComplete', (data) => {
  console.log('Flow completed:', data.flowId);
});

sdk.on('screenChange', (data) => {
  console.log('Screen changed:', data.screenId);
});
```

3. Render the flow in your React Native app:

```typescript
import React from 'react';
import sdk from 'inspirex-onboarding-sdk';

const FlowComponent = sdk.getFlowComponent();

export const App = () => {
  return (
    <>
      {/* Your app content */}
      <FlowComponent />
    </>
  );
};
```

## Features

- Fully customizable UI components
- TypeScript support
- Event-based architecture
- Screen navigation
- Modal-based presentation
- Flexible styling options

## API Reference

### SDK Methods

- `initialize(apiKey: string)`: Initialize the SDK with your API key
- `setUser(user: User)`: Set the current user information
- `startFlow()`: Start the onboarding flow
- `completeFlow()`: Complete the current flow
- `getFlowComponent()`: Get the React component to render the flow

### Event Types

- `flowStart`: Emitted when the flow starts
- `flowComplete`: Emitted when the flow is completed
- `screenChange`: Emitted when the screen changes

## License

ISC

```
import { View, Text, StyleSheet, Button } from 'react-native';
import { useEffect, useState } from 'react';
import JsonUISdk from '@fetihonal/react-native-json-ui-sdk';

export default function TabOneScreen() {
  const [sdkReady, setSdkReady] = useState(false);

  useEffect(() => {
    initializeSDK();
    return () => {};
  }, []);

  const initializeSDK = async () => {
    try {
      const flowData = {
        theme: {
          primaryColor: '#2196F3',
          secondaryColor: '#1976D2',
          textColor: '#000000',
          backgroundColor: '#FFFFFF',
        },
        styles: {
          button: {
            primary: {
              margin: '10px',
              padding: '12px 24px',
              borderRadius: '4px',
              backgroundColor: '#2196F3',
              color: '#FFFFFF',
            },
            secondary: {
              margin: '10px',
              padding: '12px 24px',
              borderRadius: '4px',
              backgroundColor: '#1976D2',
              color: '#FFFFFF',
            },
          },
          text: {
            title: {
              fontSize: '24px',
              fontWeight: 'bold',
              margin: '10px 0',
            },
            subtitle: {
              fontSize: '16px',
              margin: '5px 0',
            },
          },
          screen: {
            main: {
              layout: {
                type: 'flex',
                direction: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                spacing: '15px',
              },
            },
            grid: {
              layout: {
                type: 'grid',
                columns: 2,
                gap: '10px',
              },
            },
          },
        },
        screens: [
          {
            id: 'main',
            layout: 'main', // reference key from styles.screen.main
            components: [
              {
                id: 'btn-1',
                type: 'button',
                variant: 'primary',
                text: 'Bu işler ince işler',
                action: {
                  type: 'button_clicked',
                  payload: {
                    source: 'btn-1',
                  },
                },
                // Will inherit default style from styles.button.primary
              },
              {
                id: 'title-1',
                type: 'text',
                variant: 'title',
                text: 'Hello from JSON UI SDK!',
                style: {
                  color: '#FF5722', // override the default if needed
                },
                // Will inherit default style from styles.text.title
              },
              {
                id: 'subtitle-1',
                type: 'text',
                variant: 'subtitle',
                text: 'This is a subtitle',
                // Will inherit default style from styles.text.subtitle
              },
              {
                id: 'btn-2',
                type: 'button',
                variant: 'primary',
                text: 'Click Me wowow',
                action: 'button_clicked',
                style: {
                  backgroundColor: '#FF5722', // override the default if needed
                  padding: '16px 32px', // override the default if needed
                },
              },
            ],
          },
          {
            id: 'test2',
            layout: 'grid', // reference key from styles.screen.grid
            components: [
              {
                id: 'btn-3',
                type: 'button',
                variant: 'primary',
                text: 'Bu işler ince işler',
                action: 'button_clicked',
              },
              {
                id: 'title-2',
                type: 'text',
                variant: 'title',
                text: 'Hello from JSON UI SDK!',
              },
              {
                id: 'subtitle-2',
                type: 'text',
                variant: 'subtitle',
                text: 'This is a subtitle',
              },
              {
                id: 'btn-4',
                type: 'button',
                variant: 'primary',
                text: 'Click Me wowow',
                action: 'button_clicked',
              },
              {
                id: 'btn-5',
                type: 'button',
                variant: 'secondary',
                text: 'Click Me wowow',
                action: 'button_clicked',
              },
            ],
          },
        ],
      };

      await JsonUISdk.init(flowData);
      // await JsonUISdk.start();
      setSdkReady(true);
    } catch (error) {
      console.error('Failed to initialize SDK:', error);
    }
  };

  return (
    <>
      <View style={styles.container}>
        <Text style={styles.status}>
          {sdkReady ? 'SDK is ready!' : 'Initializing SDK...'}
        </Text>

        {sdkReady && (
          <Button
            title="start SDK"
            onPress={() => {
              JsonUISdk.start();
              setSdkReady(false);
            }}
          />
        )}
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 20,
  },
  status: {
    fontSize: 16,
    color: '#000',
  },
});

```