v4.0.0 🥳

v4.0.0

Components.ts

@@ -2,32 +2,41 @@ import Endcall from './src/Controls/Local/EndCall';
 import LocalAudioMute from './src/Controls/Local/LocalAudioMute';
 import LocalVideoMute from './src/Controls/Local/LocalVideoMute';
 import SwitchCamera from './src/Controls/Local/SwitchCamera';
-import Controls from './src/Controls/LocalControls';
+import LocalControls from './src/Controls/LocalControls';
 import RemoteAudioMute from './src/Controls/Remote/RemoteAudioMute';
 import RemoteSwap from './src/Controls/Remote/RemoteSwap';
 import RemoteVideoMute from './src/Controls/Remote/RemoteVideoMute';
 import RemoteControls from './src/Controls/RemoteControls';
-import MaxVideoView from './src/MaxVideoView';
-import MinVideoView from './src/MinVideoView';
-import RtcConfigure from './src/RTCConfigure';
+import MaxVideoView from './src/Views/MaxVideoView';
+import MinVideoView from './src/Views/MinVideoView';
+import RtcConfigure from './src/RtcConfigure';
+import RtmConfigure from './src/RtmConfigure';
 import BtnTemplate from './src/Controls/BtnTemplate';
-import PinnedVideo from './src/PinnedVideo';
-import GridVideo from './src/GridVideo';
-
+import PinnedVideo from './src/Views/PinnedVideo';
+import GridVideo from './src/Views/GridVideo';
+import ImageIcon from './src/Controls/ImageIcon';
+import Create from './src/Rtc/Create';
+import Join from './src/Rtc/Join';
+import Username from './src/Views/Usernames';
 export {
   Endcall,
   LocalAudioMute,
   LocalVideoMute,
   SwitchCamera,
-  Controls,
+  LocalControls,
   RemoteAudioMute,
   RemoteSwap,
   RemoteVideoMute,
   RemoteControls,
+  Create,
+  Join,
   MaxVideoView,
   MinVideoView,
   RtcConfigure,
+  RtmConfigure,
   BtnTemplate,
   PinnedVideo,
   GridVideo,
+  Username,
+  ImageIcon,
 };

Contexts.ts

@@ -1,14 +1,16 @@
-import MaxUidContext from './src/MaxUidContext';
-import MinUidContext from './src/MinUidContext';
-import PropsContext from './src/PropsContext';
-import RtcContext from './src/RtcContext';
-import LocalUserContext, {LocalContext} from './src/LocalUserContext';
+import MaxUidContext from './src/Contexts/MaxUidContext';
+import MinUidContext from './src/Contexts/MinUidContext';
+import PropsContext from './src/Contexts/PropsContext';
+import RtcContext from './src/Contexts/RtcContext';
+import RtmContext from './src/Contexts/RtmContext';
+import LocalUserContext, {LocalContext} from './src/Contexts/LocalUserContext';
 
 export {
   MaxUidContext,
   MinUidContext,
   PropsContext,
   RtcContext,
+  RtmContext,
   LocalUserContext,
   LocalContext,
 };

README.md

@@ -6,19 +6,19 @@ Instantly integrate Agora video calling or streaming into your React Native appl
 ## Getting started
 
 ### Requirements
