DEV Community: Farouq Seriki

🎥 Mastering Media Uploads in React Native — Images, Videos & Smart Compression (2026 Guide)

Farouq Seriki — Wed, 12 Nov 2025 12:55:38 +0000

If you’ve ever built a media-heavy app, you know the struggle.

A user snaps a gorgeous 4K video or a 12MP selfie and — boom — your upload queue explodes, your backend times out, and someone tweets,

“Your app just crashed 😭”

Between different camera APIs, resolutions, and codecs, file sizes can jump from a few KB to hundreds of MB.

And simply compressing once often isn’t enough.

💡 The smarter fix:

Set strict upload limits (e.g., ≤ 2 MB for images, ≤ 20 MB for video) and iteratively compress each file until it fits the cap — all on-device.

Add good UX (progress bars, cancel buttons, smart defaults) and you’ll deliver silky-smooth uploads even on slow connections.

🧭 Table of Contents

Why Compression Matters
Quick Reference: Library Compatibility
React Native CLI Setup (Images & Video)
Expo Setup
Full Image Compression & Upload Example
Full Video Compression & Upload Example
Iterative Compression Pattern
Permissions & Troubleshooting
Production Tips
Final Thoughts

🎯 Why Compression Matters

Slow uploads & timeouts: mobile networks drop large requests.
Data cost: users burn bandwidth fast.
Server load: big files inflate storage and CDN bills.
UX: decoding large media tanks memory and drains battery.

Goal: compress client-side until it fits the backend’s file-size threshold.

⚡ Quick Reference: Library Compatibility

Library	Min React Native Version	Notes
react-native-video v6	≥ 0.68.2 (RN 0.73 uses iOS 13+)	iOS ≥ 13.0 required from 6.0.0-beta.8
react-native-fs	≥ 0.61 → use `@2.16.0+`	Native file access & utilities
react-native-image-picker	Works ≥ 0.60	Handles photos & videos
react-native-compressor	Works ≥ 0.65	Local media compression

⚙️ React Native CLI Setup (Images & Video)

We’ll use:

Package	Purpose	Docs
`react-native-image-picker`	Pick or capture photos & videos
`react-native-compressor`	Compress images/videos efficiently
`react-native-fs`	File size utilities & uploads
`react-native-video`	Full-control video player

🧩 Installation

npx @react-native-community/cli@latest init MediaUploadRN
cd MediaUploadRN

npm install react-native-image-picker react-native-compressor react-native-fs react-native-video
cd ios && pod install && cd ..

⚠️ `react-native-fs` Version Compatibility

React Native Version	Install This Version
< 0.57 / Gradle < 3	`react-native-fs@2.11.17`
≥ 0.57 / Gradle ≥ 3	`react-native-fs@2.13.2+`
≥ 0.61 ✅	`react-native-fs@2.16.0+`

npm install react-native-fs@2.16.0
# RN < 0.60 only:
npx react-native link react-native-fs

CocoaPods (iOS):

pod 'RNFS', :path => '../node_modules/react-native-fs'
pod install

🎬 React Native Video (v6.0.0+) Setup

⚠️ V6.0.0 Information

Version 6 introduces modern architecture & performance improvements.

Requires React Native ≥ 0.68.2

From 6.0.0-beta.8 → requires iOS ≥ 13.0 (default in RN 0.73).

For older RN projects, stick with react-native-video@5.2.x.

📦 Installation

npm install react-native-video
# or
yarn add react-native-video

📱 iOS Setup

cd ios && pod install && cd ..

Minimum: iOS 13 | RN 0.68.2+

Enable Custom Features (Podfile)

Video Caching:

$RNVideoUseVideoCaching=true

Google IMA (ads):

$RNVideoUseGoogleIMA=true

If caching is enabled, also add to Gemfile:

gem "cocoapods-swift-modular-headers"

and run:

bundle install
bundle exec pod install

🤖 Android Setup

Your project must use Kotlin ≥ 1.8 and compileSdk 34:

buildscript {
    ext.kotlinVersion = '1.8.0'
    ext.compileSdkVersion = 34
    ext.targetSdkVersion = 34
}

Optional ExoPlayer flags (android/build.gradle):

buildscript {
  ext {
    useExoplayerHls = true
    useExoplayerDash = true
    useExoplayerSmoothStreaming = true
    useExoplayerIMA = false // enable if ads needed
    useExoplayerRtsp = false
  }
}

✅ Default enabled: SmoothStreaming, Dash, HLS
⚠️ Each feature adds size — enable only what you need.

📱 Android Permissions

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<!-- For older SDKs -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

🍎 iOS Permissions

<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your library to select media.</string>
<key>NSCameraUsageDescription</key>
<string>We need access to your camera to capture media.</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone for video audio.</string>

🖼 React Native Cli Image Compression & Upload Example

import React, { useState } from "react";
import {
  View,
  Button,
  Image,
  Alert,
  ScrollView,
  StyleSheet,
} from "react-native";
import * as ImagePicker from "react-native-image-picker";
import { Image as ImageCompressor } from "react-native-compressor";
import RNFS from "react-native-fs";

const IMAGE_MAX_BYTES = 2 * 1024 * 1024; // 2 MB
const UPLOAD_URL = "https://your.api/uploads";

async function getFileSize(uri: string) {
  const stat = await RNFS.stat(uri.replace("file://", ""));
  return Number(stat.size || 0);
}

async function compressImageUntilUnder(uri: string, maxBytes: number) {
  let quality = 0.8;
  let currentUri = uri;
  for (let i = 0; i < 5; i++) {
    const compressed = await ImageCompressor.compress(currentUri, {
      compressionMethod: "auto",
      quality,
    });
    const size = await getFileSize(compressed);
    if (size <= maxBytes) return compressed;
    quality = Math.max(0.3, quality - 0.15);
    currentUri = compressed;
  }
  return currentUri;
}

async function uploadFile(uri: string) {
  const form = new FormData();
  form.append("image", {
    // @ts-ignore
    uri,
    name: "upload.jpg",
    type: "image/jpeg",
  });
  await fetch(UPLOAD_URL, { method: "POST", body: form });
}

export default function ImageUploader() {
  const [uri, setUri] = useState<string | null>(null);
  const [compressedUri, setCompressedUri] = useState<string | null>(null);

  const pickImage = async () => {
    const res = await ImagePicker.launchImageLibrary({ mediaType: "photo" });
    if (res.didCancel || !res.assets) return;
    setUri(res.assets[0].uri ?? null);
  };

  const handleUpload = async () => {
    if (!uri) return Alert.alert("Pick an image first");
    const compressed = await compressImageUntilUnder(uri, IMAGE_MAX_BYTES);
    setCompressedUri(compressed);
    await uploadFile(compressed);
    Alert.alert("Upload complete!");
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Button title="Pick Image" onPress={pickImage} />
      {uri && <Image source={{ uri }} style={styles.img} />}
      <Button title="Compress & Upload" onPress={handleUpload} />
      {compressedUri && (
        <Image source={{ uri: compressedUri }} style={styles.img} />
      )}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, gap: 16 },
  img: { height: 250, resizeMode: "contain", backgroundColor: "#eee" },
});

🎥 React Native Cli Video Compression & Upload Example

import React, { useState } from "react";
import { View, Button, Text, Alert, StyleSheet } from "react-native";
import * as ImagePicker from "react-native-image-picker";
import { Video as VideoCompressor } from "react-native-compressor";
import RNFS from "react-native-fs";
import Video from "react-native-video";

const VIDEO_MAX_BYTES = 20 * 1024 * 1024; // 20 MB
const UPLOAD_URL = "https://your.api/uploads";

async function getFileSize(uri: string) {
  const stat = await RNFS.stat(uri.replace("file://", ""));
  return Number(stat.size || 0);
}

async function compressVideoUntilUnder(
  uri: string,
  maxBytes: number,
  onProgress?: (p: number) => void
) {
  const presets: Array<"auto" | "medium" | "low"> = ["auto", "medium", "low"];
  let currentUri = uri;
  for (const preset of presets) {
    const compressed = await VideoCompressor.compress(
      currentUri,
      { compressionMethod: preset },
      (p) => onProgress?.(Math.round(p * 100))
    );
    const size = await getFileSize(compressed);
    if (size <= maxBytes) return compressed;
    currentUri = compressed;
  }
  return currentUri;
}

async function uploadVideo(uri: string) {
  const form = new FormData();
  form.append("video", {
    // @ts-ignore
    uri,
    name: "video.mp4",
    type: "video/mp4",
  });
  await fetch(UPLOAD_URL, { method: "POST", body: form });
}

