Skip to main content

Embed App Builder Web View in a React Native App

This guide outlines the process of embedding the App Builder Web View in a React Native app.

BUILDING

STEP 1: Download and Extract App Builder Source Code​

Begin by downloading and extracting the app builder source code. For detailed instructions, refer here
Navigate to your project folder and run the app-builder-cli using the following command:

npm i && npm run start

STEP 2: Select Build Option​

Navigate using the arrow keys and select the build option using the enter key

Build option

STEP 3: Choose Build Type​

Select the appropriate build type based on your requirements. Choose "Web build" for a standalone native app or "Build for React SDK / Web SDK" for embedding the native app into an existing one. This process may take a few minutes.

Build option

STEP 4: Customize Your Web App​

Customize your web app either using turnkey approach or either through Embed SDK approach

customize option

STEP 5: Deploy Your Web App​

Once customization is complete, deploy your web app to Vercel or any other CDN providers. The URL of this deployed web app will be used for web-view integration in native apps.

Using RN CLI

Project Setup​

Set up a new React Native project using the RN CLI.

npx react-native init ProjectName
cd ProjectName

Start development server​

Start the development server using npm run start.Install the react-native-webview package to embed the web view:

npm install --save react-native-webview

For iOS, install CocoaPods dependencies usingnpx pod-install.

Provide Permissions​

For iOS, add camera and microphone permissions in your app's Info.plist file

Info.plist
<key>NSCameraUsageDescription</key>
<string>We need access to your camera for video conferencing</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone for video conferencing</string>
<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
</array>

For Android, add the necessary permissions in ProjectName/android/app/src/main/AndroidManifest.xml

  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

Update landing page​

Edit ProjectName/App.tsx as follows:

function App(): React.JSX.Element {
  const DEPLOYED_APP_URL = "https://conferencing.agora.io/";

  const requestPermissions = async () => {
    try {
      if (Platform.OS === "android") {
        await PermissionsAndroid.requestMultiple([
          PermissionsAndroid.PERMISSIONS.CAMERA,
          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
        ]);
      }
    } catch (err) {
      console.warn(err);
    }
  };

  React.useEffect(() => {
    requestPermissions();
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WebView style={{ flex: 1 }} source={{ uri: DEPLOYED_APP_URL }} />;
    </SafeAreaView>
  );
}

Replace DEPLOYED_APP_URL with the deployed link of your customized turnkey/sdk web app obtained in Step 5

Using EXPO CLI

Project Setup​

Set up a new project with empty boilerplate using Expo:

npx create-expo-app --template blank

Install the below package to embed web view in your app

npm install --save react-native-webview@13.8.6

Start development server​

Start the Expo Dev Server using npx expo start --tunnel , for any troubleshooting on setting up expo project , follow the expo docs. Download the Expo Go on your Android / iOS devices and scan the QR code generated above to run the embed app in your device.

Provide the Permissions​

Update permissions in your expo project's app.json :

{
    "expo": {
        ...,
           "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "UIBackgroundModes": ["audio"],
        "NSCameraUsageDescription": "This app uses the camera for video call",
        "NSMicrophoneUsageDescription": "This app uses the microphone for video call"
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "permissions": ["android.permission.CAMERA", "RECORD_AUDIO"]
    },

    }
}

Also install below packages :

npx expo install expo-camera expo-av

Update the landing page​

Remove the boilerplate code and start fresh with a new project using npm run reset-project Open Expo Project and edit app/index.tsx as follows:

export default function Index() {
  const { height, width } = useWindowDimensions();
  const DEPLOYED_APP_URL = "https://conferencing.agora.io";

  useEffect(() => {
    async function requestPermissions() {
      if (Platform.OS === "android") {
        try {
          // Request camera permissions
          const cameraPermission = await Camera.requestCameraPermissionsAsync();
          if (cameraPermission.status !== "granted") {
            console.log("Camera permission denied");
          } else {
            console.log("Camera permission granted");
          }

          // Request audio recording permissions
          const audioPermission = await Audio.requestPermissionsAsync();
          if (audioPermission.status !== "granted") {
            console.log("Audio recording permission denied");
          } else {
            console.log("Audio recording permission granted");
          }
        } catch (error) {
          console.error("Error requesting permissions:", error);
        }
      }
    }

    requestPermissions();
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WebView
        allowsInlineMediaPlayback
        mediaPlaybackRequiresUserAction={false}
        source={{ uri: DEPLOYED_APP_URL }}
        style={{
          flex: 1,
          height: height,
          width: width,
        }}
      />
    </SafeAreaView>
  );
}

Replace DEPLOYED_APP_URL with the deployed link of your customized turnkey/sdk web app obtained in STEP 5

© 2024 Agora.io, Inc