Skip to content

Commit

Permalink
updated Quickstart (#1696)
Browse files Browse the repository at this point in the history 
* updated Quickstart

* updated android - iOS tabs
  • Loading branch information
@ygit
ygit authored Aug 1, 2023
1 parent f2241e4 commit 39c09a9
Showing 1 changed file with 52 additions and 44 deletions.
96 changes: 52 additions & 44 deletions ...eact-native/v2/quickstart/prebuilt-RN.mdx → docs/react-native/v2/quickstart/prebuilt.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,24 +41,25 @@ npx react-native init PrebuiltSampleApp --version 0.68.5 --npm && cd ./PrebuiltS
a. Build the App
​

<Tabs id="test-run-sample-app" items={['iOS', 'Android']} />
<Tabs id="test-run-sample-app" items={['Android', 'iOS']} />

<Tab id="test-run-sample-app-0">

```bash section=BuildApp sectionIndex=1 tab=iOS
npx react-native run-ios --simulator="iPhone 14"
```bash section=BuildApp sectionIndex=1 tab=Android
npx react-native run-android
```

</Tab>

<Tab id="test-run-sample-app-1">

```bash section=BuildApp sectionIndex=1 tab=Android
npx react-native run-android
```bash section=BuildApp sectionIndex=1 tab=iOS
npx react-native run-ios --simulator="iPhone 14"
```

</Tab>


b. Start Metro Bundler if it is not already started
​

Expand Down Expand Up @@ -88,39 +89,9 @@ npm install --save @100mslive/react-native-room-kit

Native File Changes for `react-native-permissions` package -

<Tabs id="native-file-changes-react-native-permissions" items={['iOS', 'Android']} />
<Tabs id="native-file-changes-react-native-permissions" items={['Android', 'iOS']} />

<Tab id="native-file-changes-react-native-permissions-0">
1. Allow camera, recording audio and internet permissions

Add the below snippet in the `info.plist` file -

```xml section=ForIOSPermissions sectionIndex=1
<key>NSCameraUsageDescription</key>
<string>Please allow access to Camera to enable video conferencing</string>

<key>NSMicrophoneUsageDescription</key>
<string>Please allow access to Microphone to enable video conferencing</string>

<key>NSLocalNetworkUsageDescription</key>
<string>Please allow access to network usage to enable video conferencing</string>
```

2. Add the below snippet in the `ios/Podfile` file -

```json{3-6}
target 'PrebuiltSampleApp' do
...
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone"
...
end
```
</Tab>

<Tab id="native-file-changes-react-native-permissions-1">
1. Allow camera, recording audio and internet permissions by adding the below snippet to the `AndroidManifest.xml` file (at the application tag level).

```xml section=androidPermissions
Expand Down Expand Up @@ -154,6 +125,36 @@ npm install --save @100mslive/react-native-room-kit
```
</Tab>

<Tab id="native-file-changes-react-native-permissions-1">
1. Allow camera, recording audio and internet permissions

Add the below snippet in the `info.plist` file -

```xml section=ForIOSPermissions sectionIndex=1
<key>NSCameraUsageDescription</key>
<string>Please allow access to Camera to enable video conferencing</string>

<key>NSMicrophoneUsageDescription</key>
<string>Please allow access to Microphone to enable video conferencing</string>

<key>NSLocalNetworkUsageDescription</key>
<string>Please allow access to network usage to enable video conferencing</string>
```

2. Add the below snippet in the `ios/Podfile` file -

```json{3-6}
target 'PrebuiltSampleApp' do
...
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone"
...
end
```
</Tab>

If you see any permission related error, then check out `react-native-permissions` library [setup guide](https://github.com/zoontek/react-native-permissions/tree/3.4.0#setup) for `v3.4.0`.

> Note: If you have already setup the `react-native-permissions` package, then you can continue with your existing setup.
Expand Down Expand Up @@ -185,7 +186,13 @@ npm install --save @100mslive/react-native-room-kit
`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
npm install @100mslive/react-native-hms @shopify/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
npm install github:100mslive/100ms-react-native#release1.8.0
@shopify/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
```

1. Native File Changes for `@100mslive/react-native-hms` package
Expand Down Expand Up @@ -301,24 +308,25 @@ Follow the instructions in one of the tabs below based on the target platform yo

a. Build the App

<Tabs id="test-run-sample-app" items={['iOS', 'Android']} />
<Tabs id="run-sample-app" items={['Android', 'iOS']} />

<Tab id="test-run-sample-app-0">
<Tab id="run-sample-app-0">

```bash section=BuildApp sectionIndex=1 tab=iOS
npx react-native run-ios --simulator="iPhone 14"
```bash section=BuildApp sectionIndex=1 tab=Android
npx react-native run-android
```

</Tab>

<Tab id="test-run-sample-app-1">
<Tab id="run-sample-app-1">

```bash section=BuildApp sectionIndex=1 tab=Android
npx react-native run-android
```bash section=BuildApp sectionIndex=1 tab=iOS
npx react-native run-ios --simulator="iPhone 14"
```

</Tab>


b. Start Metro Bundler if it is not already started

```bash section=BuildApp sectionIndex=2
Expand Down

1 comment on commit 39c09a9

@vercel
Copy link

@vercel vercel bot commented on 39c09a9 Aug 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

100ms-docs – ./

100ms-docs.vercel.app
100ms-docs-100mslive.vercel.app
100ms-docs-git-main-100mslive.vercel.app
docs.100ms.live

Please sign in to comment.