export default function VideoUploader() {
  const [uri, setUri] = useState<string | null>(null);
  const [compressedUri, setCompressedUri] = useState<string | null>(null);
  const [progress, setProgress] = useState<number | null>(null);

  const pickVideo = async () => {
    const res = await ImagePicker.launchImageLibrary({ mediaType: "video" });
    if (res.didCancel || !res.assets) return;
    setUri(res.assets[0].uri ?? null);
  };

  const handleUpload = async () => {
    if (!uri) return Alert.alert("Pick a video first");
    const compressed = await compressVideoUntilUnder(
      uri,
      VIDEO_MAX_BYTES,
      setProgress
    );
    setCompressedUri(compressed);
    await uploadVideo(compressed);
    Alert.alert("Upload complete!");
    setProgress(null);
  };

  return (
    <View style={styles.container}>
      <Button title="Pick Video" onPress={pickVideo} />
      {progress != null && <Text>Compressing: {progress}%</Text>}
      <Button
        title="Compress & Upload"
        onPress={handleUpload}
        disabled={progress != null}
      />
      {compressedUri && (
        <Video
          source={{ uri: compressedUri }}
          style={styles.video}
          controls
          paused
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, gap: 16 },
  video: { height: 220, backgroundColor: "#000" },
});

⚙️ Expo Setup — Capture, Compress & Upload Media

Expo makes working with media surprisingly straightforward — whether you’re handling simple image uploads or full video workflows.
You can choose between two reliable approaches depending on your project type:

🖼 Image Compression Only (Pure Expo) — works entirely inside the Managed Workflow using expo-image-manipulator.
🎥 Video Compression (Dev Build Mode) — unlocks native-level compression and playback with react-native-compressor, react-native-fs, and react-native-video.

Both methods deliver efficient, on-device compression — no backend preprocessing required.

🖼 Image Compression Only — Expo Image Manipulator

If you’re building with Pure Expo (Managed Workflow), you can compress and resize images directly on the device using expo-image-manipulator.
This library is fast, stable, and ideal for reducing image size before uploads — perfect for profile photos, product images, or gallery uploads.

⚙️ Installation

npx expo install expo-image-manipulator expo-file-system expo-image-picker

💻 Example — Dynamic Image Compression & Resizing

The example below dynamically compresses any selected image to stay under a custom file-size limit (e.g., 2 MB, 5 MB, 10 MB).
It progressively reduces quality and resolution until the image meets the target threshold — all on-device.

import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Button,
  ActivityIndicator,
  Image,
  Alert,
} from "react-native";
import * as ImagePicker from "expo-image-picker";
import * as FileSystem from "expo-file-system";
import { useImageManipulator, SaveFormat } from "expo-image-manipulator";

const DEFAULT_COMPRESSION_QUALITY = 0.8;
const MIN_QUALITY = 0.3;
const DOWNSCALE_FACTOR = 0.85;

// ---------- File Size Utilities ----------
const getFileSize = async (uri: string): Promise<number> => {
  const info = await FileSystem.getInfoAsync(uri);
  return info.size || 0;
};

const formatFileSize = (bytes: number) =>
  `${(bytes / 1024 / 1024).toFixed(2)} MB`;

// ---------- Dynamic Compression Logic ----------
const compressImageUntilUnder = async (
  uri: string,
  manipulator: ReturnType<typeof useImageManipulator>,
  maxSizeMB: number
): Promise<string> => {
  try {
    const MAX_FILE_SIZE = maxSizeMB * 1024 * 1024;
    let quality = DEFAULT_COMPRESSION_QUALITY;
    let currentUri = uri;
    let currentSize = await getFileSize(uri);
    let width: number | undefined;
    let height: number | undefined;

    console.log(
      `📸 Starting compression: ${formatFileSize(
        currentSize
      )} (limit ${maxSizeMB} MB)`
    );

    while (currentSize > MAX_FILE_SIZE && quality > MIN_QUALITY) {
      if (width || height) manipulator.resize({ width, height });
      const rendered = await manipulator.renderAsync();
      const compressed = await rendered.saveAsync({
        compress: quality,
        format: SaveFormat.JPEG,
      });

      const newSize = await getFileSize(compressed.uri);
      console.log(`→ ${formatFileSize(newSize)} @ quality ${quality}`);

      if (newSize > MAX_FILE_SIZE) {
        quality *= 0.8;
        width = (rendered.width || 0) * DOWNSCALE_FACTOR;
        height = (rendered.height || 0) * DOWNSCALE_FACTOR;
        currentUri = compressed.uri;
        currentSize = newSize;
      } else {
        console.log(`✅ Final size under ${maxSizeMB} MB`);
        return compressed.uri;
      }
    }

    console.warn(
      `⚠️ Could not compress below ${maxSizeMB} MB — returning best result.`
    );
    return currentUri;
  } catch (err) {
    console.error("Compression error:", err);
    return uri;
  }
};

// ---------- Compression Overlay ----------
const ImageCompressor = ({
  uri,
  onComplete,
  maxSizeMB,
}: {
  uri: string;
  onComplete: (resultUri: string) => void;
  maxSizeMB: number;
}) => {
  const manipulator = useImageManipulator(uri);
  const [isCompressing, setIsCompressing] = useState(false);

  useEffect(() => {
    const compress = async () => {
      setIsCompressing(true);
      try {
        const originalSize = await getFileSize(uri);
        console.log("Original size:", formatFileSize(originalSize));

        const rendered = await manipulator.renderAsync();
        const temp = await rendered.saveAsync({
          compress: DEFAULT_COMPRESSION_QUALITY,
          format: SaveFormat.JPEG,
        });

        const firstPassSize = await getFileSize(temp.uri);
        let finalUri = temp.uri;

        if (firstPassSize > maxSizeMB * 1024 * 1024) {
          finalUri = await compressImageUntilUnder(
            temp.uri,
            manipulator,
            maxSizeMB
          );
        }

        const finalSize = await getFileSize(finalUri);
        console.log("✅ Final compressed size:", formatFileSize(finalSize));

        onComplete(finalUri);
      } catch (e) {
        console.error(e);
        onComplete(uri);
      } finally {
        setIsCompressing(false);
      }
    };
    compress();
  }, [uri]);

  if (!isCompressing) return null;

  return (
    <View style={styles.overlay}>
      <ActivityIndicator size="large" color="#0F6B2D" />
      <Text style={styles.overlayText}>Compressing image...</Text>
    </View>
  );
};

// ---------- Main Component ----------
export default function ExpoImageCompressor() {
  const [imageUri, setImageUri] = useState<string | null>(null);
  const [finalUri, setFinalUri] = useState<string | null>(null);
  const [maxSizeMB, setMaxSizeMB] = useState<number>(2); // dynamic user limit

  const pickImage = async () => {
    const res = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    });
    if (!res.canceled) {
      setImageUri(res.assets[0].uri);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Pick Image" onPress={pickImage} />
      {imageUri && <Image source={{ uri: imageUri }} style={styles.img} />}
      <Text style={styles.label}>Max Size: {maxSizeMB} MB</Text>

      {imageUri && (
        <ImageCompressor
          uri={imageUri}
          maxSizeMB={maxSizeMB}
          onComplete={(uri) => {
            setFinalUri(uri);
            Alert.alert("✅ Compression complete!");
          }}
        />
      )}

      {finalUri && <Image source={{ uri: finalUri }} style={styles.img} />}
    </View>
  );
}

// ---------- Styles ----------
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  img: { width: "90%", height: 250, marginTop: 20, borderRadius: 12 },
  label: { marginTop: 16, fontSize: 16, color: "#333" },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "rgba(0,0,0,0.7)",
    justifyContent: "center",
    alignItems: "center",
  },
  overlayText: { color: "white", marginTop: 12 },
});

🧠 Why It Works

Dynamic Limit: Easily change the size cap (maxSizeMB) for different use cases (e.g., 2 MB for avatars, 10 MB for photos).
Iterative Compression: Reduces both quality and resolution in steps until under the defined limit.
Expo-Only: Runs fully in JavaScript — no native linking or prebuild required.
Real-World Safe: Handles large images gracefully and provides user feedback with an activity overlay.
Reusable: Drop into any project — just pass a maxSizeMB value and a completion callback.

🎥 Video Compression — Dev Build Mode

If your app needs to handle video uploads or large media files, switch to an Expo Dev Build.
This mode enables access to native libraries for true on-device compression, caching, and playback.

⚙️ Installation

