[MV-338] Add react-navigation (#49)

Add react-navigation lib. Extract Screen from `App.tsx`. Add navigation beetween `Home.tsx` and `Room.tsx`. Add context for storing global useful data.
fishjam-dev · Mar 13, 2023 · 51ec509 · 51ec509
1 parent 4c30137
commit 51ec509
Show file tree

Hide file tree

Showing 10 changed files with 374 additions and 181 deletions.
diff --git a/example/android/app/src/main/java/com/example/reactnativemembrane/MainActivity.java b/example/android/app/src/main/java/com/example/reactnativemembrane/MainActivity.java
@@ -1,4 +1,5 @@
 package com.membrane.reactnativemembrane;
+import android.os.Bundle;
 import expo.modules.ReactActivityDelegateWrapper;
 import com.facebook.react.ReactActivityDelegate;
 
@@ -21,4 +22,9 @@ protected ReactActivityDelegate createReactActivityDelegate() {
       new ReactActivityDelegate(this, getMainComponentName())
     );
   }
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(null);
+  }
 }
diff --git a/example/babel.config.js b/example/babel.config.js
@@ -14,6 +14,7 @@ module.exports = {
           [pak.name]: path.join(__dirname, '..', 'src/index.tsx'),
           '@components': './src/components/',
           '@colors': './src/shared/colors.ts',
+          '@screens': './src/screens/',
         },
       },
     ],

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -344,6 +344,12 @@ PODS:
   - react-native-membrane (4.1.1):
     - MembraneRTC (~> 4.1.1)
     - React-Core
+  - react-native-safe-area-context (4.5.0):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - ReactCommon/turbomodule/core
   - React-perflogger (0.70.5)
   - React-RCTActionSheet (0.70.5):
     - React-Core/RCTActionSheetHeaders (= 0.70.5)
@@ -410,6 +416,9 @@ PODS:
     - React-jsi (= 0.70.5)
     - React-logger (= 0.70.5)
     - React-perflogger (= 0.70.5)
+  - RNScreens (3.20.0):
+    - React-Core
+    - React-RCTImage
   - SocketRocket (0.6.0)
   - SwiftCollection (0.5.0):
     - AssociatedValues (~> 5.0.0)
@@ -480,6 +489,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-membrane (from `../..`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -492,6 +502,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -583,6 +594,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-membrane:
     :path: "../.."
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-perflogger:
     :path: "../node_modules/react-native/ReactCommon/reactperflogger"
   React-RCTActionSheet:
@@ -607,6 +620,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -660,6 +675,7 @@ SPEC CHECKSUMS:
   React-jsinspector: badd81696361249893a80477983e697aab3c1a34
   React-logger: fdda34dd285bdb0232e059b19d9606fa0ec3bb9c
   react-native-membrane: 87163f07545e30709aecf25d5da4b56b1b24a760
+  react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc
   React-perflogger: e68d3795cf5d247a0379735cbac7309adf2fb931
   React-RCTActionSheet: 05452c3b281edb27850253db13ecd4c5a65bc247
   React-RCTAnimation: 578eebac706428e68466118e84aeacf3a282b4da
@@ -672,6 +688,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 8e5c8c5d17af641f306d7380d8d0fe9b3c142c48
   React-runtimeexecutor: 7401c4a40f8728fd89df4a56104541b760876117
   ReactCommon: c9246996e73bf75a2c6c3ff15f1e16707cdc2da9
+  RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   SwiftCollection: 9f83c97b993bfad6298d7765631b409a00f57779
   SwiftPhoenixClient: 4e36f35d00e43d11881c255bd60c20efc0f39c91

diff --git a/example/package.json b/example/package.json
@@ -10,14 +10,18 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.12",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.27.5",
     "expo": "^47.0.0",
     "expo-font": "^11.1.1",
     "expo-splash-screen": "^0.18.1",
     "react": "18.1.0",
     "react-native": "0.70.5",
-    "react-native-dotenv": "^3.3.1"
+    "react-native-dotenv": "^3.3.1",
+    "react-native-safe-area-context": "^4.5.0",
+    "react-native-screens": "^3.20.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,45 +1,18 @@
-import { Typo } from '@components/Typo';
-import { SERVER_URL } from '@env';
-import * as Membrane from '@jellyfish-dev/react-native-membrane-webrtc';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Home } from '@screens/Home';
+import { Room } from '@screens/Room';
 import { useFonts } from 'expo-font';
 import * as SplashScreen from 'expo-splash-screen';
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  PermissionsAndroid,
-  SafeAreaView,
-  Text,
-  TextInput,
-  Platform,
-  Pressable,
-  Switch,
-  Alert,
-} from 'react-native';
+import React, { useEffect } from 'react';
 
-import { Room } from './Room';
+import { VideoroomContextProvider } from './VideoroomContext';
 
 SplashScreen.preventAutoHideAsync();
 