-- [An Agora developer account](https://www.agora.io/en/blog/how-to-get-started-with-agora?utm_source=github&utm_repo=ReactNative-UIKit)
+- [An Agora developer account](https://www.agora.io/en/blog/how-to-get-started-with-agora?utm_source=github&utm_repo=ReactNative-UIKit) (it's free)
 - Android or iOS Device
 - React Native Project
 
-Expo is now supported using custom-dev-clients, for more information read this [blog post](https://www.agora.io/en/blog/building-a-video-calling-app-using-the-agora-sdk-on-expo-react-native/)
+[Expo](https://expo.dev/) is supported using custom-dev-clients, for more information read this [blog post](https://www.agora.io/en/blog/building-a-video-calling-app-using-the-agora-sdk-on-expo-react-native/)
 
 
 
 ### Installation
 To a react-native application generated using react-native-cli, add the following:
 
 ```
-npm i react-native-agora agora-rn-uikit
+npm i react-native-agora agora-react-native-rtm agora-rn-uikit
 ```
 
 ### Usage
@@ -32,15 +32,15 @@ import AgoraUIKit from 'agora-rn-uikit';
 
 const App = () => {
   const [videoCall, setVideoCall] = useState(true);
-  const rtcProps = {
+  const connectionData = {
     appId: '<Agora App ID>',
     channel: 'test',
   };
-  const callbacks = {
+  const rtcCallbacks = {
     EndCall: () => setVideoCall(false),
   };
   return videoCall ? (
-    <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
+    <AgoraUIKit connectionData={connectionData} rtcCallbacks={rtcCallbacks} />
   ) : (
     <Text onPress={()=>setVideoCall(true)}>Start Call</Text>
   );
@@ -51,31 +51,31 @@ export default App;
 
 **Replace the `'<Agora App ID>'` with your own appID**.
 
-If you're using an App ID in secured mode, you'll need to pass in a token (you can generate a temporary token using the Agora console).
+If you created the Agora App in secured mode, you'll need to pass in an `rtcToken` and an `rtmToken` to the `connectionData` prop. Alternatively, you can deploy the one-click [token server](https://github.com/AgoraIO-Community/agora-token-service) and pass in the `tokenUrl`, the UIKit then automatically fetches and manages the tokens. 
 
 ### Demo Project
 There's a React Native UIKit demo [here](https://github.com/AgoraIO-Community/ReactNative-UIKit-example), and one with typescript [here](https://github.com/AgoraIO-Community/ReactNative-UIKit-example/tree/typescript).
 
 ### Instructions for running on Android:
 
 1.  Connect your Android device to system with debugging on 
-2.  Type adb devices to verify if the device is connected 
+2.  Type `adb devices` to verify if the device is connected 
 3.  Run `npm start` – This will start the development server 
 4.  Open another terminal in the same folder 
 5.  Run `npm run android` - This will deploy the app on the Android device. (Now, the app will connect our development server)
-6.  Note Android simulators are not recommended since they might not be able to access camera and mic.
+6.  Note Android simulators are not recommended since they might not be able to access the camera and microphone.
 
 ### Instructions for running on iOS:
 
-1.  Connect an IOS device to system, create an apple developer account and register your device with apple for development.
+1.  Connect an iOS device to your Mac, create an apple developer account and register your device with apple for development.
 2.  Run `npx pod-install` to download the necessary pods.
 3.  Open the `.xcworkspace` file located in `ios` folder using XCode.
 4.  Open the info tab and add the following: 
     1.  **Privacy Camera description** - Camera permission
     2.  **Privacy Microphone description** - Mic permission
 5.  Configure code signing: https://reactnative.dev/docs/running-on-device#2-configure-code-signing
 6.  Run the project by clicking the Run button in Xcode 
-7.  Note Simulators won’t work since IOS simulator can’t access camera
+7.  Note Simulators won’t work since iOS simulator can’t access the camera
 
 ## Documentation
 

docs/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

docs/assets/highlight.css

@@ -0,0 +1,127 @@
+:root {
+    --light-hl-0: #001080;
+    --dark-hl-0: #9CDCFE;
+    --light-hl-1: #000000;
+    --dark-hl-1: #D4D4D4;
+    --light-hl-2: #AF00DB;
+    --dark-hl-2: #C586C0;
+    --light-hl-3: #A31515;
+    --dark-hl-3: #CE9178;
+    --light-hl-4: #0000FF;
+    --dark-hl-4: #569CD6;
+    --light-hl-5: #795E26;
+    --dark-hl-5: #DCDCAA;
+    --light-hl-6: #0070C1;
+    --dark-hl-6: #4FC1FF;
+    --light-hl-7: #800000;
+    --dark-hl-7: #808080;
+    --light-hl-8: #267F99;
+    --dark-hl-8: #4EC9B0;
+    --light-hl-9: #FF0000;
+    --dark-hl-9: #9CDCFE;
+    --light-hl-10: #000000FF;
+    --dark-hl-10: #D4D4D4;
+    --light-hl-11: #008000;
+    --dark-hl-11: #6A9955;
+    --light-hl-12: #000000;
+    --dark-hl-12: #C8C8C8;
+    --light-hl-13: #098658;
+    --dark-hl-13: #B5CEA8;
+    --light-hl-14: #CD3131;
+    --dark-hl-14: #F44747;
+    --light-code-background: #F5F5F5;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
+    --hl-14: var(--light-hl-14);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
+    --hl-14: var(--dark-hl-14);
+    --code-background: var(--dark-code-background);
+} }
+
+body.light {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
+    --hl-14: var(--light-hl-14);
+    --code-background: var(--light-code-background);
+}
+
+body.dark {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
+    --hl-14: var(--dark-hl-14);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+.hl-4 { color: var(--hl-4); }
+.hl-5 { color: var(--hl-5); }
+.hl-6 { color: var(--hl-6); }
+.hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
+.hl-10 { color: var(--hl-10); }
+.hl-11 { color: var(--hl-11); }
+.hl-12 { color: var(--hl-12); }
+.hl-13 { color: var(--hl-13); }
+.hl-14 { color: var(--hl-14); }
+pre, code { background: var(--code-background); }