npm install react-native-compressor react-native-fs react-native-video
npx expo prebuild
npx expo run:android
# or
npx expo run:ios

Once complete, your project will have native access to efficient compression and smooth video rendering.

💻 Example — Dynamic Video Compression Helper

import { Video as VideoCompressor } from "react-native-compressor";
import RNFS from "react-native-fs";

/**
 * Compresses a video dynamically until it fits under the given size (in MB).
 * Supports both Expo Dev Build and React Native CLI setups.
 */
export async function compressVideoUntilUnder(
  uri: string,
  maxSizeMB: number,
  onProgress?: (p: number) => void
): Promise<string> {
  try {
    const maxBytes = maxSizeMB * 1024 * 1024;
    const presets: Array<"auto" | "medium" | "low"> = ["auto", "medium", "low"];
    let currentUri = uri;

    const getFileSize = async (fileUri: string): Promise<number> => {
      const stat = await RNFS.stat(fileUri.replace("file://", ""));
      return Number(stat.size || 0);
    };

    let currentSize = await getFileSize(currentUri);
    console.log(
      `🎬 Original size: ${(currentSize / 1024 / 1024).toFixed(2)} MB`
    );

    for (const preset of presets) {
      console.log(`⚙️ Trying preset: ${preset}`);
      const compressed = await VideoCompressor.compress(
        currentUri,
        { compressionMethod: preset },
        (progress) => onProgress?.(Math.round(progress * 100))
      );

      const newSize = await getFileSize(compressed);
      console.log(`→ ${formatSize(newSize)} after ${preset}`);

      if (newSize <= maxBytes) {
        console.log(`✅ Final size under ${maxSizeMB} MB`);
        return compressed;
      }

      currentUri = compressed;
      currentSize = newSize;
    }

    console.warn(
      `⚠️ Could not compress below ${maxSizeMB} MB — returning best result.`
    );
    return currentUri;
  } catch (err) {
    console.error("❌ Compression failed:", err);
    return uri;
  }
}

const formatSize = (bytes: number) => `${(bytes / 1024 / 1024).toFixed(2)} MB`;

✅ What You Unlock

Library	Purpose
react-native-compressor	Efficient on-device video and image compression
react-native-fs	File-size inspection, local reads/writes, and uploads
react-native-video	Smooth playback, caching, and adaptive streaming

📘 Note: Expo Dev Builds fully support config plugins, allowing features like caching and streaming exactly like a bare React Native project.

🧩 Summary

🖼 Pure Expo (Managed Workflow): Use expo-image-manipulator for image compression — 100% JavaScript, no native build needed.
🎥 Dev Build Mode (Native): Use react-native-compressor and react-native-video for professional-grade video compression and playback.

Both approaches help you deliver faster uploads, smaller files, and better mobile UX — all while staying true to Expo’s developer-friendly workflow.

🔁 Iterative Compression Pattern

while (size(uri) > limit && attempts < MAX_ATTEMPTS) {
  uri = compress(uri, nextParams());
}

Ensures consistent output sizes across devices.

🧰 Permissions & Troubleshooting

Android 13+: READ_MEDIA_IMAGES, READ_MEDIA_VIDEO
Older Android: READ_EXTERNAL_STORAGE
iOS: NSCameraUsageDescription, NSPhotoLibraryUsageDescription, NSMicrophoneUsageDescription
Always check file size after compression — Android content:// URIs can differ.
Test on real devices; emulators lack cameras and true codecs.

🏗 Production Tips

Enforce size limits in the backend too.
Resize before compressing (e.g., 1920 px width cap).
Adjust compression by connection type (Wi-Fi vs cellular).
Generate thumbnails for video feeds.
Keep compression async — never block the UI.

✅ Final Thoughts

Compression isn’t just a backend optimization — it’s a user-experience feature.
By iteratively compressing files, tracking progress, and configuring each library correctly (especially React Native Video v6 and react-native-fs), you’ll keep uploads fast, consistent, and reliable across every device.

💬 If this guide helped, drop a ❤️ or share your own setup for React Native media uploads.

React Native Dynamic App Icons

Farouq Seriki — Mon, 23 Sep 2024 07:14:33 +0000

This article demonstrates a practical implementation of dynamic app icon changing in React Native, utilising the react-native-change-icon library. It serves as a guide and example for developers looking to incorporate icon-switching functionality into their iOS and Android applications.

Github Repository

Article Highlights

Practical Implementation: Shows how to integrate and use the react-native-change-icon library in a real-world scenario.
Cross-Platform Demo: Includes examples for both iOS and Android platforms.
Step-by-Step Guide: Provides a clear walkthrough of the implementation process.

Benefits of Dynamic App Icons

Enhanced User Experience: Allows for a customisable and fresh app appearance.
Increased Engagement: Can be used to highlight new features, events, or campaigns.
Seasonal Adaptability: Demonstrates how to update the app's look for holidays or special occasions.
Marketing Tool: Shows potential for A/B testing different icon designs.

Installation

Install react-native-change-icon into your react native project using
yarn add react-native-change-icon or npm i react-native-change-icon
Generate your AppIcons using AppIconGenerator

Sample Icons are in the ./images folder import into the app icon generator and generate app icons for iPhone and Android( you can create for all operating systems)

`Android`

Open generated zip folder, navigate to android folder and rename all icons to desired name

`ios`

Open the generated zip folder, navigate to ios folder and rename the AppIcon.appiconset to desired icon name

Edit Contents.json and change the Assets.xcassets/AppIcon.appiconset to new Icon name e.g. Images.xcassets/HarpIcons.appiconset

REPEAT ABOVE STEPS FOR ALL OTHER ICONS

Android: Drag all of the mipmap folders into android/app/src/main/res/

ios : Drag all of the .appiconset folders into ios//Images.xcassets

Environment Setup

`Android`

Add an alias for each of your new icons within the AndroidManifest.xml (within ).

  - Make sure these have the properties as shown below.
  - Create an alias for .MainActivityDefault as well but for this, set android:enabled="true".
  - For the name prefix it .MainActivity... followed by the name you will use to reference your icon. e.g. for our HarpIcons icon we will use .MainActivityHarpIcons

`ios`

At the bottom of your Info.plist insert a key for CFBundleIcons.
Within this dictionary add another key for CFBundleAlternateIcons
In XCode, in your app's General settings, under App Icons and Launch Screen, set "App Icon" to Default and check the "Include all app icon assets" checkbox below.
Finally then within this dictionary you can add in the keys for you new icons

  - The key is the name you will reference from within code.
  - Set the first array item to the name of the .appiconset we created earlier.

Usage

To use the changeIcon functionality, simply import it along with any other required methods from the library:



import { changeIcon, getIcon, resetIcon } from 'react-native-change-icon';

// Pass the name of icon to be enabled
changeIcon('HarpIcons');

That's it! You can now seamlessly change icons based on your implementation logic.

Troubleshooting and Common Issues

When implementing react-native-change-icon, especially in an Expo-managed project, you might encounter some challenges. Here are solutions to common problems:

Accessing Native iOS and Android Files in Expo

Problem: Expo-managed projects don't have direct access to native iOS and Android files by default.
Solution: Use the prebuild command to generate native projects:



expo prebuild

This command creates ios and android folders in your project, allowing you to modify native files as needed for icon changing functionality.
Note: After running prebuild, your project becomes an Expo "bare" workflow project. Be sure to commit these changes to version control.

Testing Production Builds on iOS

Problem: Testing icon changing in a production environment on iOS requires a release build.
Solution: Use the following command to create and run a release build on an iOS device:



npx expo run:ios --configuration Release --device

This command:
Builds your app in release configuration
Installs it on a connected iOS device
Allows you to test icon changing functionality in a production-like environment

Testing Production Builds on Android

Problem: Testing icon changing in a production environment on Android requires a release APK.
Solution: Follow these steps to create and test a release APK

Navigate to the android directory in your project:



cd android

Run the Gradle task to assemble the release APK:



./gradlew assembleRelease

The APK will be generated in android/app/build/outputs/apk/release/app-release.apk Install the APK on your Android device or emulator to test the icon changing functionality in a production environment.

Server Defined Rendering for React Native Using Rise

Farouq Seriki — Wed, 11 Sep 2024 09:34:51 +0000

Server Repository : https://github.com/FastheDeveloper/react-native-rise-sdui-server
Mobile Repository : https://github.com/FastheDeveloper/react-native-rise-sdui-mobile

🚀 Introduction

This article contains the implementation for Server-Driven UI (SDUI) development using Rise Tools. It's designed to seamlessly update React Native applications, providing dynamic UI components that can be updated in production without rebuilding or redeploying your app.

