agora-appbuilder-core 4.0.0-beta.75 → 4.0.0-beta.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.75",
+  "version": "4.0.0-beta.77",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -9,8 +9,8 @@
   ],
   "scripts": {
     "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout v3-release-fixes-encryption",
-    "deps": "cd template && npm i",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout v3-release-geo-fencing",
+    "deps": "cd template && npm i --force",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",
     "copy-vercel": "cp -r Builds/web template/dist && cp vercel.json template/dist",

package/template/_package-lock.json

@@ -57,7 +57,7 @@
         "react-native-vector-icons": "9.2.0",
         "react-native-walkthrough-tooltip": "1.4.0",
         "react-native-web": "0.19.7",
-        "react-native-webview": "^11.22.2",
+        "react-native-webview": "13.8.1",
         "react-router-dom": "5.2.0",
         "react-router-native": "5.2.0",
         "react-spring-bottom-sheet": "3.4.1",
@@ -3624,6 +3624,27 @@
         "react-native-webview": "^11.22.2"
       }
     },
+    "node_modules/@netless/react-native-bridge/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@netless/react-native-bridge/node_modules/react-native-webview": {
+      "version": "11.26.1",
+      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.26.1.tgz",
+      "integrity": "sha512-hC7BkxOpf+z0UKhxFSFTPAM4shQzYmZHoELa6/8a/MspcjEP7ukYKpuSUTLDywQditT8yI9idfcKvfZDKQExGw==",
+      "dependencies": {
+        "escape-string-regexp": "2.0.0",
+        "invariant": "2.2.4"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@netless/react-native-whiteboard": {
       "version": "0.0.14",
       "resolved": "https://registry.npmjs.org/@netless/react-native-whiteboard/-/react-native-whiteboard-0.0.14.tgz",
@@ -26542,9 +26563,9 @@
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
     "node_modules/react-native-webview": {
-      "version": "11.26.1",
-      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.26.1.tgz",
-      "integrity": "sha512-hC7BkxOpf+z0UKhxFSFTPAM4shQzYmZHoELa6/8a/MspcjEP7ukYKpuSUTLDywQditT8yI9idfcKvfZDKQExGw==",
+      "version": "13.8.1",
+      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.8.1.tgz",
+      "integrity": "sha512-7Jqm1WzWJrOWraBAXQfKtr/Uo5Jw/IJHzC40jYLwgV/eVGmLJ9BpGKw6QVw7wpRkjmTZ2Typ4B1aHJLJJQFslA==",
       "dependencies": {
         "escape-string-regexp": "2.0.0",
         "invariant": "2.2.4"
@@ -34667,6 +34688,22 @@
         "@netless/webview-bridge": "^*",
         "react-native-uuid": "^2.0.1",
         "react-native-webview": "^11.22.2"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
+        },
+        "react-native-webview": {
+          "version": "11.26.1",
+          "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.26.1.tgz",
+          "integrity": "sha512-hC7BkxOpf+z0UKhxFSFTPAM4shQzYmZHoELa6/8a/MspcjEP7ukYKpuSUTLDywQditT8yI9idfcKvfZDKQExGw==",
+          "requires": {
+            "escape-string-regexp": "2.0.0",
+            "invariant": "2.2.4"
+          }
+        }
       }
     },
     "@netless/react-native-whiteboard": {
@@ -51997,9 +52034,9 @@
       }
     },
     "react-native-webview": {
-      "version": "11.26.1",
-      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.26.1.tgz",
-      "integrity": "sha512-hC7BkxOpf+z0UKhxFSFTPAM4shQzYmZHoELa6/8a/MspcjEP7ukYKpuSUTLDywQditT8yI9idfcKvfZDKQExGw==",
+      "version": "13.8.1",
+      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.8.1.tgz",
+      "integrity": "sha512-7Jqm1WzWJrOWraBAXQfKtr/Uo5Jw/IJHzC40jYLwgV/eVGmLJ9BpGKw6QVw7wpRkjmTZ2Typ4B1aHJLJJQFslA==",
       "requires": {
         "escape-string-regexp": "2.0.0",
         "invariant": "2.2.4"

package/template/agora-rn-uikit/src/Contexts/PropsContext.tsx

@@ -129,6 +129,8 @@ export interface RtcPropsInterface {
   //   useBeforeCreate?: () => () => Promise<void>;
   // };
   geoFencing?: boolean;
+  geoFencingIncludeArea?: number;
+  geoFencingExcludeArea?: number;
   audioRoom?: boolean;
   activeSpeaker?: boolean;
   preventJoin?: boolean;
@@ -180,6 +182,8 @@ const initialValue: Partial<PropsInterface> = {
     appId: '',
     channel: '',
     geoFencing: true,
+    geoFencingIncludeArea: -1,
+    geoFencingExcludeArea: 0,
     audioRoom: false,
     preventJoin: true,
   },

package/template/agora-rn-uikit/src/Rtc/Create.tsx

@@ -32,6 +32,8 @@ const Create = ({
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
   const {
     geoFencing = true,
+    geoFencingIncludeArea = -1,
+    geoFencingExcludeArea = 0,
     audioRoom = false,
     activeSpeaker = false,
   } = rtcProps || {};
@@ -223,7 +225,9 @@ const Create = ({
               rtcProps?.appId,
               // eslint-disable-next-line no-bitwise
               //@ts-ignore
-              AreaCode.GLOB ^ AreaCode.CN,
+              geoFencingExcludeArea === 0
+                ? geoFencingIncludeArea
+                : geoFencingIncludeArea ^ geoFencingExcludeArea,
             );
           }
         } else {

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -171,10 +171,27 @@ interface RemoteStream {
   video?: IRemoteVideoTrack;
 }
 if ($config.GEO_FENCING) {
-  AgoraRTC.setArea({
-    areaCode: AREAS.GLOBAL,
-    excludedArea: AREAS.CHINA,
-  });
+  let includeArea = $config.GEO_FENCING_INCLUDE_AREA
+    ? $config.GEO_FENCING_INCLUDE_AREA
+    : AREAS.GLOBAL;
+  let excludeArea = $config.GEO_FENCING_EXCLUDE_AREA
+    ? $config.GEO_FENCING_EXCLUDE_AREA
+    : '';
+
+  try {
+    if (excludeArea) {
+      AgoraRTC.setArea({
+        areaCode: includeArea,
+        excludedArea: excludeArea,
+      });
+    } else {
+      AgoraRTC.setArea({
+        areaCode: includeArea,
+      });
+    }
+  } catch (setAeraError) {
+    console.log('error on setArea', setAeraError);
+  }
 }
 
 if ($config.LOG_ENABLED) {

package/template/configTransform.js

@@ -12,20 +12,20 @@
 let jsonFile = require('./config.json');
 let PREFIX = '$config';
 let config = {};
-Object.keys(jsonFile).map((key) => {
+Object.keys(jsonFile).map(key => {
   config[`${PREFIX}.${key}`] = jsonFile[key];
 });
 
 //find any missing config
 const defaultConfig = require('./defaultConfig');
 const filteredArray = Object.keys(defaultConfig).filter(
-  (value) => !Object.keys(jsonFile).includes(value),
+  value => !Object.keys(jsonFile).includes(value),
 );
 
 //add missing config with default value
 if (filteredArray && filteredArray?.length) {
-  console.error('config.json missing ', filteredArray);
-  filteredArray.forEach((i) => {
+  //console.error('config.json missing ', filteredArray);
+  filteredArray.forEach(i => {
     config[`${PREFIX}.${i}`] = defaultConfig[i];
   });
 }

package/template/defaultConfig.js

@@ -23,6 +23,8 @@ const DefaultConfig = {
   SLACK_CLIENT_ID: '',
   APPLE_CLIENT_ID: '',
   GEO_FENCING: true,
+  GEO_FENCING_INCLUDE_AREA: 'GLOBAL',
+  GEO_FENCING_EXCLUDE_AREA: '',
   LOG_ENABLED: true,
   EVENT_MODE: false,
   RAISE_HAND: false,

package/template/global.d.ts

@@ -69,6 +69,8 @@ interface ConfigInterface {
   EVENT_MODE: boolean;
   RAISE_HAND: boolean;
   GEO_FENCING: boolean;
+  GEO_FENCING_INCLUDE_AREA: string;
+  GEO_FENCING_EXCLUDE_AREA: string;
   LOG_ENABLED: boolean;
   AUDIO_ROOM: boolean;
   PRIMARY_ACTION_BRAND_COLOR: string;

package/template/ios/HelloWorld/HelloWorldDebug.entitlements

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>com.apple.developer.associated-domains</key>
+	<array>
+		<string>applinks:FRONTEND_ENDPOINT_BASE</string>
+	</array>
+</dict>
+</plist>

package/template/ios/HelloWorld.xcodeproj/project.pbxproj

@@ -570,6 +570,7 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/react-native-whiteboard/Whiteboard.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -591,6 +592,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Whiteboard.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -722,6 +724,7 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/react-native-whiteboard/Whiteboard.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -743,6 +746,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Whiteboard.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

package/template/ios/Podfile.lock

@@ -408,8 +408,15 @@ PODS:
   - react-native-agora (3.7.2-rc.3):
     - AgoraRtcEngine_Special_iOS (= 3.7.2.4)
     - React-Core
+  - react-native-document-picker (9.1.0):
+    - React-Core
   - react-native-keep-awake (4.0.0):
     - React
+  - react-native-webview (13.8.1):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core
+  - react-native-whiteboard (0.0.14):
+    - React-Core
   - React-NativeModulesApple (0.72.4):
     - hermes-engine
     - React-callinvoker
@@ -535,6 +542,8 @@ PODS:
     - React-Core
   - RNExitApp (1.1.0):
     - React
+  - RNFS (2.20.0):
+    - React-Core
   - RNGestureHandler (2.8.0):
     - React-Core
   - RNInAppBrowser (3.5.1):
@@ -628,7 +637,10 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-agora (from `../node_modules/react-native-agora`)
+  - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-keep-awake (from `../node_modules/react-native-keep-awake`)
+  - react-native-webview (from `../node_modules/react-native-webview`)
+  - "react-native-whiteboard (from `../node_modules/@netless/react-native-whiteboard`)"
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -652,6 +664,7 @@ DEPENDENCIES:
   - "RNCCheckbox (from `../node_modules/@react-native-community/checkbox`)"
   - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
   - RNExitApp (from `../node_modules/react-native-exit-app`)
+  - RNFS (from `../node_modules/react-native-fs`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNInAppBrowser (from `../node_modules/react-native-inappbrowser-reborn`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -730,8 +743,14 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-agora:
     :path: "../node_modules/react-native-agora"
+  react-native-document-picker:
+    :path: "../node_modules/react-native-document-picker"
   react-native-keep-awake:
     :path: "../node_modules/react-native-keep-awake"
+  react-native-webview:
+    :path: "../node_modules/react-native-webview"
+  react-native-whiteboard:
+    :path: "../node_modules/@netless/react-native-whiteboard"
   React-NativeModulesApple:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
   React-perflogger:
@@ -778,6 +797,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/clipboard"
   RNExitApp:
     :path: "../node_modules/react-native-exit-app"
+  RNFS:
+    :path: "../node_modules/react-native-fs"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNInAppBrowser:
@@ -834,7 +855,10 @@ SPEC CHECKSUMS:
   React-jsinspector: aaed4cf551c4a1c98092436518c2d267b13a673f
   React-logger: da1ebe05ae06eb6db4b162202faeafac4b435e77
   react-native-agora: 16de7d9657b24dcf1ea6edebb30d06fe3e050c68
+  react-native-document-picker: b4f4a23b73f864ce17965b284c0757648993805b
   react-native-keep-awake: afad8a51dfef9fe9655a6344771be32c8596d774
+  react-native-webview: bdc091de8cf7f8397653e30182efcd9f772e03b3
+  react-native-whiteboard: d56d2ffa0392b8572bfc613954845e48c6dfd38e
   React-NativeModulesApple: edb5ace14f73f4969df6e7b1f3e41bef0012740f
   React-perflogger: 496a1a3dc6737f964107cb3ddae7f9e265ddda58
   React-RCTActionSheet: 02904b932b50e680f4e26e7a686b33ebf7ef3c00
@@ -858,6 +882,7 @@ SPEC CHECKSUMS:
   RNCCheckbox: 75255b03e604bbcc26411eb31c4cbe3e3865f538
   RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495
   RNExitApp: c4e052df2568b43bec8a37c7cd61194d4cfee2c3
+  RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 62232ba8f562f7dea5ba1b3383494eb5bf97a4d3
   RNInAppBrowser: 48b95ba7a4eaff5cc223bca338d3e319561dbd1b
   RNReanimated: 726395a2fa2f04cea340274ba57a4e659bc0d9c1

package/template/package.json

@@ -97,7 +97,7 @@
     "react-native-vector-icons": "9.2.0",
     "react-native-walkthrough-tooltip": "1.4.0",
     "react-native-web": "0.19.7",
-    "react-native-webview": "^11.22.2",
+    "react-native-webview": "13.8.1",
     "react-router-dom": "5.2.0",
     "react-router-native": "5.2.0",
     "react-spring-bottom-sheet": "3.4.1",

package/template/src/components/PinnedVideo.tsx

@@ -24,7 +24,7 @@ import {useContent} from 'customization-api';
 import RenderComponent from '../pages/video-call/RenderComponent';
 import IconButton from '../atoms/IconButton';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {BREAKPOINTS, isMobileUA} from '../utils/common';
+import {BREAKPOINTS, isMobileUA, isWebInternal} from '../utils/common';
 import {DispatchContext} from '../../agora-rn-uikit';
 import {useVideoCall} from '../components/useVideoCall';
 import useActiveSpeaker from '../utils/useActiveSpeaker';
@@ -108,7 +108,9 @@ const PinnedVideo = ({renderData}) => {
                     marginBottom: 8,
                   }
             }>
-            {secondaryPinnedUid ? (
+            {secondaryPinnedUid &&
+            secondaryPinnedUid !== pinnedUid &&
+            secondaryPinnedUid !== maxUid ? (
               <Pressable
                 disabled={true}
                 style={
@@ -178,7 +180,7 @@ const PinnedVideo = ({renderData}) => {
               );
             })}
           </ScrollView>
-          {$config.ACTIVE_SPEAKER && !isOnTop && (
+          {$config.ACTIVE_SPEAKER && !isOnTop && isWebInternal() && (
             <View
               style={
                 isSidePinnedlayout

package/template/src/components/StorageContext.tsx

@@ -28,6 +28,7 @@ export interface StoreInterface {
     rememberedDevicesListEntries
   >;
   activeDeviceId: Record<MediaDeviceInfo['kind'], string>;
+  whiteboardNativeInfoToast?: boolean;
 }
 
 export interface StorageContextInterface {
@@ -36,6 +37,7 @@ export interface StorageContextInterface {
 }
 
 export const initStoreValue: StoreInterface = {
+  whiteboardNativeInfoToast: false,
   token: null,
   displayName: '',
   selectedLanguageCode: '',
@@ -78,7 +80,7 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
           setReady(true);
         } else {
           const storeFromStorage = JSON.parse(storeString);
-          Object.keys(initStoreValue).forEach((key) => {
+          Object.keys(initStoreValue).forEach(key => {
             if (!storeFromStorage[key]) {
               storeFromStorage[key] = initStoreValue[key];
             }
@@ -87,6 +89,7 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
           if (!ENABLE_AUTH) {
             storeFromStorage['token'] = null;
           }
+          storeFromStorage['whiteboardNativeInfoToast'] = false;
           setStore(storeFromStorage);
           setReady(true);
         }

package/template/src/components/whiteboard/WhiteboardConfigure.native.tsx

@@ -77,6 +77,8 @@ export interface whiteboardContextInterface {
   getWhiteboardUid: () => number;
   whiteboardStartedFirst?: boolean;
   clearAllCallback: () => void;
+  isWhiteboardOnFullScreen?: boolean;
+  setWhiteboardOnFullScreen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export interface WhiteboardPropsInterface {
@@ -90,6 +92,7 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
   const [boardColor, setBoardColor] = useState<BoardColor>(BoardColor.White);
   // Defines whiteboard room state, whether disconnected, Connected, Connecting etc.
   const [whiteboardRoomState, setWhiteboardRoomState] = useState();
+  const [isWhiteboardOnFullScreen, setWhiteboardOnFullScreen] = useState(false);
   const whiteboardUidRef = useRef(Date.now());
   const whiteboardRoom = useRef({});
 
@@ -109,6 +112,12 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
     return whiteboardUidRef?.current;
   };
 
+  useEffect(() => {
+    if (!whiteboardActive && isWhiteboardOnFullScreen) {
+      setWhiteboardOnFullScreen(false);
+    }
+  }, [whiteboardActive]);
+
   const clearAllCallback = () => {};
   return (
     <whiteboardContext.Provider
@@ -126,6 +135,8 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
         insertImageIntoWhiteboard,
         whiteboardStartedFirst,
         clearAllCallback,
+        isWhiteboardOnFullScreen,
+        setWhiteboardOnFullScreen,
       }}>
       {props.children}
     </whiteboardContext.Provider>

package/template/src/components/whiteboard/WhiteboardConfigure.tsx

@@ -93,6 +93,8 @@ export interface whiteboardContextInterface {
   getWhiteboardUid: () => number;
   whiteboardStartedFirst?: boolean;
   clearAllCallback?: () => void;
+  isWhiteboardOnFullScreen?: boolean;
+  setWhiteboardOnFullScreen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export interface WhiteboardPropsInterface {
@@ -101,6 +103,7 @@ export interface WhiteboardPropsInterface {
 
 const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
   // Defines intent, whether whiteboard should be active or not
+  const [isWhiteboardOnFullScreen, setWhiteboardOnFullScreen] = useState(false);
   const [whiteboardActive, setWhiteboardActive] = useState(false);
   const [whiteboardStartedFirst, setWhiteboardStartedFirst] = useState(false);
   const [boardColor, setBoardColor] = useState<BoardColor>(BoardColor.White);
@@ -430,6 +433,8 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
         insertImageIntoWhiteboard,
         whiteboardStartedFirst,
         clearAllCallback,
+        isWhiteboardOnFullScreen,
+        setWhiteboardOnFullScreen,
       }}>
       {props.children}
     </whiteboardContext.Provider>

package/template/src/components/whiteboard/WhiteboardView.native.tsx

@@ -10,37 +10,80 @@
 *********************************************
 */
 
-import React, {useContext, useRef} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {whiteboardContext} from './WhiteboardConfigure';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, Text} from 'react-native';
 import {useRoomInfo} from 'customization-api';
 import {
   WhiteboardView as NativeWhiteboardView,
   RoomCallbackHandler,
 } from '@netless/react-native-whiteboard';
 import WhiteboardWidget from './WhiteboardWidget';
+import {
+  whiteboardInitializingText,
+  whiteboardNativeInfoToastHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {useString} from '../../utils/useString';
+import ThemeConfig from '../../theme';
+import Toast from '../../../react-native-toast-message';
+import {useContent} from 'customization-api';
+import StorageContext from '../StorageContext';
 
 interface WhiteboardViewInterface {}
 
 const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
-  const {getWhiteboardUid, whiteboardActive} = useContext(whiteboardContext);
+  const {getWhiteboardUid, whiteboardActive, isWhiteboardOnFullScreen} =
+    useContext(whiteboardContext);
+  const {setStore, store} = useContext(StorageContext);
+  const [isLoading, setIsLoading] = useState(true);
   const roomRef = useRef({});
   const sdkRef = useRef({});
   const {
     data: {whiteboard: {room_token, room_uuid} = {}},
   } = useRoomInfo();
+  const whiteboardInitializing = useString(whiteboardInitializingText)();
+  const whiteboardNativeInfoToastHeadingText = useString(
+    whiteboardNativeInfoToastHeading,
+  )();
+
+  useEffect(() => {
+    if (!store?.whiteboardNativeInfoToast) {
+      Toast.show({
+        leadingIconName: 'info',
+        type: 'info',
+        text1: whiteboardNativeInfoToastHeadingText,
+        visibilityTime: 5000,
+        primaryBtn: null,
+        secondaryBtn: null,
+        leadingIcon: null,
+      });
+      setStore(prevState => {
+        return {
+          ...prevState,
+          whiteboardNativeInfoToast: true,
+        };
+      });
+    }
+  }, [store]);
 
   const roomCallbacks: Partial<RoomCallbackHandler> = {
-    onPhaseChanged: e => console.log('debugging onPhaseChanged changed: ', e),
-    onRoomStateChanged: e =>
-      console.log('debugging onRoomStateChanged changed: ', e),
-    onDisconnectWithError: e =>
-      console.log('debugging onDisconnectWithError: ', e),
+    onPhaseChanged: e => {
+      console.log('debugging onPhaseChanged changed: ', e);
+      setIsLoading(false);
+    },
+    // onRoomStateChanged: e =>
+    //   console.log('debugging onRoomStateChanged changed: ', e),
+    onDisconnectWithError: e => {
+      console.log('debugging onDisconnectWithError: ', e);
+      setIsLoading(false);
+    },
   };
 
   const sdkCallbacks = {
-    onSetupFail: error =>
-      console.log('debugging whiteboard sdk setup fail: ', error),
+    onSetupFail: error => {
+      console.log('debugging whiteboard sdk setup fail: ', error);
+      setIsLoading(false);
+    },
   };
 
   const joinRoomCallback = (aRoom, aSdk, error) => {
@@ -48,7 +91,7 @@ const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
     sdkRef.current = aSdk;
 
     console.log('debugging aRoom', aRoom);
-
+    setIsLoading(false);
     if (error) {
       console.log(error);
     } else {
@@ -61,14 +104,29 @@ const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
   };
 
   return (
-    <View style={style.whiteboardContainer}>
+    <View
+      style={
+        isWhiteboardOnFullScreen
+          ? style.whiteboardContainerLandscape
+          : style.whiteboardContainer
+      }>
       {whiteboardActive ? (
         <>
+          {isLoading ? (
+            <View style={style.placeholder}>
+              <Text style={style.loadingTextStyle}>
+                {whiteboardInitializing}
+              </Text>
+            </View>
+          ) : (
+            <></>
+          )}
           <WhiteboardWidget whiteboardRoom={roomRef} />
           <NativeWhiteboardView
             style={style.whiteboard}
             sdkConfig={{
               appIdentifier: $config.WHITEBOARD_APPIDENTIFIER,
+              userCursor: true,
             }}
             roomConfig={{
               uid: getWhiteboardUid()?.toString(),
@@ -90,11 +148,26 @@ const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
 };
 
 const style = StyleSheet.create({
+  placeholder: {
+    position: 'absolute',
+    top: '30%',
+    alignItems: 'center', //Centered horizontally
+    flex: 1,
+    zIndex: 999,
+  },
+  whiteboardContainerLandscape: {
+    flex: 1,
+    position: 'relative',
+    alignSelf: 'center',
+    alignItems: 'center',
+    transform: [{rotate: '90deg'}],
+  },
   whiteboardContainer: {
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
     backgroundColor: 'black',
+    position: 'relative',
   },
   whiteboard: {
     aspectRatio: 16.0 / 9.0,
@@ -104,6 +177,12 @@ const style = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
+  loadingTextStyle: {
+    color: $config.HARD_CODED_BLACK_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.small,
+    fontWeight: '600',
+  },
 });
 
 export default WhiteboardView;

package/template/src/components/whiteboard/WhiteboardWidget.tsx

@@ -22,7 +22,13 @@ import {
 import {whiteboardContext, BoardColor} from './WhiteboardConfigure';
 import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
-import {isMobileUA, isWebInternal, randomString} from '../../utils/common';
+import {
+  isIOS,
+  isMobileUA,
+  isWebInternal,
+  randomString,
+  isAndroid,
+} from '../../utils/common';
 import Toast from '../../../react-native-toast-message';
 import ThemeConfig from '../../theme';
 import {DefaultLayouts} from '../../pages/video-call/DefaultLayouts';
@@ -69,8 +75,12 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
   const exportsuccess = useString(whiteboardExportSuccessToastHeading)();
 
   const [isInProgress, setIsInProgress] = useState(false);
-  const {setBoardColor, boardColor, getWhiteboardUid} =
-    useContext(whiteboardContext);
+  const {
+    setBoardColor,
+    boardColor,
+    getWhiteboardUid,
+    isWhiteboardOnFullScreen,
+  } = useContext(whiteboardContext);
   const {
     data: {whiteboard: {room_uuid} = {}},
   } = useRoomInfo();
@@ -199,7 +209,8 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
     <>
       <View style={style.toolboxContainer}>
         <View style={style.toolboxNew} nativeID="toolbox">
-          {!whiteboardRoom.current?.isWritable ? (
+          {(!whiteboardRoom.current?.isWritable || isIOS() || isAndroid()) &&
+          !isWhiteboardOnFullScreen ? (
             <View style={style.viewOnlyContainerStyle}>
               <ImageIcon
                 name="view-only"

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -380,6 +380,9 @@ export const whiteboardToolboxEraseText = 'whiteboardToolboxEraseText';
 export const whiteboardToolboxUploadText = 'whiteboardToolboxUploadText';
 export const whiteboardToolboxClearAllText = 'whiteboardToolboxClearAllText';
 
+export const whiteboardNativeInfoToastHeading =
+  'whiteboardNativeInfoToastHeading';
+
 export const sttSpokenLanguageToastHeading = `${stt}SpokenLanguageToastHeading`;
 export const sttSpokenLanguageToastSubHeading = `${stt}SpokenLanguageToastSubHeading`;
 
@@ -679,6 +682,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [whiteboardFileUploadInfoToastHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
   [whiteboardFileUploadTypeErrorToastHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
   [whiteboardFileUploadTypeErrorToastSubHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
+  [whiteboardNativeInfoToastHeading]?: I18nBaseType;
 
   [sttSpokenLanguageToastHeading]?: I18nBaseType<sttSpokenLanguageToastHeadingDataType>;
   [sttSpokenLanguageToastSubHeading]?: I18nBaseType<sttSpokenLanguageToastSubHeadingDataInterface>;
@@ -1167,4 +1171,6 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [videoRoomPeopleCountTooltipHostText]: 'Host',
   [videoRoomPeopleCountTooltipAttendeeText]: ({eventMode}) =>
     eventMode ? 'Audience' : 'Attendee',
+  [whiteboardNativeInfoToastHeading]:
+    'Use two finger to move around the whiteboard',
 };

package/template/src/pages/VideoCall.tsx

@@ -80,6 +80,37 @@ import {isWeb} from '../utils/common';
 import {videoRoomStartingCallText} from '../language/default-labels/videoCallScreenLabels';
 import {useString} from '../utils/useString';
 
+const NativeAreaCode = {
+  /**
+   * China.
+   */
+  CHINA: 1,
+  /**
+   * Asia, excluding Mainland China.
+   */
+  ASIA: 8,
+  /**
+   * North America.
+   */
+  NORTH_AMERICA: 2,
+  /**
+   * Europe.
+   */
+  EUROPE: 4,
+  /**
+   * Japan.
+   */
+  JAPAN: 16,
+  /**
+   * India.
+   */
+  INDIA: 32,
+  /**
+   * Global.
+   */
+  GLOBAL: -1,
+};
+
 enum RnEncryptionEnum {
   /**
    * @deprecated
@@ -157,6 +188,21 @@ const VideoCall: React.FC = () => {
     clearState,
   } = useContext(SdkApiContext);
 
+  let geoFencingIncludeArea = -1;
+  let geoFencingExcludeArea = 0;
+
+  try {
+    geoFencingIncludeArea = NativeAreaCode[$config.GEO_FENCING_INCLUDE_AREA];
+  } catch (error) {
+    console.log('error on native geoFencingIncludeArea', error);
+  }
+
+  try {
+    geoFencingExcludeArea = NativeAreaCode[$config.GEO_FENCING_EXCLUDE_AREA];
+  } catch (error) {
+    console.log('error on native geoFencingExcludeArea', error);
+  }
+
   // commented for v1 release
   //const lifecycle = useCustomization((data) => data.lifecycle);
   const [rtcProps, setRtcProps] = React.useState({
@@ -174,6 +220,8 @@ const VideoCall: React.FC = () => {
       : false,
     role: ClientRole.Broadcaster,
     geoFencing: $config.GEO_FENCING,
+    geoFencingIncludeArea: geoFencingIncludeArea,
+    geoFencingExcludeArea: geoFencingExcludeArea,
     audioRoom: $config.AUDIO_ROOM,
     activeSpeaker: $config.ACTIVE_SPEAKER,
     preferredCameraId:
@@ -428,8 +476,7 @@ const VideoCall: React.FC = () => {
                                                                 <VideoMeetingDataProvider>
                                                                   <VideoCallProvider>
                                                                     <DisableChatProvider>
-                                                                      {$config.ENABLE_WHITEBOARD &&
-                                                                      isWebInternal() ? (
+                                                                      {$config.ENABLE_WHITEBOARD ? (
                                                                         <WhiteboardConfigure>
                                                                           <VideoCallScreen />
                                                                         </WhiteboardConfigure>

package/template/src/pages/video-call/VideoCallMobileView.tsx

@@ -36,10 +36,14 @@ import NavbarMobile from '../../components/NavbarMobile';
 import {useVB} from '../../components/virtual-background/useVB';
 import VBPanel from '../../components/virtual-background/VBPanel';
 import {WhiteboardListener} from '../../components/Controls';
+import {useWhiteboard} from '../../components/whiteboard/WhiteboardConfigure';
+import WhiteboardView from '../../components/whiteboard/WhiteboardView';
 
 const VideoCallMobileView = props => {
   const {native = true} = props;
+  const {customContent} = useContent();
   const {isScreenShareOnFullView, screenShareData} = useScreenContext();
+  const {getWhiteboardUid, isWhiteboardOnFullScreen} = useWhiteboard();
 
   const {RtcEngineUnsafe} = useContext(RtcContext);
   const {dispatch} = useContext(DispatchContext);
@@ -118,17 +122,37 @@ const VideoCallMobileView = props => {
     return <VBPanel />;
   }
 
+  if (isWhiteboardOnFullScreen) {
+    return (
+      <>
+        {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
+        <VideoRenderer
+          user={{
+            uid: customContent[getWhiteboardUid()]?.uid,
+            type: 'whiteboard',
+            video: 0,
+            audio: 0,
+            parentUid: undefined,
+            name: 'Whiteboard',
+            muted: undefined,
+          }}
+          CustomChild={WhiteboardView}
+        />
+      </>
+    );
+  }
+
   return isScreenShareOnFullView &&
     maxScreenShareUid &&
     defaultContent[maxScreenShareUid] &&
     defaultContent[maxScreenShareUid]?.video ? (
     <>
-      {!native ? <WhiteboardListener /> : <></>}
+      {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
       <VideoRenderer user={defaultContent[maxScreenShareUid]} />
     </>
   ) : (
     <>
-      {!native ? <WhiteboardListener /> : <></>}
+      {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
       <VideoCallView />
     </>
   );

package/template/src/pages/video-call/VideoRenderer.tsx

@@ -68,7 +68,12 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   const videoMoreMenuRef = useRef(null);
   const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
   const {setVideoTileInViewPortState} = useVideoCall();
-  const {getWhiteboardUid = () => 0} = useWhiteboard();
+  const {
+    getWhiteboardUid = () => 0,
+    isWhiteboardOnFullScreen,
+    setWhiteboardOnFullScreen,
+    whiteboardActive,
+  } = useWhiteboard();
   const [landscapeMode, setLandscapeMode] = useState(
     isAndroid() || isIOS() ? true : false,
   );
@@ -125,8 +130,13 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   }, [screenShareData, isScreenShareOnFullView]);
 
   const isNativeScreenShareActive =
-    (isAndroid() || isIOS()) && isScreenshareActive;
-  const enableExpandButton = isNativeScreenShareActive ? false : true;
+    (isAndroid() || isIOS() || isMobileUA()) && user?.type === 'screenshare';
+
+  const isNativeWhiteboardActive =
+    (isAndroid() || isIOS() || isMobileUA()) && whiteboardActive;
+
+  const enableExpandButton =
+    isNativeScreenShareActive || isNativeWhiteboardActive ? true : false;
 
   const {enablePinForMe} = useVideoCall();
 
@@ -191,13 +201,15 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           ) : (
             <></>
           )}
-          {enableExpandButton &&
-          screenShareData &&
-          screenShareData?.[user.uid] &&
-          isMobileUA() ? (
+          {(enableExpandButton &&
+            screenShareData &&
+            screenShareData?.[user.uid] &&
+            isMobileUA()) ||
+          (isMobileUA() && enableExpandButton && user?.type == 'whiteboard') ? (
             <IconButton
               containerStyle={
-                isScreenShareOnFullView && landscapeMode
+                (isScreenShareOnFullView || isWhiteboardOnFullScreen) &&
+                landscapeMode
                   ? {
                       position: 'absolute',
                       top: 8,
@@ -206,6 +218,14 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                       zIndex: 999,
                       elevation: 999,
                     }
+                  : user?.type == 'whiteboard'
+                  ? {
+                      position: 'absolute',
+                      top: 8,
+                      left: 8,
+                      zIndex: 999,
+                      elevation: 999,
+                    }
                   : {
                       position: 'absolute',
                       top: 8,
@@ -220,18 +240,22 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                     }
               }
               onPress={() => {
-                setScreenShareOnFullView(
-                  !screenShareData[user.uid]?.isExpanded,
-                );
-                setScreenShareData(prevState => {
-                  return {
-                    ...prevState,
-                    [user.uid]: {
-                      ...prevState[user.uid],
-                      isExpanded: !prevState[user.uid]?.isExpanded,
-                    },
-                  };
-                });
+                if (user?.type == 'whiteboard') {
+                  setWhiteboardOnFullScreen(!isWhiteboardOnFullScreen);
+                } else {
+                  setScreenShareOnFullView(
+                    !screenShareData[user.uid]?.isExpanded,
+                  );
+                  setScreenShareData(prevState => {
+                    return {
+                      ...prevState,
+                      [user.uid]: {
+                        ...prevState[user.uid],
+                        isExpanded: !prevState[user.uid]?.isExpanded,
+                      },
+                    };
+                  });
+                }
               }}
               iconProps={{
                 iconContainerStyle: {
@@ -241,6 +265,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                   transform: [{rotate: '-45deg'}],
                 },
                 name:
+                  isWhiteboardOnFullScreen ||
                   screenShareData?.[user?.uid]?.isExpanded === true
                     ? 'collapse'
                     : 'expand',
@@ -284,7 +309,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                       avatarSize,
                     );
                   }}
-                  user={isNativeScreenShareActive ? {...user, video: 0} : user}
+                  user={user}
                   containerStyle={{
                     width:
                       landscapeMode && isScreenShareOnFullView
@@ -292,8 +317,6 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                         : '100%',
                     height:
                       landscapeMode && isScreenShareOnFullView ? width : '100%',
-                    // width: '100%',
-                    // height: '100%',
                     borderRadius: 4,
                     overflow: 'hidden',
                   }}
@@ -307,6 +330,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           </ZoomableWrapper>
           {(!isScreenShareOnFullView && !CustomChild) ||
           (CustomChild &&
+            !isWhiteboardOnFullScreen &&
             (pinnedUid !== getWhiteboardUid() || currentLayout === 'grid')) ? (
             <VideoContainerProvider value={{videoTileWidth}}>
               <NameWithMicIcon
@@ -325,7 +349,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           ) : (
             <></>
           )}
-          {!isScreenShareOnFullView &&
+          {!(isScreenShareOnFullView || isWhiteboardOnFullScreen) &&
           // user.uid !== rtcProps?.screenShareUid &&
           (isHovered || actionMenuVisible || isMobileUA()) ? (
             <MoreMenu