[Expo Compatibility] - Add support for Expo Config Plugin (#691)

* feat(config-plugin): wip on implementing expo config plugin

* fix(config-plugin): add missing peerDependency on expo-build-properties

* feat(config-plugin): improve typings for plugin

* feat(config-plugin): rename entrypoint to index, add 'build' folder

* docs(config-plugin): add docs on how to use with Expo in README.md

* docs(config-plugin): add missing section about installing expo-build-properties

* chore: temporary disable deploymentTarget setup

* chore: update build folder

Author: JonatanSalas

.gitignore

@@ -9,7 +9,6 @@ node_modules
 # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
 
 ## Build generated
-build/
 DerivedData/
 .idea
 ## Various settings

README.md

@@ -3,6 +3,7 @@
 # Twilio Video (WebRTC) for React Native
 
 Platforms:
+
 - iOS
 - Android
 
@@ -27,6 +28,47 @@ yarn add https://github.com/blackuy/react-native-twilio-video-webrtc
 npm install https://github.com/blackuy/react-native-twilio-video-webrtc --save
 ```
 
+### Usage with Expo
+
+To use this library with [`Expo`](https://expo.dev) we recommend using our config plugin that you can configure like the following example:
+
+```json
+{
+  "name": "my app",
+  "plugins": [
+    [
+      "react-native-twilio-video-webrtc",
+      {
+        "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
+        "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone"
+      }
+    ]
+  ]
+}
+```
+
+Also you will need to install `expo-build-properties` package:
+
+#### NPM
+
+```bash
+npm i expo-build-properties
+```
+
+#### Yarn
+
+```bash
+yarn add expo-build-properties
+```
+
+#### Expo Config Plugin Props
+
+The plugin support the following properties:
+
+- `cameraPermission`: Specifies the text to show when requesting the camera permission to the user.
+
+- `microphonePermission`: Specifies the text to show when requesting the microphone permission to the user.
+
 ### iOS
 
 #### Option A: Install with CocoaPods (recommended)
@@ -135,7 +177,7 @@ android {
 }
 ```
 
-Now you're ready to load the package in `MainApplication.java`.  In the imports section, add this:
+Now you're ready to load the package in `MainApplication.java`. In the imports section, add this:
 
 ```java
 import com.twiliorn.library.TwilioPackage;
@@ -165,7 +207,7 @@ For most applications, you'll want to add camera and audio permissions to your `
     <uses-feature android:name="android.hardware.microphone" android:required="false" />
 ```
 
-Newer versions of Android have a different permissions model.  You will need to use the `PermissionsAndroid`
+Newer versions of Android have a different permissions model. You will need to use the `PermissionsAndroid`
 class in `react-native` in order to request the `CAMERA` and `RECORD_AUDIO` permissions.
 
 ### Additional Tips
@@ -190,6 +232,7 @@ this library are not stripped. To do that, add these two lines to `proguard-rule
 ```
 
 ## Docs
+
 You can see the documentation [here](./docs).
 
 ## Usage
@@ -200,8 +243,8 @@ We have three important components to understand:
 import {
   TwilioVideo,
   TwilioVideoLocalView,
-  TwilioVideoParticipantView
-} from 'react-native-twilio-video-webrtc'
+  TwilioVideoParticipantView,
+} from "react-native-twilio-video-webrtc";
 ```
 
 - `TwilioVideo` / is responsible for connecting to rooms, events delivery and camera/audio.
@@ -210,62 +253,62 @@ import {
 
 Here you can see a complete example of a simple application that uses almost all the apis:
 
-````javascript
-import React, { Component, useRef } from 'react';
+```javascript
+import React, { Component, useRef } from "react";
 import {
   TwilioVideoLocalView,
   TwilioVideoParticipantView,
-  TwilioVideo
-} from 'react-native-twilio-video-webrtc';
+  TwilioVideo,
+} from "react-native-twilio-video-webrtc";
 
 const Example = (props) => {
   const [isAudioEnabled, setIsAudioEnabled] = useState(true);
   const [isVideoEnabled, setIsVideoEnabled] = useState(true);
-  const [status, setStatus] = useState('disconnected');
+  const [status, setStatus] = useState("disconnected");
   const [participants, setParticipants] = useState(new Map());
   const [videoTracks, setVideoTracks] = useState(new Map());
-  const [token, setToken] = useState('');
+  const [token, setToken] = useState("");
   const twilioRef = useRef(null);
 
   const _onConnectButtonPress = () => {
     twilioRef.current.connect({ accessToken: token });
-    setStatus('connecting');
-  }
-  
+    setStatus("connecting");
+  };
+
   const _onEndButtonPress = () => {
     twilioRef.current.disconnect();
   };
 
   const _onMuteButtonPress = () => {
     twilioRef.current
       .setLocalAudioEnabled(!isAudioEnabled)
-      .then(isEnabled => setIsAudioEnabled(isEnabled));
+      .then((isEnabled) => setIsAudioEnabled(isEnabled));
   };
 
   const _onFlipButtonPress = () => {
     twilioRef.current.flipCamera();
   };
 
-  const _onRoomDidConnect = ({roomName, error}) => {
-    console.log('onRoomDidConnect: ', roomName);
+  const _onRoomDidConnect = ({ roomName, error }) => {
+    console.log("onRoomDidConnect: ", roomName);
 
-    setStatus('connected');
+    setStatus("connected");
   };
 
   const _onRoomDidDisconnect = ({ roomName, error }) => {
-    console.log('[Disconnect]ERROR: ', error);
+    console.log("[Disconnect]ERROR: ", error);
 
-    setStatus('disconnected');
+    setStatus("disconnected");
   };
 
-  const _onRoomDidFailToConnect = error => {
-    console.log('[FailToConnect]ERROR: ', error);
+  const _onRoomDidFailToConnect = (error) => {
+    console.log("[FailToConnect]ERROR: ", error);
 
-    setStatus('disconnected');
+    setStatus("disconnected");
   };
 
   const _onParticipantAddedVideoTrack = ({ participant, track }) => {
-    console.log('onParticipantAddedVideoTrack: ', participant, track);
+    console.log("onParticipantAddedVideoTrack: ", participant, track);
 
     setVideoTracks(
       new Map([
@@ -274,12 +317,12 @@ const Example = (props) => {
           track.trackSid,
           { participantSid: participant.sid, videoTrackSid: track.trackSid },
         ],
-      ]),
+      ])
     );
   };
 
   const _onParticipantRemovedVideoTrack = ({ participant, track }) => {
-    console.log('onParticipantRemovedVideoTrack: ', participant, track);
+    console.log("onParticipantRemovedVideoTrack: ", participant, track);
 
     const videoTracksLocal = videoTracks;
     videoTracksLocal.delete(track.trackSid);
@@ -289,84 +332,78 @@ const Example = (props) => {
 
   return (
     <View style={styles.container}>
-      {
-        status === 'disconnected' &&
+      {status === "disconnected" && (
         <View>
-          <Text style={styles.welcome}>
-            React Native Twilio Video
-          </Text>
+          <Text style={styles.welcome}>React Native Twilio Video</Text>
           <TextInput
             style={styles.input}
-            autoCapitalize='none'
+            autoCapitalize="none"
             value={token}
-            onChangeText={(text) => setToken(text)}>
-          </TextInput>
+            onChangeText={(text) => setToken(text)}
+          ></TextInput>
           <Button
             title="Connect"
             style={styles.button}
-            onPress={_onConnectButtonPress}>
-          </Button>
+            onPress={_onConnectButtonPress}
+          ></Button>
         </View>
-      }
+      )}
 
-      {
-        (status === 'connected' || status === 'connecting') &&
-          <View style={styles.callContainer}>
-          {
-            status === 'connected' &&
+      {(status === "connected" || status === "connecting") && (
+        <View style={styles.callContainer}>
+          {status === "connected" && (
             <View style={styles.remoteGrid}>
-              {
-                Array.from(videoTracks, ([trackSid, trackIdentifier]) => {
-                  return (
-                    <TwilioVideoParticipantView
-                      style={styles.remoteVideo}
-                      key={trackSid}
-                      trackIdentifier={trackIdentifier}
-                    />
-                  )
-                })
-              }
+              {Array.from(videoTracks, ([trackSid, trackIdentifier]) => {
+                return (
+                  <TwilioVideoParticipantView
+                    style={styles.remoteVideo}
+                    key={trackSid}
+                    trackIdentifier={trackIdentifier}
+                  />
+                );
+              })}
             </View>
-          }
-          <View
-            style={styles.optionsContainer}>
+          )}
+          <View style={styles.optionsContainer}>
             <TouchableOpacity
               style={styles.optionButton}
-              onPress={_onEndButtonPress}>
-              <Text style={{fontSize: 12}}>End</Text>
+              onPress={_onEndButtonPress}
+            >
+              <Text style={{ fontSize: 12 }}>End</Text>
             </TouchableOpacity>
             <TouchableOpacity
               style={styles.optionButton}
-              onPress={_onMuteButtonPress}>
-              <Text style={{fontSize: 12}}>{ isAudioEnabled ? "Mute" : "Unmute" }</Text>
+              onPress={_onMuteButtonPress}
+            >
+              <Text style={{ fontSize: 12 }}>
+                {isAudioEnabled ? "Mute" : "Unmute"}
+              </Text>
             </TouchableOpacity>
             <TouchableOpacity
               style={styles.optionButton}
-              onPress={_onFlipButtonPress}>
-              <Text style={{fontSize: 12}}>Flip</Text>
+              onPress={_onFlipButtonPress}
+            >
+              <Text style={{ fontSize: 12 }}>Flip</Text>
             </TouchableOpacity>
-            <TwilioVideoLocalView
-              enabled={true}
-              style={styles.localVideo}
-            />
+            <TwilioVideoLocalView enabled={true} style={styles.localVideo} />
           </View>
         </View>
-      }
+      )}
 
       <TwilioVideo
-        ref={ twilioRef }
-        onRoomDidConnect={ _onRoomDidConnect }
-        onRoomDidDisconnect={ _onRoomDidDisconnect }
-        onRoomDidFailToConnect= { _onRoomDidFailToConnect }
-        onParticipantAddedVideoTrack={ _onParticipantAddedVideoTrack }
-        onParticipantRemovedVideoTrack= { _onParticipantRemovedVideoTrack }
+        ref={twilioRef}
+        onRoomDidConnect={_onRoomDidConnect}
+        onRoomDidDisconnect={_onRoomDidDisconnect}
+        onRoomDidFailToConnect={_onRoomDidFailToConnect}
+        onParticipantAddedVideoTrack={_onParticipantAddedVideoTrack}
+        onParticipantRemovedVideoTrack={_onParticipantRemovedVideoTrack}
       />
     </View>
   );
-}
+};
 
-AppRegistry.registerComponent('Example', () => Example);
-````
+AppRegistry.registerComponent("Example", () => Example);
+```
 
 ## Run the Example Application
 
@@ -379,18 +416,18 @@ To run the example application:
 
 ## Migrating from 1.x to 2.x
 
-* Make sure your pod dependencies are updated.  If you manually specified a pod version, you'll want to update it as follows:
+- Make sure your pod dependencies are updated. If you manually specified a pod version, you'll want to update it as follows:
 
 ```
   s.dependency 'TwilioVideo', '~> 2.2.0'
 ```
 
-* Both participants and tracks are uniquely identified by their `sid`/`trackSid` field.
-The `trackId` field no longer exists and should be replaced by `trackSid`.  Commensurate with this change,
-participant views now expect `participantSid` and `videoTrackSid` keys in the `trackIdentity` prop (instead of
-`identity` and `trackId`).
+- Both participants and tracks are uniquely identified by their `sid`/`trackSid` field.
+  The `trackId` field no longer exists and should be replaced by `trackSid`. Commensurate with this change,
+  participant views now expect `participantSid` and `videoTrackSid` keys in the `trackIdentity` prop (instead of
+  `identity` and `trackId`).
 
-* Make sure you're listening to participant events via `onParticipant{Added/Removed}VideoTrack` rather than `onParticipant{Enabled/Disabled}Track`.
+- Make sure you're listening to participant events via `onParticipant{Added/Removed}VideoTrack` rather than `onParticipant{Enabled/Disabled}Track`.
 
 ## Contact
 

app.plugin.js

@@ -0,0 +1 @@
+module.exports = require("./plugin/build");