🎯 What You'll Learn

Core principles of Server Defined Rendering for React Native
Server Defined Rendering VS OTA updates Vs Update Prompts
Rise Tools Architecture
Creating Server side
Creating Client side app
Building mobile app for installation
Deploying backend server and using it to update the mobile app

🛠 Prerequisites

Before diving in, make sure you have:

A basic understanding of JavaScript, Typescript and React Native
Node.js and npm installed on your development machine
Make sure you have completed the React Native - Environment Setup instructions
A basic knowlwdge of Tamagui

📚 Tutorial Sections

Introduction to Server-Driven Development
- Definition and core concepts of Server-Driven UI (SDUI)
- Benefits and use cases for SDUI
- Real-world examples of apps utilizing SDUI and their success stories
Setting Up Rise Server
- Project setup & folder structure
- Server configuration and initialization
- Creating Base HomeScreen Model
Setting Up Your Expo Project
- Cloning existing expo template
- Creating a new Expo project
- Essential configurations and dependencies
- Integrating the HomeScreen model from the server
Updating React Native Application with Server update
Deploying the Server to Production
Dynamic React Native App Updates from Server
Building and Testing the Mobile App for Production

Introduction to Server-Driven Development

Definition and core concepts of Server-Driven UI (SDUI):
SDUI is an architectural pattern where the server defines and controls the user interface of a client application. Instead of hardcoding UI elements in the client, the server sends a UI specification (often in JSON format) that the client interprets and renders. This approach allows for dynamic UI updates without requiring app updates.

Key concepts include:

UI specification: A structured description of the interface layout and components
Client-side renderer: A component that interprets the specification and creates native UI elements
Dynamic updates: The ability to change the UI by modifying the server-side specification

Benefits and use cases for SDUI:

Flexibility: Easily update UI without app store releases
Consistency: Maintain a uniform experience across platforms
A/B testing: Quickly test different layouts or features
Personalization: Tailor UI based on user segments or behaviors
Rapid iteration: Implement UI changes faster
Feature flags: Enable or disable features remotely
Reduced app size: Some UI logic moves to the server

Why Server Defined Rendering is Superior to Over-The-Air updates and Update Prompts

Instant Updates: Unlike OTA updates or update prompts, SDR ensures all users are always on the latest version, eliminating fragmentation and version compatibility issues.
Improved User Experience: SDR removes the need for intrusive update prompts or download waiting times, providing a seamless experience.
Enhanced Security and Control: With logic on the server, SDR offers better protection against reverse engineering and unauthorized modifications.
Flexibility and Agility: SDR allows for rapid iterations and A/B testing without the need for app store approvals or user actions.
Reduced Client-Side Complexity: By moving logic to the server, SDR simplifies client-side code, potentially improving app performance and reducing bugs.
Data-Driven Improvements: With all users on the same version, it's easier to gather consistent analytics and make data-driven decisions.

Setting Up Rise Server

We will work with this UI focusing on creating a server-side UI and implementing it in a React Native application. Follow the tutorial sections to build your SDUI-powered app step by step.

Setting Up Rise Server

To create a new Rise server project, follow these steps:

Open your terminal.
Run the following command: npm create rise@latest

This is the resulting folder structure



my-rise-project/
├── node_modules
├── src/
│ ├── models.tsx
│ ├── server.ts
├── package.json
├── tsconfig.json
└── README.md

Setting up Server for Home screen

Create a HomeScreen.tsx file in your preferred directory, and let's get started.



import {
    H1,
    H3,
    H6,
    Text,
    XStack,
    YStack,
} from "@rise-tools/kitchen-sink/server";

export const models = {
    HeaderUI,
    SearchUI,
    NearbyUi: NearbyUi,
    BannerUi,
    ProductUi,
    HomeScreen,
};

function HeaderUI() {
    return (
        <YStack>
            <Text>Header Ui</Text>
        </YStack>
    );
}

function SearchUI() {
    return (
        <YStack>
            <H1>Search Ui</H1>
        </YStack>
    );
}

function NearbyUi() {
    return (
        <YStack>
            <H3>Nearby resturants</H3>

            <XStack gap="$12">
                <H6>Nearest resturants</H6>
            </XStack>
        </YStack>
    );
}

function BannerUi() {
    return (
        <YStack>
            <H1>Banner</H1>
        </YStack>
    );
}

function ProductUi() {
    return (
        <YStack>
            <Text>Our Top Product</Text>
            <XStack gap="$8">
                <Text>🌚</Text>
                <Text>🌚</Text>
                <Text>🌚</Text>
                <Text>🌚</Text>
                <Text>🌚</Text>
            </XStack>
        </YStack>
    );
}

function TripUi() {
    return (
        <YStack gap="$8">
            <Text>Your Trips</Text>
            <Text>🌚</Text>
            <Text>🌚</Text>
            <Text>🌚</Text>
            <Text>🌚</Text>
            <Text>🌚</Text>
        </YStack>
    );
}

function HomeScreen() {
    return (
        <YStack>
            <HeaderUI />
            <SearchUI />
            <NearbyUi />
            <BannerUi />
            <ProductUi />
            <TripUi />
        </YStack>
    );
}

Models Object:

An object named models is exported, containing references to various UI components. This object is used for dynamic rendering and to organize components for easier access.

This component breaks down the HomeScreen into several distinct components: HeaderUi, SearchUi, NearbyUi, BannerUi, ProductUi, and TripUi. These components can be used individually on the mobile/client side or combined to form the complete HomeScreen. By using the main HomeScreen in the client app, we can dynamically rearrange its structure from the server.

Setting Up `server.ts`



import { setupRiseTools } from "@rise-tools/cli";
import { createWSServer } from "@rise-tools/server";

import { models as mainModal } from "~src/home/home"; // import models from `Homescreen.tsx`
const port = Number(process.env.PORT || "3015");

const models = { ...mainModal };
const server = createWSServer(models, port);

if (process.env.NODE_ENV === "development") {
    setupRiseTools({ server });
}

Setting Up Your Expo Project

Cloning existing expo template

To quickly get started with your application, you can clone this base repository, which is set up with Expo, expo-router, Tamagui, and Rise Tools.

Run the following command to clone the repository:



git clone git@github.com:rise-tools/rise-mobile-quickstart.git

Manual set Up

To set up your project with Tamagui and Expo Router, run the following command:



npx create-expo-stack@latest react-native-rise-sdui-mobile --expo-router --tamagui

Then, install the necessary dependencies:

@rise-tools/kit-expo-router
@rise-tools/kitchen-sink
@rise-tools/react
@rise-tools/ws-client
expo-haptics

Create modelSource.ts

Next, create a modelSource.ts file to define the connection to the WebSocket server provided by the server.



import { createWSModelSource } from "@rise-tools/ws-client";

export const modelSource = createWSModelSource("ws://192.168.0.213:3015"); //switch 192.168.0.213 with your expo localhost url

Create riseActions.ts

Create a riseActions.ts file to define the local action library for the app.



import { useExpoRouterActions } from "@rise-tools/kit-expo-router";
import {
    useHapticsActions,
    useLinkingActions,
    useToastActions,
} from "@rise-tools/kitchen-sink";

export function useRiseActions() {
    return {
        ...useHapticsActions(),
        ...useLinkingActions(),
        ...useToastActions(),
        ...useExpoRouterActions(),
    };
}

Create riseComponenets.ts

Create a riseComponents.ts file to define the local component library for the app.




import {
    FormComponents,
    LucideIconsComponents,
    QRCodeComponents,
    RiseComponents,
    SVGComponents,
    TamaguiComponents,
    } from '@rise-tools/kitchen-sink';

export const components = {
    ...FormComponents,
    ...LucideIconsComponents,
    ...QRCodeComponents,
    ...RiseComponents,
    ...SVGComponents,
    ...TamaguiComponents,
    };

Integrating the HomeScreen model from the server

In the server terminal, run Server with npm run dev to start the server
In the react native app terminal, run the app using the following commands:
yarn ios to open the app on an iOS simulator
yarn android to open the app on an Android emulator
yarn start to open the app with Expo on your physical device
In the appropriate Expo file, set up your HomeScreen to utilize Rise tools by calling the models defined for the HomeScreen:



import { Rise } from '@rise-tools/react';
import { Stack, Link } from 'expo-router';
import { View } from 'react-native';

import { Button } from '~/components/Button';
import { Container } from '~/components/Container';
import { ScreenContent } from '~/components/ScreenContent';
import { modelSource } from '~/src/modelSource';
import { useRiseActions } from '~/src/riseActions';
import { components } from '~/src/riseComponents';

