​
Dynamic UI (Minimal Customization)

Perfect for teams who want quick brand consistency without writing code or rebuilding apps. Dynamic UI enables real-time customization through configuration files and the social.plus Console.

No Code Required

Pure configuration-based customization

Real-time Updates

Changes apply instantly without app updates

Team Friendly

Non-technical team members can make changes

Brand Consistency

Maintain consistent styling across all platforms

​
When to Choose Dynamic UI

Dynamic UI is ideal when you need: ✅ Quick brand implementation - Get your colors and styling live fast
✅ Real-time updates - Change themes without app store releases
✅ Team collaboration - Let design teams update independently
✅ Consistent branding - Maintain uniform look across platforms
✅ A/B testing - Test different themes with live users ❌ Complex layouts - Use Component Styling or Fork & Extend instead
❌ Custom interactions - Requires code-level customization
❌ Unique components - Need component-level or source code access

​
How Dynamic UI Works

The Dynamic UI system allows you to override your app’s built-in theme configuration remotely:
1

Configure in Console

Make changes using the Dynamic UI editor in the social.plus Console
2

Preview Changes

See real-time updates in the device mockup
3

Publish Updates

Push changes live to all app users instantly
4

Automatic Sync

Apps sync changes automatically using syncNetworkConfig()
Edits remain in preview mode until you click Publish. Publishing immediately replaces the stored values on our servers.

​
Current Capabilities

Dynamic UI currently supports:

​
Implementation

​
Prerequisites

Dynamic UI requires proper setup and authentication to function. Ensure your app is configured with social.plus credentials.

​
Sync Network Configuration

To deliver the latest configuration to users, call syncNetworkConfig() in your application flow. This method:
  • Makes a lightweight request to the Dynamic UI endpoint
  • Downloads the current customization payload
  • Caches it locally on the device
  • Applies new values across all active UIKit screens
import AmityUIKit

// Sync dynamic configuration
AmityUIKitManager.syncNetworkConfig { [weak self] success, error in
    if success {
        print("Dynamic UI configuration synced successfully")
        // Configuration applied automatically
    } else {
        print("Failed to sync configuration: \(error?.localizedDescription ?? "Unknown error")")
    }
}

​
Best Practices

Sync Frequency

Call sync at app launch and when resuming from background

Error Handling

Always handle sync failures gracefully

User Experience

Sync during splash screens to avoid visual disruption

Testing

Test offline behavior and fallback scenarios
// App Launch
app.on('launch', () => {
    syncNetworkConfig();
});

// App Resume
app.on('resume', () => {
    syncNetworkConfig();
});

// Manual Refresh
refreshButton.on('click', () => {
    syncNetworkConfig();
});

​
Offline and Fallback Behavior

The Dynamic UI system handles various connectivity scenarios:
The fallback system ensures your app maintains a consistent appearance even when network conditions are poor.

​
Console Management

​
Accessing Dynamic UI

  1. Log into the social.plus Console
  2. Navigate to your application
  3. Select UIKit → Dynamic UI
  4. Use the device mockup to preview changes

​
Making Changes

1

Select Component

Choose the UI element you want to customize
2

Adjust Properties

Modify colors, spacing, or other available properties
3

Preview Changes

See updates in real-time on the device mockup
4

Test Themes

Switch between light and dark themes to test both
5

Publish

Click Publish to make changes live

​
Team Workflow

Design Team

Creates and previews customizations

Product Team

Reviews and approves changes

Engineering Team

Implements sync calls in the app

QA Team

Tests changes across different scenarios

​
Troubleshooting

​
Common Issues

​
Debug Mode

Enable debug logging to troubleshoot Dynamic UI issues: 
AmityUIKitManager.enableDebugMode(true)

​
Next Steps

Component Styling

Learn about specific component customizations

Advanced Customization

Explore advanced theming techniques