Getting Started

🧪 BETA VERSION - React Native SDK is currently in beta.

This guide will help you get started with Digia React Native SDK integration in your mobile application.

Prerequisites

Before you begin, ensure you have:

• Node.js 16.0 or later

• React Native 0.60 or later

• TypeScript 4.0 or later (recommended)

• A Digia Studio project with published configurations

Project Setup

1. Create a New React Native Project

npx react-native init MyDigiaApp
cd MyDigiaApp

2. Install Dependencies

Install the Digia React Native SDK and required peer dependencies:

npm install digia_sdk@beta

# Install peer dependencies
npm install react react-native @react-navigation/native axios react-native-inappbrowser-reborn

3. iOS Setup

For iOS development, install CocoaPods dependencies:

cd ios && pod install && cd ..

Quick Start with Template

For a faster setup, you can use our React Native template repository that comes pre-configured with Digia UI SDK:

Using the Template

npx react-native init MyDigiaApp --template https://github.com/Digia-Technology-Private-Limited/digia_ui_rn_playground
cd MyDigiaApp

# Install dependencies
npm install

This template includes:

• ✅ Pre-configured Digia UI SDK integration

• ✅ Sample Digia Studio project setup

• ✅ Ready-to-run example app

Manual Setup (Alternative)

If you prefer to set up manually, follow the steps below.

Step 1: Get Your Project Access Key

1. Log in to Digia Studio

2. Open your project

3. Go to Settings → App Settings

4. Copy your Access Key

Locate your Access Key in the App Settings section of your Digia Studio project.

Step 2: Initialize Digia UI SDK

Create a new file src/DigiaApp.tsx:

import React from 'react';
import { DigiaUIAppBuilder } from 'digia-rn-sdk';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function DigiaApp() {
  return (
    <DigiaUIAppBuilder
      options={{
        accessKey: 'YOUR_PROJECT_ACCESS_KEY', // Replace with your actual key
        flavor: Flavors.debug(), // or 'debug' for development
      }}
      builder={(status) => {
        if (status.isReady) {
          return (
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen
                  name="Home"
                  component={status.digiaUI.createInitialPage()}
                  options={{ headerShown: false }}
                />
              </Stack.Navigator>
            </NavigationContainer>
          );
        }

        if (status.isLoading) {
          return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
              <ActivityIndicator size="large" color="#007AFF" />
              <Text style={{ marginTop: 16, fontSize: 16 }}>
                Loading your app...
              </Text>
            </View>
          );
        }

        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 18, color: 'red' }}>
              Failed to load app
            </Text>
            <Text style={{ marginTop: 8 }}>
              {status.error}
            </Text>
          </View>
        );
      }}
    />
  );
}

Step 3: Update App.tsx

Modify your main App.tsx to use the Digia app:

import React from 'react';
import { StatusBar } from 'react-native';
import DigiaApp from './src/DigiaApp';

export default function App() {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <DigiaApp />
    </>
  );
}

Running Your App

iOS

npx react-native run-ios

Android

npx react-native run-android

Testing the Integration

1. Open the app on your device or simulator

2. Verify the loading screen appears

3. Check that your Digia Studio content loads

4. Test basic interactions (buttons, navigation, etc.)

Troubleshooting

Common Issues

SDK Not Initializing

• Check your access key is correct and active

• Verify internet connection for initial load

• Check console logs for detailed error messages

Components Not Rendering

• Ensure your Digia Studio project has published content

• Check flavor configuration matches your project setup

• Verify component configurations in Digia Studio

Navigation Issues

• Confirm React Navigation is properly configured

• Check stack navigator setup in your integration

• Verify page configurations in Digia Studio