export default function Home() {
  return (
    <>
      <Rise
        modelSource={modelSource}
        components={components}
        path="HomeScreen" //model gotten from the server
        actions={useRiseActions()}
      />
    </>
  );
}

Updating React Native Application with Server update

While the server is running, any changes made to the Homescreen model will be automatically reflected in the mobile application.



function HeaderUI() {
    return (
        <XStack
            alignItems={"center"}
            padding={"$2"}
            justifyContent={"space-between"}>
            <XStack>
                <UserIcon width={70} height={60} />
                <XStack alignItems={"center"}>
                    <YStack>
                        <Text color={"#838282"}>Hello,</Text>
                        <H3 color={"#0F0F0F"} fontWeight={"700"}>
                            F.A.S
                        </H3>
                    </YStack>
                </XStack>
            </XStack>

            <Hamburger width={32} height={32} />
        </XStack>
    );
}

To finalize the design, we'll update the other components in our homescreen component, which will automatically update the app.



import {
    H3,
    H6,
    H5,
    RiseForm,
    Text,
    XStack,
    YStack,
    InputField,
} from "@rise-tools/kitchen-sink/server";

import {
    UserIcon,
    Hamburger,
    SearchIcon,
    MicIcon,
    SmallFork,
    RightIcon,
    ClockIcon,
    StarIcon,
    CarIcon,
    PackageIcon,
    ErrandIcon,
    Ridesicon,
    ResturantIcon,
} from "~/components/UserIcon";

export const models = {
    HeaderUI,
    SearchUI,
    NearbyUi: NearbyUi,
    BannerUi,
    ProductUi,
    HomeScreen,
};

const myProducts = [
    {
        name: "Package",
        icon: <PackageIcon width={32} height={32} />,
    },
    {
        name: "Rides",
        icon: <Ridesicon width={35} height={32} />,
    },
    {
        name: "Errands",
        icon: <ErrandIcon width={32} height={32} />,
    },
    {
        name: "Resturant",
        icon: <ResturantIcon width={32} height={32} />,
    },
];
function HeaderUI() {
    return (
        <XStack
            alignItems={"center"}
            padding={"$2"}
            justifyContent={"space-between"}>
            <XStack>
                <UserIcon width={70} height={60} />
                <XStack alignItems={"center"}>
                    <YStack>
                        <Text color={"#838282"}>Hello,</Text>
                        <H3 color={"#0F0F0F"} fontWeight={"700"}>
                            F.A.S
                        </H3>
                    </YStack>
                </XStack>
            </XStack>

            <Hamburger width={32} height={32} />
        </XStack>
    );
}

function SearchUI() {
    return (
        <XStack alignItems={"center"}>
            <SearchIcon width={20} height={20} />
            <RiseForm onSubmit={() => {}} flex={1} justifyContent={"center"}>
                <InputField
                    id="searchInput"
                    backgroundColor={"#fff"}
                    borderWidth={0}
                    borderRadius={0}
                    height={40}
                    style={{ marginTop: -14 }}
                    placeholder={"Where are you going?"}
                    placeholderTextColor={"#838282"}
                    color={"black"}
                />
            </RiseForm>
            <MicIcon width={20} height={20} />
        </XStack>
    );
}

function NearbyUi() {
    return (
        <YStack marginTop={"$4"} gap={"$2"}>
            <XStack alignItems={"flex-end"} justifyContent={"space-between"}>
                <H3 color={"black"} fontWeight={"500"}>
                    Nearby Resturants
                </H3>
                <H3 color={"#838282"} fontSize={20}>
                    See all
                </H3>
            </XStack>

            <XStack justifyContent={"space-between"} alignItems={"center"}>
                <XStack gap={"$2"} alignItems={"center"}>
                    <SmallFork width={34} height={34} />
                    <YStack gap={"$2"}>
                        <H6 color={"#000"} fontWeight={"500"}>
                            The Place Restaurant
                        </H6>
                        <XStack gap={"$4"} alignItems={"center"}>
                            <XStack gap={"$2"}>
                                <ClockIcon width={16} height={16} />
                                <Text color={"#838282"}>5mins drive</Text>
                            </XStack>
                            <XStack gap={"$2"}>
                                <StarIcon width={16} height={16} />
                                <Text color={"#838282"}>4.5</Text>
                            </XStack>
                        </XStack>
                    </YStack>
                </XStack>
                <RightIcon width={24} height={24} />
            </XStack>
        </YStack>
    );
}

function BannerUi() {
    return (
        <XStack
            backgroundColor={"#24B229"}
            alignItems={"center"}
            justifyContent={"space-between"}
            paddingHorizontal={"$4"}
            marginVertical={"$4"}
            borderRadius={15}>
            <YStack>
                <Text fontSize={20} color={"white"} fontWeight={"500"}>
                    Ride with us.
                </Text>
                <Text fontSize={20} color={"white"} fontWeight={"500"}>
                    Earn Points.
                </Text>
                <Text fontWeight={"500"} color={"white"}>
                    Get Started {"->"}
                </Text>
            </YStack>
            <CarIcon width={187} height={118} />
        </XStack>
    );
}

function ProductUi() {
    return (
        <YStack gap={"$2"}>
            <XStack alignItems={"flex-end"} justifyContent={"space-between"}>
                <H5 color={"black"} fontWeight={"500"}>
                    Our Products
                </H5>
                <H3 color={"#838282"} fontSize={20}>
                    See all
                </H3>
            </XStack>
            <XStack marginBottom={"$4"}>
                {myProducts.map((item) => (
                    <YStack
                        key={item.name}
                        justifyContent="space-between"
                        alignItems="center"
                        flex={1}>
                        <YStack alignItems="center">
                            <YStack
                                backgroundColor="#ECECEC"
                                borderRadius={"$4"}
                                padding={"$4"}
                                marginVertical={"$2"}>
                                {item.icon}
                            </YStack>
                            <Text fontSize={14} color={"#0F0F0F"}>
                                {item.name}
                            </Text>
                        </YStack>
                    </YStack>
                ))}
            </XStack>
        </YStack>
    );
}

function TripUi() {
    return (
        <YStack gap={"$2"}>
            <XStack alignItems={"flex-end"} justifyContent={"space-between"}>
                <H5 color={"black"} fontWeight={"500"}>
                    Your trips
                </H5>
                <H3 color={"#838282"} fontSize={20}>
                    See all
                </H3>
            </XStack>
            <XStack justifyContent={"space-between"} alignItems={"center"}>
                <XStack gap={"$2"} alignItems={"center"}>
                    <SmallFork width={34} height={34} />
                    <YStack gap={"$2"}>
                        <H6 color={"#000"} fontWeight={"500"}>
                            So Fresh
                        </H6>
                        <XStack gap={"$4"} alignItems={"center"}>
                            <XStack gap={"$2"}>
                                <ClockIcon width={16} height={16} />
                                <Text color={"#838282"}>1hr drive</Text>
                            </XStack>
                            <XStack gap={"$2"}>
                                <StarIcon width={16} height={16} />
                                <Text color={"#838282"}>4</Text>
                            </XStack>
                        </XStack>
                    </YStack>
                </XStack>
                <H6 color={"#000"} fontWeight={"500"}>
                    ₦12,000.00
                </H6>
            </XStack>
            <XStack
                justifyContent={"space-between"}
                alignItems={"center"}
                marginTop={"$4"}>
                <XStack gap={"$2"} alignItems={"center"}>
                    <Ridesicon width={34} height={34} />
                    <YStack gap={"$2"}>
                        <H6 color={"#000"} fontWeight={"500"}>
                            Film house cinema
                        </H6>
                        <XStack gap={"$4"} alignItems={"center"}>
                            <XStack gap={"$2"}>
                                <ClockIcon width={16} height={16} />
                                <Text color={"#838282"}>15mins drive</Text>
                            </XStack>
                            <XStack gap={"$2"}>
                                <StarIcon width={16} height={16} />
                                <Text color={"#838282"}>2.5</Text>
                            </XStack>
                        </XStack>
                    </YStack>
                </XStack>
                <H6 color={"#000"} fontWeight={"500"}>
                    ₦5,000.00
                </H6>
            </XStack>
            <XStack
                justifyContent={"space-between"}
                alignItems={"center"}
                marginTop={"$4"}>
                <XStack gap={"$2"} alignItems={"center"}>
                    <Ridesicon width={34} height={34} />
                    <YStack gap={"$2"}>
                        <H6 color={"#000"} fontWeight={"500"}>
                            iFitness Gym
                        </H6>
                        <XStack gap={"$4"} alignItems={"center"}>
                            <XStack gap={"$2"}>
                                <ClockIcon width={16} height={16} />
                                <Text color={"#838282"}>10min drive</Text>
                            </XStack>
                            <XStack gap={"$2"}>
                                <StarIcon width={16} height={16} />
                                <Text color={"#838282"}>2.5</Text>
                            </XStack>
                        </XStack>
                    </YStack>
                </XStack>
                <H6 color={"#000"} fontWeight={"500"}>
                    ₦3,000.00
                </H6>
            </XStack>
        </YStack>
    );
}