-export default function App() {
-  const {
-    connect: mbConnect,
-    disconnect: mbDisconnect,
-    joinRoom,
-    error,
-  } = Membrane.useMembraneServer();
-  const [connected, setConnected] = useState<boolean>(false);
-  const [roomName, setRoomName] = useState<string>('room');
-  const [serverUrl, setServerUrl] = useState<string>(SERVER_URL);
-  const [displayName, setDisplayName] = useState<string>(
-    `mobile ${Platform.OS}`
-  );
-  const [isSimulcastOn, setIsSimulcastOn] = useState<boolean>(true);
-
-  const params = {
-    token: 'NOW_YOU_CAN_SEND_PARAMS',
-  };
+const Stack = createNativeStackNavigator();
 
+export default function App() {
   const [fontsLoaded] = useFonts({
     'Inter-Medium': require('../assets/fonts/Inter-Medium.ttf'),
     'IcoMoon': require('../assets/fonts/icomoon/icomoon.ttf'),
@@ -51,145 +24,19 @@ export default function App() {
     }
   }, [fontsLoaded]);
 
-  useEffect(() => {
-    if (error) {
-      console.log(error);
-      Alert.alert('Error when connecting to server:', error);
-    }
-  }, [error]);
-
-  const requestPermissions = useCallback(async () => {
-    if (Platform.OS === 'ios') return;
-    try {
-      const granted = await PermissionsAndroid.requestMultiple([
-        PermissionsAndroid.PERMISSIONS.CAMERA,
-        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
-      ]);
-      if (
-        granted[PermissionsAndroid.PERMISSIONS.CAMERA] ===
-          PermissionsAndroid.RESULTS.GRANTED &&
-        granted[PermissionsAndroid.PERMISSIONS.RECORD_AUDIO] ===
-          PermissionsAndroid.RESULTS.GRANTED
-      ) {
-        console.log('You can use the camera');
-      } else {
-        console.log('Camera permission denied');
-      }
-    } catch (err) {
-      console.warn(err);
-    }
-  }, []);
-
-  const connect = useCallback(async () => {
-    await requestPermissions();
-    try {
-      await mbConnect(serverUrl, roomName, {
-        userMetadata: { displayName },
-        connectionParams: params,
-        socketChannelParams: {
-          isSimulcastOn,
-        },
-        simulcastConfig: {
-          enabled: isSimulcastOn,
-          activeEncodings: ['l', 'm', 'h'],
-        },
-        quality: Membrane.VideoQuality.HD_169,
-        maxBandwidth: { l: 150, m: 500, h: 1500 },
-        videoTrackMetadata: { active: true, type: 'camera' },
-        audioTrackMetadata: { active: true, type: 'audio' },
-        isSpeakerphoneOn: false,
-      });
-      await joinRoom();
-    } catch (err) {
-      console.warn(err);
-    }
-    setConnected(true);
-  }, [
-    requestPermissions,
-    mbConnect,
-    joinRoom,
-    roomName,
-    isSimulcastOn,
-    displayName,
-    serverUrl,
-  ]);
-
-  const disconnect = useCallback(() => {
-    setConnected(false);
-    mbDisconnect();
-  }, [mbDisconnect]);
-
-  if (connected) {
-    return (
-      <SafeAreaView style={styles.flex}>
-        <Room disconnect={disconnect} />
-      </SafeAreaView>
-    );
-  }
-
   return (
-    <View style={styles.container}>
-      <Typo variant="h3">Room name:</Typo>
-      <TextInput
-        value={roomName}
-        onChangeText={setRoomName}
-        style={styles.textInput}
-      />
-      <Text>Display name:</Text>
-      <TextInput
-        value={displayName}
-        onChangeText={setDisplayName}
-        style={styles.textInput}
-      />
-      <Text>Server URL:</Text>
-      <TextInput
-        value={serverUrl}
-        onChangeText={setServerUrl}
-        style={styles.textInput}
-      />
-      <View style={styles.row}>
-        <Text>Simulcast:</Text>
-        <Switch
-          onValueChange={(v) => setIsSimulcastOn(v)}
-          value={isSimulcastOn}
-        />
-      </View>
-      <Pressable onPress={connect}>
-        <Text style={styles.button}>Connect!</Text>
-      </Pressable>
-    </View>
+    <VideoroomContextProvider>
+      <NavigationContainer>
+        <Stack.Navigator
+          initialRouteName="Home"
+          screenOptions={{
+            headerShown: false,
+          }}
+        >
+          <Stack.Screen name="Home" component={Home} />
+          <Stack.Screen name="Room" component={Room} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </VideoroomContextProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1,
-  },
-  container: {
-    flex: 1,
-    padding: 50,
-    justifyContent: 'center',
-  },
-  textInput: {
-    borderWidth: 2,
-    borderColor: '#001A72',
-    borderRadius: 4,
-    marginBottom: 20,
-    fontSize: 20,
-    padding: 10,
-  },
-  button: {
-    borderWidth: 2,
-    borderColor: '#001A72',
-    borderRadius: 4,
-    marginVertical: 20,
-    fontSize: 20,
-    padding: 10,
-    textAlign: 'center',
-    backgroundColor: '#b5d2ff',
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});
diff --git a/example/src/VideoroomContext.tsx b/example/src/VideoroomContext.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useState } from 'react';
+
+const VideoroomContext = React.createContext<
+  | {
+      roomName: string;
+      setRoomName: React.Dispatch<React.SetStateAction<string>>;
+    }
+  | undefined
+>(undefined);
+
+const VideoroomContextProvider = (props) => {
+  const [roomName, setRoomName] = useState('');
+  const value = { roomName, setRoomName };
+
+  return (
+    <VideoroomContext.Provider value={value}>
+      {props.children}
+    </VideoroomContext.Provider>
+  );
+};
+
+function useVideoroomState() {
+  const context = React.useContext(VideoroomContext);
+  if (context === undefined) {
+    throw new Error('useRoomName must be used within a VideoroomContext');
+  }
+  return context;
+}
+
+export { VideoroomContextProvider, useVideoroomState };