diff --git a/docs/react-native/v2/quickstart/expo-prebuilt.mdx b/docs/react-native/v2/quickstart/expo-prebuilt.mdx new file mode 100644 index 0000000000..cc73fe4913 --- /dev/null +++ b/docs/react-native/v2/quickstart/expo-prebuilt.mdx @@ -0,0 +1,473 @@ +--- +title: Expo & Prebuilt Quickstart +nav: 2.0 +--- + +## Overview + +This guide will walk you through simple instructions to create a Video Conferencing app using the 100ms Prebuilt and Expo and test it using an Emulator or your Mobile Phone. Ensure that you are using the latest versions of the packages. + +| Package | Version | +| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| @100mslive/react-native-room-kit | [![npm](https://img.shields.io/npm/v/@100mslive/react-native-room-kit)](https://www.npmjs.com/package/@100mslive/react-native-room-kit) | +| @100mslive/react-native-hms | [![npm](https://img.shields.io/npm/v/@100mslive/react-native-hms)](https://www.npmjs.com/package/@100mslive/react-native-hms) | + +## Create a sample expo app + +This section contains instructions to create a simple Expo Video Conferencing app. We will help you with instructions to understand the project setup and complete code sample to implement this quickly. + +
+ +### Prerequisites + +- A [100ms account](https://dashboard.100ms.live/register) if you don't have one already. +- Working [Expo Local App Development Environment](https://docs.expo.dev/guides/local-app-development/#prerequisites) as we need to make changes in android and ios folders +- Familiar with basics of [Expo](https://docs.expo.dev/tutorial/introduction/). +- [VS code](https://code.visualstudio.com/) or any other IDE / code editor + +### Create a Expo app + +Once you have the prerequisites, follow the steps below to create a Expo app. This guide will use [VS code](https://code.visualstudio.com/) but you can use any code editor or IDE. + +1. Open your Terminal and navigate to directory/folder where you would like to create your app. + +2. Run the below command to create Expo app: + +```bash section=CreateExpoApp +npx create-expo-app my-expo-app && cd my-expo-app +``` + +3. Install `expo-dev-client` lib, By installing this library, we will be able to install native libraries and modify project configuration + +```bash section=InstallExpoDevClient +npx expo install expo-dev-client +``` + +4. Test run your app + + + + + +```bash section=BuildApp sectionIndex=1 tab=Android +npx expo run:android +``` + +The above commands compile your project, using our locally installed Android SDK, into a debug build of your app. Learn more about running android app locally [here](https://docs.expo.dev/guides/local-app-development/#local-app-compilation) + + + + + +```bash section=BuildApp sectionIndex=1 tab=iOS +npx expo run:ios +``` + +The above commands compile your project, using our locally installed Xcode, into a debug build of your app. Learn more about running ios app locally [here](https://docs.expo.dev/guides/local-app-development/#local-app-compilation) + + + +### Install the Dependencies + +[![npm](https://img.shields.io/npm/v/@100mslive/react-native-room-kit)](https://www.npmjs.com/package/@100mslive/react-native-room-kit) + +After the Test run of your app is successful, you can install [100ms React Native Room Kit package](https://www.npmjs.com/package/@100mslive/react-native-room-kit) in your app. + +```bash +npx expo install @100mslive/react-native-room-kit +``` + +#### Install the dependencies of react-native-room-kit package + +`react-native-room-kit` package depends upon many other packages. These packages to be your app's direct dependencies so that `react-native` can link them. + +```bash +npx expo install @100mslive/react-native-hms \ + @100mslive/types-prebuilt \ + @react-native-community/blur \ + @react-native-masked-view/masked-view \ + @shopify/flash-list \ + lottie-react-native \ + react-native-gesture-handler \ + react-native-linear-gradient \ + react-native-modal \ + react-native-reanimated \ + react-native-safe-area-context \ + react-native-simple-toast \ + -- --legacy-peer-deps +``` + +#### Setup minimum deployment targets + +We need to set `minSdkVersion = 24` on Android platform and have to target *minimum* `13.0` iOS SDK. If you meet these requirements then you can skip this step, otherwise lets continue - + +1. Install `expo-build-properties` library, This library helps us to set minimum deployment targets using expo config + +```bash +npx expo install expo-build-properties -- --save-dev --legacy-peer-deps +``` + +You can learn more about this library [here](https://docs.expo.dev/versions/latest/sdk/build-properties/) + +2. Add below `expo-build-properties` plugin config in your expo plugin file that is root level `app.json` file + +```json +[ + "expo-build-properties", + { + "android": { + "minSdkVersion": 24 + }, + "ios": { + "deploymentTarget": "13.4" + } + } +] +``` + +Example app.json with above config plugin changes: + +```json +{ + "expo": { + "plugins": [ + [ + "expo-build-properties", + { + "android": { + "minSdkVersion": 24 + }, + "ios": { + "deploymentTarget": "13.4" + } + } + ] + ] + } +} +``` + +#### Setup Permissions for App + +Since the App and @100mslive/react-native-room-kit package requires Camera & Microphone permissions, a package for requesting these permissions from users should also be installed. + +1. Install `expo-camera` library, It helps us to request Camera and Microphone permissions from user + +```bash +npx expo install expo-camera -- --legacy-peer-deps +``` + +You can learn more about this library and its usage [here](https://docs.expo.dev/versions/latest/sdk/camera/) + +2. Add below `expo-camera` plugin config in your expo plugin file that is root level `app.json` file + +```json +[ + "expo-camera", + { + "cameraPermission": "This Example app uses the camera for video calls", + "microphonePermission": "This Example app uses the microphone for audio and video calls", + "recordAudioAndroid": true + } +] +``` + +Example app.json with above config plugin changes: + +```json +{ + "expo": { + "plugins": [ + [ + "expo-camera", + { + "cameraPermission": "This Example app uses the camera for video calls", + "microphonePermission": "This Example app uses the microphone for audio and video calls", + "recordAudioAndroid": true + } + ] + ] + } +} +``` + +3. Android platform requires some additional permissions, Add below permissions inside `android` in `app.json` config - + +```json{6-12} +{ + "expo": { + ... + "android": { + ... + "permissions": [ + "android.permission.ACCESS_NETWORK_STATE", + "android.permission.CHANGE_NETWORK_STATE", + "android.permission.MODIFY_AUDIO_SETTINGS", + "android.permission.BLUETOOTH", + "android.permission.BLUETOOTH_CONNECT" + ] + } + ... + } +} +``` + +#### Configure Font Family + +`react-native-room-kit` package uses 'Inter' font family for texts be default. You need to setup 'Inter' fonts in your app. + +1. Install `expo-font` library, This library helps us to setup fonts for our app + +```bash +npx expo install expo-font -- --legacy-peer-deps +``` + +You can learn more about this library and its usage [here](https://docs.expo.dev/versions/latest/sdk/font/) + +2. Download Inter font family from [Google Fonts](https://fonts.google.com/share?query=Inter). + +3. Copy Paste downloaded Font Family variant files in `/assets/fonts/` directory, It should look like - + + + +4. Add below `expo-font` plugin config in your expo plugin file that is root level `app.json` file + +```json +[ + "expo-font", + { + "fonts": [ + "./assets/fonts/Inter-Black.ttf", + "./assets/fonts/Inter-Bold.ttf", + "./assets/fonts/Inter-ExtraBold.ttf", + "./assets/fonts/Inter-ExtraLight.ttf", + "./assets/fonts/Inter-Light.ttf", + "./assets/fonts/Inter-Medium.ttf", + "./assets/fonts/Inter-Regular.ttf", + "./assets/fonts/Inter-SemiBold.ttf", + "./assets/fonts/Inter-Thin.ttf" + ] + } +] +``` + +Example app.json with above config plugin changes: + +```json +{ + "expo": { + "plugins": [ + [ + "expo-font", + { + "fonts": [ + "./assets/fonts/Inter-Black.ttf", + "./assets/fonts/Inter-Bold.ttf", + "./assets/fonts/Inter-ExtraBold.ttf", + "./assets/fonts/Inter-ExtraLight.ttf", + "./assets/fonts/Inter-Light.ttf", + "./assets/fonts/Inter-Medium.ttf", + "./assets/fonts/Inter-Regular.ttf", + "./assets/fonts/Inter-SemiBold.ttf", + "./assets/fonts/Inter-Thin.ttf" + ] + } + ] + ] + } +} +``` + +#### Enable Background modes for iOS + +You can enable background modes for audio in iOS. so that when you minimze the app, room audio can still be heared by the users. + +Paste the following in your `Info.plist` file - + +```xml{3-6} + + ... + UIBackgroundModes + + audio + + ... + +``` + +#### Additional Setup + +You can follow [ScreenShare setup](https://www.100ms.live/docs/react-native/v2/how-to-guides/set-up-video-conferencing/screenshare) and [AudioShare setup](https://www.100ms.live/docs/react-native/v2/how-to-guides/set-up-video-conferencing/local-audio-share) guides to add ScreenShare and Audio Share features in your app. + +After doing changes related to ScreenShare feature, To use screenshare feature on iOS, pass `appGroup` and `preferredExtension` options to `HMSPrebuilt` componnets - + +```js{6-7} + +``` + +#### Apply changes in native platform folders + +We have done so many changes in our project, Run below command to apply these changes in native Android and iOS folders - + +```bash +npx expo prebuild +``` + +### Prebuilt Properties + +```js + + +const handleRoomLeave: OnLeaveHandler = useCallback((reason) => { + console.log(':: Reason for Leaving the Room > ', reason); + navigation.navigate('HomeScreen'); +}, []); +``` + +### Complete code example + +Now that your project setup is complete, let's replace the code in the `App.js` file with the complete code sample below - + +```js section=completeCodeExample +import 'react-native-gesture-handler'; +import React, { useEffect, useState } from 'react'; +import { StatusBar } from 'expo-status-bar'; +import { StyleSheet, Button, View } from 'react-native'; +import { HMSPrebuilt } from '@100mslive/react-native-room-kit'; +import { GestureHandlerRootView } from 'react-native-gesture-handler'; +import { useFonts } from 'expo-font'; +import { requestCameraPermissionsAsync, requestMicrophonePermissionsAsync } from 'expo-camera'; + +const App = () => { + // LOAD REQUIRED FONTS + const [fontsLoaded, fontError] = useFonts({ + 'Inter-Bold': require("./assets/fonts/Inter-Bold.ttf"), + 'Inter-Medium': require("./assets/fonts/Inter-Medium.ttf"), + 'Inter-Regular': require("./assets/fonts/Inter-Regular.ttf"), + 'Inter-SemiBold': require("./assets/fonts/Inter-SemiBold.ttf"), + }); + + const [showHMSPrebuilt, setShowHMSPrebuilt] = useState(false); + + // Asking Camera & Microphone permissions from user + useEffect(() => { + Promise.allSettled([ + requestCameraPermissionsAsync(), + requestMicrophonePermissionsAsync(), + ]) + .then((results) => { + console.log('Permissions Result: ', results); + }) + .catch((error) => { + console.log('Permissions Error: ', error); + }); + }, []); + + // If fonts are not loaded then show nothing + if (!fontsLoaded && !fontError) { + return null; + } + + // If an error occurred while loading fonts, show it + if (!!fontError) { + return {fontError.message}: {fontError.message} + } + + // Content + return ( + + + + + {showHMSPrebuilt ? ( + setShowHMSPrebuilt(false)} + /> + ) : ( + +
+ +### Check Deployed Sample Apps + +You can download and check out the 100ms React Native deployed apps - + +🤖 Download the Sample Android App [here](https://appdistribution.firebase.dev/i/7b7ab3b30e627c35) + +📲 Download the Sample iOS App [here](https://testflight.apple.com/join/v4bSIPad) diff --git a/public/docs/v2/font-family-setup.png b/public/docs/v2/font-family-setup.png new file mode 100644 index 0000000000..6c4ed05153 Binary files /dev/null and b/public/docs/v2/font-family-setup.png differ