function HomeScreen() {
    return (
        <YStack paddingHorizontal={"$4"}>
            <HeaderUI />
            <SearchUI />
            <NearbyUi />
            <BannerUi />
            <ProductUi />
            <TripUi />
        </YStack>
    );
}

A common use case for Server Driven Rendering is managing promotional content. For example, if our BannerUi represents promotional content that needs to be hidden, you simply need to delete or comment it out on the server. This change will automatically remove the promotional content from the React Native application.

Deploying the Server to Production

To deploy the Rise server, we will use Render for hosting.

Create new Web service

Dynamic React Native App Updates from Server

Update the modelSource.ts file in the React Native application to use the new render service link.



export const modelSource = createWSModelSource(
    "https://my-render-link.com/:3015"
);

With any update to the main branch of the server, the server will automatically redeploy. This will trigger an automatic update of the React Native app as well.

Building and Testing the Mobile App for Production

To build and run the iOS app on your physical device in release configuration:
npx expo run:ios --configuration Release --device
This command compiles the app with optimizations enabled and deploys it to your connected iOS device.

To create a release variant of your Android application:
npx expo run:android --variant release
This command generates an optimized APK or App Bundle suitable for distribution and installation

Update your server and monitor the deployment process on Render. Once the deployment is complete, the app will update accordingly.

Component Driven Development with Storybook React Native

Farouq Seriki — Fri, 23 Aug 2024 09:26:18 +0000

🚀 Introduction

Welcome to this comprehensive, beginner-friendly guide on component-driven development using Storybook UI in React Native. This tutorial leverages the power of Expo, Tailwind and Storybook to provide a robust learning experience. GitHub Repo: https://github.com/FastheDeveloper/RN_ComponentDrivenDevelopment_Storybook

🎯 What You'll Learn

Core principles of component-driven development
Harnessing Storybook UI to enhance your development workflow
Bootstrapping a React Native project with Tailwind
Seamlessly integrating Storybook UI into your Expo project
Crafting and showcasing reusable components
Industry best practices for component-driven development

🛠 Prerequisites

Before diving in, make sure you have:

A basic understanding of JavaScript, Typescript and React Native
Node.js and npm installed on your development machine
Make sure you have completed the React Native - Environment Setup instructions
Your preferred code editor ready to go

📚 Tutorial Sections

Introduction to Component-Driven Development
Setting Up Your Expo Project
Integrating Storybook UI
Creating Your First Component
- Crafting a Dynamic Button Component
- Creating a Default Button Story
- Creating Various Button Stories
- Writing Jest Tests for the Button Component
Creating a Dynamic TextInput Component
- Crafting a TextInput with Tailwind CSS
- Creating a Default TextInput Story
- Creating Various TextInput Stories
- Writing Jest Tests for the TextInput Component
Testing Your Components
More Component Examples
Implementing the TextInput and Button Component

Introduction to Component-Driven Development in React Native

Component-Driven Development (CDD) is an approach to building user interfaces that emphasizes creating applications from the "bottom up" using reusable components. This methodology is particularly well-suited for React Native development, given the framework's component-based architecture.

What is Component-Driven Development?

CDD is a development methodology that focuses on building user interfaces by breaking them down into smaller, reusable components. These components are developed in isolation before being assembled into larger features and, ultimately, complete pages or screens.

Key principles of CDD include:

Modularity: Building UIs from discrete, reusable components.
Isolation: Developing and testing components independently.
Composition: Combining smaller components to create larger ones.
Reusability: Designing components for use across different parts of an application.

Benefits for React Native Developers

Adopting CDD in React Native development offers several advantages:

Improved Maintainability: Smaller, self-contained components are easier to understand, update, and debug.
Enhanced Reusability: Well-designed components can be reused across different parts of your app or even in different projects.
Easier Collaboration: Teams can work on different components simultaneously without conflicts.
Consistent Design: Using a library of standard components ensures UI consistency throughout the app.
Efficient Testing: Components can be tested in isolation, making it easier to write and maintain unit tests.

Implementing CDD in React Native

To implement CDD in your React Native project:

Start Small: Begin by identifying and building the smallest, most basic UI elements (buttons, inputs, etc.).
Build a Component Library: Create a collection of reusable components that can be shared across your application.
Use Tools: Leverage tools like Storybook to develop and showcase your components in isolation.
Document Components: Provide clear documentation for each component, including its props, usage examples, and any limitations.
Test Components: Write unit tests for each component to ensure they function correctly in isolation.

By adopting CDD, React Native developers can create more maintainable, scalable, and consistent mobile applications. This approach aligns well with React Native's philosophy and can significantly improve development efficiency and code quality.

Getting Started

Using My Repository

To quickly get started with the pre-configured environment, follow these steps:

Clone the repository using:

 git clone https://github.com/FastheDeveloper/RN_ComponentDrivenDevelopment_Storybook.git

Navigate to the project directory and install the dependencies by running:
```
    yarn

# or

    npm install
```

Setting Up from Scratch

Creating your expo react native application:
```
    npx create-expo-stack@latest
```
Running the above command will create a boilerplate application after asking a few configuration questions.
Setup Storybook In The Project:
```
    npx storybook@latest init
```
This will add a new folder (.storybook) in your project directory
Additional Configuration:
Create an app.config.js File
This configuration facilitates easy switching between Storybook UI for testing and the actual React Native application.
This file defines the storybookEnabled constant based on the environment variable STORYBOOK_ENABLED. This helps determine whether to render Storybook or the main application.
```
export default ({ config }) => ({
    ...config,
    name: 'My_App_Name',  
    slug: 'My_App_Name', 
    extra: {
        storybookEnabled: process.env.STORYBOOK_ENABLED,
    },
});
```

Update package.json File
In the package.json file, add these Storybook scripts. We use these to pass that environment variable to our application, which swaps the entry point to the Storybook UI using cross-env to make sure this works on all platforms (Windows/macOS/Linux).

```
{
    "scripts": {
        "storybook": "cross-env STORYBOOK_ENABLED='true' expo start",
        "storybook:ios": "cross-env STORYBOOK_ENABLED='true' expo ios",
        "storybook:android": "cross-env STORYBOOK_ENABLED='true' expo android"
    }
}
```

4.Setup Entry point (/app/index.tsx) with the env variable:

```javascript
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Constants from 'expo-constants'


function Page() {
return (
    <View style={styles.container}>
    <View style={styles.main}>
        <Text className="text-white">This is the first page of your app.</Text>
    </View>
    </View>
)
}

let AppEntryPoint = Page  

if (Constants?.expoConfig?.extra?.storybookEnabled === 'true') {
const StorybookUI = require('../.storybook').default
AppEntryPoint = () => {
    return (
    <View style={{ flex: 1 }}>
        <StorybookUI />
    </View>
    )
}
}

export default AppEntryPoint

```

5.Run the App for Testing:

To test the app, you can use one of the following commands depending on your target platform:

```shell 
    # Run on iOS
    yarn ios

# or 

    # Run on Android
    yarn android
```

6.Run Storybook to test :

```shell 
    # Run on iOS
    yarn storybook:ios

# or 

    # Run on Android
    yarn storybook:android
```

Creating a Dynamic Button Component

