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