started on agora

App.js

@@ -1,12 +1,41 @@
 import "react-native-gesture-handler";
 import React from "react";
-import { StyleSheet, Text } from "react-native";
+import { PermissionsAndroid, Platform, StyleSheet, Text } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import { Provider as PaperProvider } from "react-native-paper";
 import { MenuProvider } from "react-native-popup-menu";
 import MainRoutes from "./routes/MainRoutes";
+import { useEffect } from "react";
 
 const App = () => {
+	const requestPermissionsAndroid = async () => {
+		try {
+			const granted = await PermissionsAndroid.requestMultiple([
+				PermissionsAndroid.PERMISSIONS.CAMERA,
+				PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+			]);
+
+			console.log(granted);
+
+			if (
+				granted["android.permission.RECORD_AUDIO"] ===
+					PermissionsAndroid.RESULTS.GRANTED &&
+				granted["android.permission.CAMERA"] ===
+					PermissionsAndroid.RESULTS.GRANTED
+			) {
+				console.log("You have permissions!");
+			} else {
+				console.log("Permissions Denied");
+			}
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
+	useEffect(() => {
+		if (Platform.OS === "android") requestPermissionsAndroid();
+	}, []);
+
 	return (
 		<PaperProvider>
 			<MenuProvider>

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,9 @@
   package="com.skypeclone">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+
 
     <application
       android:name=".MainApplication"

components/AppBar/AppBar.js

@@ -9,7 +9,7 @@ import {
 	MenuTrigger,
 } from "react-native-popup-menu";
 
-const AppBar = () => {
+const AppBar = ({ navigation }) => {
 	return (
 		<View style={styles.appBar}>
 			<IconButton
@@ -35,7 +35,7 @@ const AppBar = () => {
 					icon="video-wireless-outline"
 					size={28}
 					color="white"
-					onPress={() => console.log("Pressed")}
+					onPress={() => navigation.navigate("Video Call")}
 					style={styles.actionIcon}
 				/>
 				<IconButton

package.json

@@ -16,6 +16,7 @@
 		"@react-navigation/stack": "^5.14.5",
 		"react": "17.0.1",
 		"react-native": "0.64.2",
+		"react-native-agora": "^3.4.2",
 		"react-native-gesture-handler": "^1.10.3",
 		"react-native-paper": "^4.9.2",
 		"react-native-popup-menu": "^0.15.11",

routes/MainRoutes.js

@@ -2,6 +2,7 @@ import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import Chat from "../screens/ChatScreen/Chat/Chat";
 import TabRoutes from "./TabRoutes";
+import VideoCall from "../screens/VideoCall/VideoCall";
 
 const Stack = createStackNavigator();
 
@@ -18,6 +19,11 @@ const MainRoutes = () => {
 				component={Chat}
 				options={{ headerShown: false }}
 			/>
+			<Stack.Screen
+				name="Video Call"
+				component={VideoCall}
+				options={{ headerShown: false }}
+			/>
 		</Stack.Navigator>
 	);
 };

routes/TabRoutes.js

@@ -9,10 +9,10 @@ import AppBar from "../components/AppBar/AppBar";
 
 const Tab = createBottomTabNavigator();
 
-export default function TabRoutes() {
+export default function TabRoutes({ navigation }) {
 	return (
 		<>
-			<AppBar />
+			<AppBar navigation={navigation} />
 			<Tab.Navigator
 				tabBarOptions={{
 					activeTintColor: "#0070db",

screens/VideoCall/VideoCall.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useEffect } from "react";
+import { generateToken } from "../../utils/token";
+
+const VideoCall = () => {
+	const [appId, setAppId] = useState("bc353855fafe40108ad901b667e95d12");
+	const [appCertificate, setCertificate] = useState(
+		"9d33f38e53854576820ce55fa91c7cf8",
+	);
+	const [channelName, setChannelName] = useState("SkypeClone Sarthak");
+	const [token, setToken] = useState("");
+	const [joinSucceeded, setJoinSuccess] = useState(false);
+	const [peerIds, setPeerIds] = useState([]);
+
+	const setup = () => {
+		// const token = generateToken(appId, appCertificate, channelName);
+		// setToken(token);
+	};
+
+	useEffect(() => {
+		setup();
+	}, []);
+
+	return (
+		<View>
+			<Text>Video Call Screen</Text>
+		</View>
+	);
+};
+
+export default VideoCall;
+
+const styles = StyleSheet.create({});

utils/token.js

@@ -0,0 +1,22 @@
+import AgoraToken from "agora-access-token";
+
+export const generateToken = (appId, appCert, channel) => {
+	const uid = Math.floor(Math.random() * 100000);
+
+	const expirationTimeInSeconds = 3600;
+	const currentTimestamp = Math.floor(Date.now() / 1000);
+	const privilegeExpiredTs = currentTimestamp + expirationTimeInSeconds;
+	const role = AgoraToken.RtcRole.PUBLISHER;
+
+	const token = AgoraToken.RtcTokenBuilder.buildTokenWithUid(
+		appId,
+		appCert,
+		channel,
+		uid,
+		role,
+		privilegeExpiredTs,
+	);
+
+	console.log(token);
+	return token;
+};

yarn.lock

@@ -5710,6 +5710,11 @@
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   "version" "16.13.1"
 
+"react-native-agora@^3.4.2":
+  "integrity" "sha512-zY2BIDCG9vEGQMW9oggsom9XHZJqETG/nafLsZx4z52TzHw9bipNypL/jXpE50Ofg+bS9YKYJaSZGy8M9dgKSA=="
+  "resolved" "https://registry.npmjs.org/react-native-agora/-/react-native-agora-3.4.2.tgz"
+  "version" "3.4.2"
+
 "react-native-codegen@^0.0.6":
   "integrity" "sha512-cMvrUelD81wiPitEPiwE/TCNscIVauXxmt4NTGcy18HrUd0WRWXfYzAQGXm0eI87u3NMudNhqFj2NISJenxQHg=="
   "resolved" "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.0.6.tgz"