Create Button with StyleSheet/Tailwind css, adding Jest testID to the pressable

        import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native'
        import React, { ComponentProps } from 'react'
        import { APP_COLOR } from '@constants/colorConstants'
        import { FontAwesome } from '@expo/vector-icons'

        type buttonProps = {
        loading?: boolean
        rightIcon?: keyof typeof FontAwesome.glyphMap
        leftIcon?: keyof typeof FontAwesome.glyphMap
        label: string
        } & ComponentProps<typeof Pressable>

        const AppButton = ({  loading, leftIcon, label, rightIcon, ...pressableProps }: buttonProps) => {
        const content = loading ? (
            <>
            <View

            // style={styles.loaderWrapper}
             className="justify-center h-6"
             >
                <ActivityIndicator size="small" color={'white'} animating={true} />
            </View>
            </>
        ) : (
            <>
            {leftIcon && (
                <View 
                //style={styles.leftIcon}
                className="absolute left-5"
                >
                <FontAwesome name={leftIcon} size={20} />
                </View>
            )}
            <Text 
            className="text-APP_COLOR-MAIN_WHITE text-center text-lg font-bold "
            //style={styles.buttonText}
            >
                {label}
            </Text>
            {rightIcon && (
                <View 
               // style={styles.rightIcon}
                className="absolute right-5"
                >
                <FontAwesome name={rightIcon} size={20} />
                </View>
            )}
            </>
        )
        return (
            <Pressable
            //style={styles.button}
            className="w-full flex justify-center  item-center bg-APP_COLOR-MAIN_GREEN rounded-3xl p-4 shadow-lg"
            {...pressableProps}
            testID="testClick"
            >
            {content}
            </Pressable>
        )
        }

        export default AppButton

        const styles = StyleSheet.create({
            button: {
                alignItems: 'center',
                backgroundColor: APP_COLOR.MAIN_GREEN,
                borderRadius: 24,
                elevation: 5,
                flexDirection: 'row',
                justifyContent: 'center',
                padding: 16,
                width: '100%',
                shadowColor: '#000',
                shadowOffset: {
                height: 2,
                width: 0,
                },
                shadowOpacity: 0.25,
                shadowRadius: 3.84,
            },
            buttonText: {
                color: APP_COLOR.MAIN_WHITE,
                fontSize: 18,
                fontWeight: '700',
                textAlign: 'center',
            },
            loaderWrapper: {
                height: 24,
                justifyContent: 'center',
            },
            rightIcon: {
                position: 'absolute',
                right: 20,
            },
            leftIcon: {
                position: 'absolute',
                left: 20,
            },
        })

Creating Default Button Story

In our story files, we use a syntax called Component Story Format (CSF). In this case, we are using CSF3, which is a newer, updated version of CSF supported by the latest versions of Storybook. This version of CSF has significantly less boilerplate, making it easier to get started.
In Storybook, there are two basic levels of organization: the component and its child stories. Each story can be thought of as a permutation of a component. You can have as many stories per component as needed.

    * Component
        * Story
        * Story
        * Story

To introduce the component we are documenting, we create a default export that contains:

component - the component itself
title - how to refer to the component in the Storybook app's sidebar

argTypes - allows us to specify the types of our args, here we use it to define actions that will log whenever that interaction takes place

    import type { Meta, StoryObj } from '@storybook/react'

    import AppButton from './AppButton'

    import React from 'react'
    import { View } from 'react-native'

    const AppButtonMeta: Meta<typeof AppButton> = {
    title: 'Button',
    component: AppButton,
    argTypes: {
        onPress: { action: 'pressed the button' },
    },
    args: {
        label: 'Story Button',
        loading: false,
    },
    decorators: [
        (Story) => (
        <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
            <Story />
        </View>
        ),
    ],
    }

    export default AppButtonMeta

    export const Default: StoryObj<typeof AppButton> = {}

In this example, we create a new default story, which tells Storybook that:

The name in the sidebar should be "Button"
The component it should be attached to is AppButton
The default label should be "Story Button"
The default loading state should be false
The onPress action should run the 'pressed the button' action

Watch Video Here

Creating Various Button Stories

        export const TextOnlyButton: StoryObj<typeof AppButton> = {
        args: {
            label: 'Text Button',
        },
        argTypes: {
            onPress: { action: 'Yaay' },
        },
        parameters: {
            noBackground: true,
        },
        }

        export const WithLeftIcon: StoryObj<typeof AppButton> = {
        args: {
            label: 'With Left Icon',
            leftIcon: 'paper-plane',
        },
        argTypes: {
            onPress: { action: 'Lefty Pressed' },
        },
        parameters: {
            noBackground: true,
        },
        }

        export const WithRightIcon: StoryObj<typeof AppButton> = {
        args: {
            label: 'With Right Icon',
            rightIcon: 'user-circle-o',
        },
        argTypes: {
            onPress: { action: 'Righty Pressed' },
        },
        parameters: {
            noBackground: true,
        },
        }

        export const WithBothIcons: StoryObj<typeof AppButton> = {
        args: {
            label: 'With Both Icons',
            rightIcon: 'user-circle-o',
            leftIcon: 'paper-plane',
        },
        argTypes: {
            onPress: { action: 'Bothy Pressed' },
        },
        parameters: {
            noBackground: true,
        },
        }

Watch Video Here

Creating the Jest Test

    import React from 'react'

    import { render, fireEvent } from '@testing-library/react-native'
    import AppButton from '@/components/Button/AppButton'

    describe('MyButtons', () => {
    it('calls Unpressed when clicked', () => {
        const mockOnPress = jest.fn()
        const { getByTestId } = render(<AppButton label="Test" onPress={mockOnPress} />)
        const pressMeButton = getByTestId('testClick')
        fireEvent.press(pressMeButton)

        expect(mockOnPress).toHaveBeenCalled()
    })
    })

Test Suite Setup:
- We define a test suite named AppButton Component using describe. This groups together related tests for the AppButton component.
Test Case Definition:
- Inside the test suite, there is a single test case defined using the it function. The test case is titled "calls Unpressed when clicked".
Mock Function Creation:
- We create a mock function mockOnPress using jest.fn(). This mock function simulates the onPress prop of the AppButton component to test if it gets called when the button is pressed.
Rendering the Component:
- We render the AppButton component with a label prop set to "Test" and the onPress prop set to mockOnPress using the render function from @testing-library/react-native.
Simulating User Interaction:
- We retrieve the button element using getByTestId with the test ID "testClick". We simulate a press event on the button element using fireEvent.press
Verifying Behavior:
- We assert that the mockOnPress function has been called using expect(mockOnPress).toHaveBeenCalled(). This confirms that the onPress prop function was triggered when the button was pressed.

Running the Jest Test

    yarn test

To execute the test case, use the above command:

Creating a Dynamic TextInput Component

Create Textinput with Tailwind css, adding Jest testID

        import { Pressable, Text, TextInput, View } from 'react-native'
        import React, { ComponentProps, useState } from 'react'
        import { FontAwesome } from '@expo/vector-icons'

        type buttonProps = {
        rightIcon?: keyof typeof FontAwesome.glyphMap
        leftIcon?: keyof typeof FontAwesome.glyphMap
        label?: string
        } & ComponentProps<typeof TextInput>

        const InputField = ({ leftIcon, label, rightIcon, ...inputProps }: buttonProps) => {
        const [hide, setHide] = useState(true)
        return (
            <View className="mx-2">
            <Text className="text-lg font-bold mb-2">{label}</Text>

            <View className="flex-row justify-between items-center bg-APP_COLOR-MAIN_WHITE w-full  mt-2 rounded-xl shadow-xl border border-APP_COLOR-MAIN_GREY ">
                {leftIcon && (
                <View className="ml-2" testID="left-icon">
                    <FontAwesome name={leftIcon} size={20} />
                </View>
                )}

                <TextInput
                className={`h-[52px] w-[85%] px-[2%]  `}
                {...inputProps}
                secureTextEntry={inputProps.secureTextEntry && !rightIcon ? hide : undefined}
                testID="text-input"
                />

                {(rightIcon || inputProps.secureTextEntry) && (
                <View className="mr-2" testID="right-icon">
                    <Pressable onPress={() => (rightIcon ? null : setHide(!hide))} testID="passwordTest">
                    <FontAwesome
                        name={rightIcon || (inputProps.secureTextEntry && (hide ? 'eye' : 'eye-slash')) || undefined}
                        size={20}
                    />
                    </Pressable>
                </View>
                )}
            </View>
            </View>
        )
        }

        export default InputField

Creating Default TextInput Story

        import type { Meta, StoryObj } from '@storybook/react'

        import React from 'react'
        import { View } from 'react-native'
        import InputField from './InputField'

        const InputFieldMeta: Meta<typeof InputField> = {
        title: 'Input Field',
        component: InputField,
        argTypes: {},
        args: {
            label: 'Story Input',
        },
        decorators: [
            (Story) => (
            <View style={{ justifyContent: 'center', flex: 1 }}>
                <Story />
            </View>
            ),
        ],
        }

        export default InputFieldMeta

        export const Default: StoryObj<typeof InputField> = {}

In this example, we create a new default story, which tells Storybook that:

The name in the sidebar should be "Input Field"
The component it should be attached to is InputField
The default label should be "Story Input"

