Digia React Native SDK

Digia UI SDK is the React Native-based rendering engine for Digia Studio, a low-code mobile application platform. Built on the Server-Driven UI (SDUI) architecture, this SDK dynamically renders native React Native components based on configurations received from the server, enabling real-time UI updates without requiring app releases or store approvals.

🚀 Overview

What is Server-Driven UI?

Server-Driven UI (SDUI) is an architectural pattern where the server controls the presentation layer of your application by sending UI configurations that the client interprets and renders. This approach offers several key advantages:

• 🚀 Instant Updates - Deploy UI changes immediately without app store review cycles
• 🧪 A/B Testing - Run experiments and personalize experiences without client-side release cycles
• 🔧 Bug Fixes - Fix UI issues in production without releasing a new app version
• 📱 Cross-Platform Consistency - Ensure uniform experiences across Android, iOS, and Mobile Web from a single configuration

The Digia Ecosystem

Digia UI SDK is part of the Digia Studio ecosystem, where:

1. Digia Studio - A visual low-code tool where users drag and drop widgets to create mobile applications
2. Server Configurations - The studio generates structured configurations describing UI layout, data bindings, and business logic
3. Digia UI SDK - This React Native SDK interprets the server configurations to render fully functional native mobile apps across Android, iOS, and Mobile Web platforms

Key Features

• 🎨 Server-Driven UI - Render React Native components from server-side configurations
• 🔄 Instant Updates - Push UI and logic changes instantly without app store approvals
• 🔗 Expression Binding - Powerful data binding system for dynamic content
• 🎯 Pre-built Actions - Navigation, state management, API calls, and more
• 📱 Native Performance - Rendering handled directly by React Native components for optimal performance
• 🧩 Custom Components - Register your own components to extend functionality
• 🌐 Multi-Platform - Single codebase for Android, iOS, and Mobile Web

📦 Installation

Add Digia UI SDK to your project:

npm install digia-rn-sdk

Required Peer Dependencies

npm install react react-native @react-navigation/native axios react-native-inappbrowser-reborn

Run:

npm install

🏁 Getting Started

Note: Digia UI SDK requires configurations generated by Digia Studio. Please refer to the Digia Studio documentation to create your first project.

Initialization of DigiaUI SDK

DigiaUI SDK offers two initialization strategies to suit different application needs:

NetworkFirst Strategy

• Prioritizes fresh content - Always fetches the latest DSL configuration from the network first
• Fast performance - DSL is hosted on CDN with average load times under 100ms for large projects
• Recommended for production - Ensures users always see the most up-to-date UI
• Best for - Apps where having the latest content is critical
• Timeout fallback - Optionally set a timeout; if exceeded, falls back to cache or burned DSL config

CacheFirst Strategy

• Instant startup - Uses cached DSL configuration for immediate rendering
• Fallback to network - Fetches updates in the background for next session
• Offline capable - Works even without network connectivity
• Best for - Apps prioritizing fast startup times or offline functionality

Implementation Options

DigiaUI SDK offers two implementation options for different needs.

Option 1: Using DigiaUIApp

Use this approach when DigiaUI needs to be initialized before rendering the first frame.

import { DigiaUI, DigiaUIApp } from 'digia-rn-sdk';

void main() {
  const digiaUI = await DigiaUI.initialize({
    accessKey: 'YOUR_PROJECT_ACCESS_KEY',
    flavor: Flavors.release({
      initStrategy: { type: 'network-first', timeoutInMs: 2000 },
      appConfigPath: 'path/to/config.json',
      functionsPath: 'path/to/functions.json',
    }),
  });

  AppRegistry.registerComponent('MyApp', () => () => (
    <DigiaUIApp
      digiaUI={digiaUI}
    >
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={DUIFactory.getInstance().createInitialPage()}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </DigiaUIApp>
  ));
}

Option 2: Using DigiaUIAppBuilder

For advanced use cases where you need more granular control over the initialization process. You can choose whether or not to wait for DigiaUI to be ready. This is especially useful when your app starts with a few native React Native screens before transitioning to DigiaUI-powered screens.

import { DigiaUIAppBuilder } from 'digia-rn-sdk';

export default function App() {
  return (
    <DigiaUIAppBuilder
      options={{
        accessKey: 'YOUR_PROJECT_ACCESS_KEY', // Your project access key
        flavor: Flavors.release({
          initStrategy: { type: 'network-first', timeoutInMs: 2000 },
          appConfigPath: 'path/to/config.json',
          functionsPath: 'path/to/functions.json',
        }), // Use release or debug flavor
      }}
      builder={(status) => {
        // Make sure to access DUIFactory only when SDK is ready
        if (status.isReady) {
          return (
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen
                  name="Home"
                  component={DUIFactory.getInstance().createInitialPage()}
                />
              </Stack.Navigator>
            </NavigationContainer>
          );
        }

        // Show loading indicator while initializing
        if (status.isLoading) {
          return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
              <ActivityIndicator size="large" />
              <Text style={{ marginTop: 16 }}>Loading latest content...</Text>
              {status.hasCache && (
                <TouchableOpacity onPress={() => status.useCachedVersion()}>
                  <Text style={{ color: 'blue', marginTop: 8 }}>Use Offline Version</Text>
                </TouchableOpacity>
              )}
            </View>
          );
        }

        // Show error UI if initialization fails
        // In practice, this scenario should never occur, but it's a good habit to provide a user-friendly fallback just in case.
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 24 }}>⚠️</Text>
            <Text style={{ marginTop: 16 }}>Failed to load content</Text>
            <Text>Error: {status.error}</Text>
            {status.hasCache && (
              <TouchableOpacity onPress={() => status.useCachedVersion()}>
                <Text style={{ color: 'blue', marginTop: 8 }}>Use Cached Version</Text>
              </TouchableOpacity>
            )}
          </View>
        );
      }}
    />
  );
}

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

• 📚 Documentation
• 💬 Community
• 🐛 Issue Tracker
• 📧 Contact Support

Built with ❤️ by the Digia team