React Native Dynamic UI Examples (Android)

Real examples of how mobile apps update UI without releasing new Play Store builds.

---

🚀 Overview

This repo shows practical techniques to update UI, text, features, icons, and screens without publishing a new Android release.

It supports the blog:
👉 How Mobile Apps Update UI Without Play Store Releases
Dynamic UI Blog

---

🔧 Techniques Demonstrated

Each screen inside the app shows a different real-world technique.

Method	Description
Server-Driven UI (SDUI)	Render UI dynamically from JSON config
Firebase Remote Config	Control UI, text, and feature flags from the cloud
Dynamic App Icons	Switch Android app icons without Play Store updates
WebView Dynamic Content	Load and communicate with web content inside the app
Hybrid Native + Web	Mix native UI with real-time web-powered UI

---

📂 Project Structure

src/
  navigation/         # App navigation setup
  sdui/               # Server-Driven UI example
  remoteConfig/       # Firebase Remote Config example
  dynamicIcon/        # Dynamic Android app icon switching
  webview/            # WebView + Hybrid examples

---

🚀 Getting Started

1. Clone the repo

git clone https://github.com/azimmemon2002/react-native-dynamic-ui-examples.git
cd react-native-dynamic-ui-examples

2. Install dependencies

npm install

3. Start Metro

npm start

4. Run the Android app

npm run android

---

🔥 Firebase Remote Config Setup

If you want to test Remote Config:

1. Create a Firebase project
2. Add an Android app with your package name or use these com.dynamicuiexamples
3. Download google-services.json
4. Place it in:

android/app/google-services.json

5. Enable Remote Config in Firebase Console
6. Create parameters like:

Key	Example Value
banner_message	Hello from Firebase 👋
enable_new_checkout	true
primary_color	#FF5722

⚠️ Important Notes (Very Important for Testing)

• After creating or changing values in Firebase Console, you must click Publish changes.
• Restart the Android app after publishing changes.
• The app will only fetch new values when it restarts (or after fetch interval expires).

If you don’t publish or restart:

• The app will continue using cached or default values.

---

Note: This demo works with fallback values even if Firebase is not connected.

---

🧩 Dynamic App Icons (Android)

This example shows how to switch Android launcher icons without a Play Store update. It uses:

• activity-alias entries in AndroidManifest.xml
• A native Kotlin module (IconSwitcherModule.kt)

Included icons: Default, Winter, Summer

These can be triggered from the Dynamic Icon screen.

---

🌐 WebView + Hybrid UI

Includes:

• Loading dynamic remote web content
• Bi-directional communication between WebView and React Native
• JavaScript injection inside the WebView

---