Watch Video Here

Creating Various Textinput Stories

        export const PasswordInput: StoryObj<typeof InputField> = {
        args: {
            secureTextEntry: true,
        },
        }

        export const LeftIconInput: StoryObj<typeof InputField> = {
        args: {
            leftIcon: 'user-circle',
        },
        }

        export const RightIconInput: StoryObj<typeof InputField> = {
        args: {
            rightIcon: 'star',
        },
        }

        export const SafetyIconWithSecureEntry: StoryObj<typeof InputField> = {
        args: {
            rightIcon: 'star',
            secureTextEntry: true,
        },
        }

Watch Video Here

Creating the Jest Test

        import React from 'react'
        import { render, fireEvent } from '@testing-library/react-native'
        import InputField from '@/components/InputField/InputField'


        describe('InputField', () => {
        it('renders correctly with label', () => {
            const { getByText } = render(<InputField label="Test Label" />)
            expect(getByText('Test Label')).toBeTruthy()
        })

        it('renders left icon when provided', () => {
            const { getByTestId } = render(<InputField leftIcon="user" />)
            expect(getByTestId('left-icon')).toBeTruthy()
        })

        it('renders right icon when provided', () => {
            const { getByTestId } = render(<InputField rightIcon="lock" />)
            expect(getByTestId('right-icon')).toBeTruthy()
        })

        it('toggles password visibility when secureTextEntry is true', () => {
            const { getByTestId } = render(<InputField secureTextEntry />)
            const passwordToggle = getByTestId('passwordTest')
            const input = getByTestId('text-input')

            expect(input.props.secureTextEntry).toBe(true)
            fireEvent.press(passwordToggle)
            expect(input.props.secureTextEntry).toBe(false)
            fireEvent.press(passwordToggle)
            expect(input.props.secureTextEntry).toBe(true)
        })

        it('passes additional props to TextInput', () => {
            const { getByTestId } = render(<InputField placeholder="Enter text" />)
            const input = getByTestId('text-input')
            expect(input.props.placeholder).toBe('Enter text')
        })
        })

Testing

This component is tested using Jest and React Native Testing Library. The tests cover various aspects of the InputField component's functionality:

Rendering with label:
Ensures that the component correctly renders the provided label text.
Left icon rendering:
Verifies that the left icon is displayed when the leftIcon prop is provided.
Right icon rendering:
Checks if the right icon is shown when the rightIcon prop is given.
Password visibility toggle:
Tests the functionality of toggling password visibility when secureTextEntry is true. It verifies that:
- The input is initially secure (password hidden)
- Pressing the toggle button makes the input visible
- Pressing the toggle button again makes the input secure
Prop passing:
Confirms that additional props (like placeholder) are correctly passed to the TextInput component.

The tests use render from React Native Testing Library to render the component, and fireEvent to simulate user interactions. getByText and getByTestId are used to query elements in the rendered component.

Running the Jest Test

    yarn test

To execute the test case, use the above command:

Component Examples

For a more comprehensive understanding of how to use this component and to explore additional implementations, please refer to the component folder in the project directory. This folder contains various examples that demonstrate different use cases and configurations Components and Storybook React Native

These examples can serve as practical references,

By examining these examples, you'll gain insights into creating various components using Storybook react native

Building a Basic Sign-Up Screen with Our Components

            import { Text, View } from 'react-native'
            import React, { useState } from 'react'
            import InputField from '@/components/InputField/InputField'
            import AppButton from '@/components/Button/AppButton'
            import { validateEmail, passwordsMatch, allFieldsFilled } from '../utils/Validators'

            export interface UserDetails {
            name: string
            email: string
            password: string
            confirmPassword: string
            }

            const initialUserDetails: UserDetails = {
            name: '',
            email: '',
            password: '',
            confirmPassword: '',
            }

            const SignupScreen = () => {
            const [userDetails, setUserDetails] = useState<UserDetails>(initialUserDetails)

            const handleChange = (name: keyof UserDetails, value: string) => {
                setUserDetails((prevDetails) => ({
                ...prevDetails,
                [name]: value,
                }))
            }

            const isFormValid = () => {
                return (
                validateEmail(userDetails.email) &&
                passwordsMatch(userDetails.password, userDetails.confirmPassword) &&
                allFieldsFilled(userDetails)
                )
            }
            return (
                <View className=" flex-1 mx-4">
                <View className=" items-center  ">
                    <Text className="text-lg text-[#212529] font-bold text-2xl">Let's Gets Signed Up</Text>
                    <Text className="text-[#A3AAB0]"> Create a new account</Text>
                </View>
                <View>
                    <InputField
                    leftIcon="user-o"
                    placeholder="Enter your name"
                    onChangeText={(text) => handleChange('name', text)}
                    />
                    <InputField
                    leftIcon="envelope-o"
                    placeholder="Enter your email"
                    rightIcon={validateEmail(userDetails.email) ? 'check' : undefined}
                    onChangeText={(text) => handleChange('email', text)}
                    />

                    <InputField
                    leftIcon="lock"
                    placeholder="Enter your Password"
                    secureTextEntry
                    onChangeText={(text) => handleChange('password', text)}
                    />
                    <InputField
                    leftIcon="lock"
                    placeholder="Re-Enter your Password"
                    secureTextEntry
                    onChangeText={(text) => handleChange('confirmPassword', text)}
                    />
                </View>
                <View className="flex-1 justify-end mx-2">
                    <AppButton label="Sign Up" disabled={!isFormValid()} />
                </View>
                </View>
            )
            }

            export default SignupScreen

This basic usage demonstrates how component-driven development with Storybook enhances the reusability of components that are created in isolation and tested with Jest. It provides confidence in their performance and functionality, showcasing the benefits of using Storybook for building and validating components.

Watch Video Here

Happy coding! 🎉🎉🎉

DEV Community: Farouq Seriki

🎥 Mastering Media Uploads in React Native — Images, Videos & Smart Compression (2026 Guide)

🧭 Table of Contents

🎯 Why Compression Matters

⚡ Quick Reference: Library Compatibility

⚙️ React Native CLI Setup (Images & Video)

🧩 Installation

⚠️ react-native-fs Version Compatibility

🎬 React Native Video (v6.0.0+) Setup

⚠️ V6.0.0 Information

📦 Installation

📱 iOS Setup

Enable Custom Features (Podfile)

🤖 Android Setup

📱 Android Permissions

🍎 iOS Permissions

🖼 React Native Cli Image Compression & Upload Example

🎥 React Native Cli Video Compression & Upload Example

⚙️ Expo Setup — Capture, Compress & Upload Media

🖼 Image Compression Only — Expo Image Manipulator

⚙️ Installation

💻 Example — Dynamic Image Compression & Resizing

🧠 Why It Works

🎥 Video Compression — Dev Build Mode

⚙️ Installation

💻 Example — Dynamic Video Compression Helper

✅ What You Unlock

🧩 Summary

🔁 Iterative Compression Pattern

🧰 Permissions & Troubleshooting

🏗 Production Tips

✅ Final Thoughts

React Native Dynamic App Icons

Article Highlights

Benefits of Dynamic App Icons

Installation

Android

ios

Environment Setup

Android

ios

Usage

Troubleshooting and Common Issues

Accessing Native iOS and Android Files in Expo

Testing Production Builds on iOS

Testing Production Builds on Android

Server Defined Rendering for React Native Using Rise

🚀 Introduction

🎯 What You'll Learn

🛠 Prerequisites

📚 Tutorial Sections

Introduction to Server-Driven Development

Key concepts include:

Benefits and use cases for SDUI:

Why Server Defined Rendering is Superior to Over-The-Air updates and Update Prompts

Setting Up Rise Server

Setting Up Rise Server

Setting up Server for Home screen

Models Object:

Setting Up server.ts

Setting Up Your Expo Project

Cloning existing expo template

Manual set Up

Create modelSource.ts

Create riseActions.ts

Create riseComponenets.ts

Integrating the HomeScreen model from the server

Updating React Native Application with Server update

Deploying the Server to Production

Create new Web service

Dynamic React Native App Updates from Server

Building and Testing the Mobile App for Production

Component Driven Development with Storybook React Native

🚀 Introduction

🎯 What You'll Learn

🛠 Prerequisites

📚 Tutorial Sections

Introduction to Component-Driven Development in React Native

What is Component-Driven Development?

Benefits for React Native Developers

⚠️ `react-native-fs` Version Compatibility

`Android`

`ios`

`Android`

`ios`

Setting Up `server.ts`