agora-appbuilder-core 4.0.0-ms.8 → 4.0.0-spl.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-ms.8",
+  "version": "4.0.0-spl.10",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "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 feature/redesign/ui-kit-v1",
+    "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 mavtek-spl-uikit",
     "deps": "cd template && npm i",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

package/template/Gulpfile.js

@@ -460,11 +460,11 @@ module.exports.androidWin = series(
 );
 
 module.exports.test = series(
-  general.generateNpmPackage,
-  // general.typescript,
-  // general.typescriptFix,
-  // reactSdk.typescript,
-  // reactSdk.typescriptFix,
-  // webSdk.typescript,
-  // webSdk.typescriptFix,
+  general.createBuildDirectory,
+  general.generateApiTypedefs,
+  general.bundleApiTypedefs,
+  webSdk.generateSdkTypedefs,
+  webSdk.bundleSdkTypedefs,
+  general.cleanTempFiles,
+  general.genTsDefs,
 );

package/template/_package-lock.json

@@ -25,7 +25,6 @@
         "electron-updater": "4.3.9",
         "exponential-backoff": "3.1.0",
         "graphql": "15.5.0",
-        "jwt-decode": "3.1.2",
         "nanoevents": "7.0.1",
         "nanoid": "4.0.0",
         "nosleep.js": "0.12.0",
@@ -34,7 +33,6 @@
         "react-is": "18.0.0",
         "react-native": "0.64",
         "react-native-agora": "3.7.1",
-        "react-native-exit-app": "1.1.0",
         "react-native-gesture-handler": "2.8.0",
         "react-native-hyperlink": "0.0.19",
         "react-native-inappbrowser-reborn": "3.5.1",
@@ -19421,11 +19419,6 @@
       "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==",
       "dev": true
     },
-    "node_modules/jwt-decode": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
-      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
-    },
     "node_modules/keyv": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@@ -23560,11 +23553,6 @@
         "nullthrows": "^1.1.1"
       }
     },
-    "node_modules/react-native-exit-app": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/react-native-exit-app/-/react-native-exit-app-1.1.0.tgz",
-      "integrity": "sha512-Spne19zfMfJvnUTX909EHUqWMk69rATtLJq9XMBGpNSHhx0M7v5yetx2Z87egBhLOqQm+CWfD/oxWzDG8rbIQA=="
-    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.8.0.tgz",
@@ -44628,11 +44616,6 @@
       "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==",
       "dev": true
     },
-    "jwt-decode": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
-      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
-    },
     "keyv": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@@ -48028,11 +48011,6 @@
         "nullthrows": "^1.1.1"
       }
     },
-    "react-native-exit-app": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/react-native-exit-app/-/react-native-exit-app-1.1.0.tgz",
-      "integrity": "sha512-Spne19zfMfJvnUTX909EHUqWMk69rATtLJq9XMBGpNSHhx0M7v5yetx2Z87egBhLOqQm+CWfD/oxWzDG8rbIQA=="
-    },
     "react-native-gesture-handler": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.8.0.tgz",

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

@@ -21,9 +21,14 @@ const Create = ({
   children,
 }: {
   dispatch: DispatchType;
-  children: (engine: React.MutableRefObject<RtcEngine>) => JSX.Element;
+  children: (
+    engine: React.MutableRefObject<RtcEngine>,
+    tracksReady: boolean,
+  ) => JSX.Element;
 }) => {
+  const mutexLock = useRef(false);
   const [ready, setReady] = useState(false);
+  const [tracksReady, setTracksReady] = useState(false);
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
   const {
     geoFencing = true,
@@ -186,14 +191,15 @@ const Create = ({
       mode == ChannelProfile.LiveBroadcasting &&
       rtcProps?.role == ClientRole.Audience
     ) {
-      enableVideoAndAudioWithDisabledState();
+      await enableVideoAndAudioWithDisabledState();
     } else {
-      enableVideoAndAudioWithEnabledState();
+      await enableVideoAndAudioWithEnabledState();
     }
   };
 
   useEffect(() => {
     async function init() {
+      mutexLock.current = true;
       if (Platform.OS === 'android') {
         //Request required permissions from Android
         await requestCameraAndAudioPermission(audioRoom);
@@ -283,8 +289,10 @@ const Create = ({
             Platform.OS === 'web'
           )
         ) {
-          await enableVideoAndAudioWithInitialStates();
-          isVideoEnabledRef.current = true;
+          enableVideoAndAudioWithInitialStates().then(() => {
+            setTracksReady(true);
+            isVideoEnabledRef.current = true;
+          });
         }
 
         engine.current.addListener(
@@ -375,8 +383,11 @@ const Create = ({
       } catch (e) {
         console.error(e);
       }
+      mutexLock.current = false;
+    }
+    if (!mutexLock.current) {
+      init();
     }
-    init();
     return () => {
       /**
        * if condition add for websdk issue
@@ -391,7 +402,10 @@ const Create = ({
 
   useEffect(() => {
     const toggleRole = async () => {
-      if (mode == ChannelProfile.LiveBroadcasting) {
+      if (
+        mode == ChannelProfile.LiveBroadcasting &&
+        engine.current.setClientRole // Check if engine initialized
+      ) {
         if (rtcProps.role == ClientRole.Broadcaster) {
           await engine.current?.setClientRole(ClientRole.Broadcaster);
           // isVideoEnabledRef checks if the permission is already taken once
@@ -453,7 +467,7 @@ const Create = ({
     <>
       {
         // Render children once RTCEngine has been initialized
-        ready && engine ? children(engine) : <></>
+        ready && engine ? children(engine, tracksReady) : <></>
       }
     </>
   );

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

@@ -10,7 +10,8 @@ const Join: React.FC<{
   engineRef: React.MutableRefObject<RtcEngine>;
   uidState: RenderStateInterface;
   dispatch: DispatchType;
-}> = ({children, precall, engineRef, uidState, dispatch}) => {
+  tracksReady: boolean;
+}> = ({children, precall, engineRef, uidState, dispatch, tracksReady}) => {
   let joinState = useRef(false);
   const {rtcProps} = useContext(PropsContext);
   const {audioRoom = false} = rtcProps;
@@ -19,6 +20,13 @@ const Join: React.FC<{
   //   ? rtcProps.lifecycle.useBeforeJoin()
   //   : null;
 
+  useEffect(() => {
+    if (joinState.current && tracksReady && Platform.OS === 'web') {
+      //@ts-ignore
+      engineRef.current.publish();
+    }
+  }, [tracksReady]);
+
   useEffect(() => {
     const engine = engineRef.current;
     async function leave() {

package/template/agora-rn-uikit/src/RtcConfigure.tsx

@@ -332,12 +332,14 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   return (
     <Create dispatch={dispatch}>
-      {(engineRef) => (
+      {(engineRef, tracksReady) => (
         <Join
           precall={!rtcProps.callActive}
           engineRef={engineRef}
           uidState={uidState}
-          dispatch={dispatch}>
+          dispatch={dispatch}
+          tracksReady={tracksReady}
+          >
           <RtcProvider
             value={{
               RtcEngine: engineRef.current,

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

@@ -730,11 +730,11 @@ export default class RtcEngine {
 
   async changeSpeaker(speakerId, callback, error) {
     try {
-      this.speakerDeviceId = speakerId;
       // setting sepeaker for all remote stream (previously joined users)
       this.remoteStreams?.forEach((stream, uid, map) => {
         stream?.audio?.setPlaybackDevice(speakerId);
       });
+      this.speakerDeviceId = speakerId;
       callback(speakerId);
     } catch (e) {
       error(e);

package/template/customization-api/typeDefinition.ts

@@ -101,7 +101,8 @@ export type ComponentsInterface = {
    */
   appRoot?: React.ComponentType;
   // commented for v1 release
-  //precall?: PreCallInterface | React.ComponentType;
+  // precall?: PreCallInterface | React.ComponentType;
+  precall?: React.ComponentType;
   //create?: React.ComponentType;
   //share?: React.ComponentType;
   //join?: React.ComponentType;

package/template/global.d.ts

@@ -98,9 +98,7 @@ interface ConfigInterface {
   ICON_BG_COLOR: string;
   TOOLBAR_COLOR: string;
   ACTIVE_SPEAKER: boolean;
-  ENABLE_TOKEN_AUTH: boolean;
-  ENABLE_IDP_AUTH: boolean;
-  PROJECT_ID: string;
+  TOAST_NOTIFICATIONS: boolean;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

package/template/index.wsdk.tsx

@@ -3,31 +3,13 @@ import SDKAppWrapper, {
   AppBuilderSdkApi,
   AppBuilderSdkApiInterface,
 } from './src/SDKAppWrapper';
-import SDKEvents from './src/utils/SdkEvents';
 import React from 'react';
 import * as RN from 'react-native-web';
 import './src/assets/font-styles.css';
 export * from 'customization-api';
 export * from 'customization-implementation';
 
-interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {}
-
-const clearEvent = {
-  clear: () => {},
-};
-
-const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = {
-  ...AppBuilderSdkApi,
-  // Override customize function for web-sdk
-  customize: (customization) => {
-    SDKEvents.emit('addFpe', customization);
-    clearEvent.clear = SDKEvents.on('addFpeInit', () => {
-      console.log('addFpeInit called');
-      SDKEvents.emit('addFpe', customization);
-      clearEvent.clear();
-    });
-  },
-};
+const AppBuilderWebSdkApi: AppBuilderSdkApiInterface = AppBuilderSdkApi;
 
 // init code
 class AppBuilder extends HTMLElement {

package/template/package.json

@@ -65,7 +65,6 @@
     "electron-updater": "4.3.9",
     "exponential-backoff": "3.1.0",
     "graphql": "15.5.0",
-    "jwt-decode": "3.1.2",
     "nanoevents": "7.0.1",
     "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",
@@ -74,7 +73,6 @@
     "react-is": "18.0.0",
     "react-native": "0.64",
     "react-native-agora": "3.7.1",
-    "react-native-exit-app": "1.1.0",
     "react-native-gesture-handler": "2.8.0",
     "react-native-hyperlink": "0.0.19",
     "react-native-inappbrowser-reborn": "3.5.1",

package/template/src/App.tsx

@@ -11,7 +11,18 @@
 */
 import React, {useState, useContext} from 'react';
 import {Platform} from 'react-native';
+import Join from './pages/Join';
+import VideoCall from './pages/VideoCall';
+import Create from './pages/Create';
+import {Route, Switch, Redirect} from './components/Router';
+import PrivateRoute from './components/PrivateRoute';
+import OAuth from './components/OAuth';
+import StoreToken from './components/StoreToken';
+import {shouldAuthenticate} from './utils/common';
 import KeyboardManager from 'react-native-keyboard-manager';
+// commented for v1 release
+//import {CustomRoutesInterface, CUSTOM_ROUTES_PREFIX} from 'customization-api';
+//import {useCustomization} from 'customization-implementation';
 import AppWrapper from './AppWrapper';
 import {
   MeetingInfoContextInterface,
@@ -20,9 +31,9 @@ import {
 } from './components/meeting-info/useMeetingInfo';
 import {SetMeetingInfoProvider} from './components/meeting-info/useSetMeetingInfo';
 import {ShareLinkProvider} from './components/useShareLink';
-import AppRoutes from './AppRoutes';
+import Endcall from './pages/Endcall';
 
-// hook can't be used in the outside react function calls. so directly checking the platform.
+//hook can't be used in the outside react function calls. so directly checking the platform.
 if (Platform.OS === 'ios') {
   KeyboardManager.setEnable(true);
   KeyboardManager.setEnableAutoToolbar(false);
@@ -45,6 +56,35 @@ declare module 'agora-rn-uikit' {
 }
 
 const App: React.FC = () => {
+  //commented for v1 release
+  //const CustomRoutes = useCustomization((data) => data?.customRoutes);
+  // const RenderCustomRoutes = () => {
+  //   try {
+  //     return (
+  //       CustomRoutes &&
+  //       Array.isArray(CustomRoutes) &&
+  //       CustomRoutes.length &&
+  //       CustomRoutes?.map((item: CustomRoutesInterface, i: number) => {
+  //         let RouteComponent = item?.isPrivateRoute ? PrivateRoute : Route;
+  //         return (
+  //           <RouteComponent
+  //             path={CUSTOM_ROUTES_PREFIX + item.path}
+  //             exact={item.exact}
+  //             key={i}
+  //             failureRedirectTo={
+  //               item.failureRedirectTo ? item.failureRedirectTo : '/'
+  //             }
+  //             {...item.routeProps}>
+  //             <item.component {...item.componentProps} />
+  //           </RouteComponent>
+  //         );
+  //       })
+  //     );
+  //   } catch (error) {
+  //     console.error('Error on rendering the custom routes');
+  //     return null;
+  //   }
+  // };
   const [meetingInfo, setMeetingInfo] = useState<MeetingInfoContextInterface>(
     MeetingInfoDefaultValue,
   );
@@ -54,7 +94,40 @@ const App: React.FC = () => {
       <SetMeetingInfoProvider value={{setMeetingInfo}}>
         <MeetingInfoProvider value={{...meetingInfo}}>
           <ShareLinkProvider>
-            <AppRoutes />
+            <Switch>
+              {/* commented for v1 release */}
+              {/* {RenderCustomRoutes()} */}
+              <Route exact path={'/'}>
+                <Redirect to={'/create'} />
+              </Route>
+              <Route exact path={'/authenticate'}>
+                {shouldAuthenticate ? <OAuth /> : <Redirect to={'/'} />}
+              </Route>
+              <Route path={'/auth-token/:token'}>
+                <StoreToken />
+              </Route>
+              <Route exact path={'/join'}>
+                <Join />
+              </Route>
+              {/* Will be used in the future
+              <Route exact path={'/leave'}>
+                <Endcall />
+              </Route> */}
+              {shouldAuthenticate ? (
+                <PrivateRoute
+                  path={'/create'}
+                  failureRedirectTo={'/authenticate'}>
+                  <Create />
+                </PrivateRoute>
+              ) : (
+                <Route path={'/create'}>
+                  <Create />
+                </Route>
+              )}
+              <Route path={'/:phrase'}>
+                <VideoCall />
+              </Route>
+            </Switch>
           </ShareLinkProvider>
         </MeetingInfoProvider>
       </SetMeetingInfoProvider>

package/template/src/AppWrapper.tsx

@@ -29,7 +29,6 @@ import Error from './components/common/Error';
 import {ErrorProvider} from './components/common';
 import {useCustomization} from 'customization-implementation';
 import {LanguageProvider} from './language/useLanguage';
-import {AuthProvider} from './auth/AuthProvider';
 import {PropsConsumer} from 'agora-rn-uikit';
 import ToastComponent from './components/ToastComponent';
 import {ToastContext, ToastProvider} from './components/useToast';
@@ -100,21 +99,19 @@ const AppWrapper = (props: AppWrapperProps) => {
                       ? `/${SdkJoinState.phrase}`
                       : '',
                   ]}>
-                  <AuthProvider>
-                    <SessionProvider>
-                      <ColorConfigure>
-                        <DimensionProvider>
-                          <LanguageProvider>
-                            <ErrorProvider>
-                              <Error />
-                              <Navigation />
-                              {props.children}
-                            </ErrorProvider>
-                          </LanguageProvider>
-                        </DimensionProvider>
-                      </ColorConfigure>
-                    </SessionProvider>
-                  </AuthProvider>
+                  <SessionProvider>
+                    <ColorConfigure>
+                      <DimensionProvider>
+                        <LanguageProvider>
+                          <ErrorProvider>
+                            <Error />
+                            <Navigation />
+                            {props.children}
+                          </ErrorProvider>
+                        </LanguageProvider>
+                      </DimensionProvider>
+                    </ColorConfigure>
+                  </SessionProvider>
                 </Router>
               </GraphQLProvider>
             </StorageProvider>

package/template/src/SDKAppWrapper.tsx

@@ -11,68 +11,72 @@ import SDKMethodEventsManager from './utils/SdkMethodEvents';
 import App from './App';
 import SdkApiContextProvider from './components/SdkApiContext';
 import {Unsubscribe} from 'nanoevents';
+import {deviceId} from './components/DeviceConfigure';
 
-// type makeAsync<T extends (...p: any) => void> = (
-//   ...p: Parameters<T>
-// ) => PromiseLike<ReturnType<T>>;
-//
-// type takeOnlyFirstParam<T extends (...p: any) => void> = (
-//   p: Parameters<T>[0],
-// ) => ReturnType<T>;
+type meetingData = Partial<MeetingInfoContextInterface['data']>;
 
-export interface SdkMethodEvents {
-  customize: (customization: CustomizationApiInterface) => void;
-  join(
-    roomid: string | Partial<MeetingInfoContextInterface['data']>,
-    skipPrecall?: boolean,
-  ): MeetingInfoContextInterface['data'];
-  'login':(token:string) => Promise<void>
-  'logout':() => Promise<void>
+// Hard defined since its an api.
+export interface AppBuilderSdkApiInterface {
+  customize: (customization: CustomizationApiInterface) => Promise<void>;
+  joinRoom: (roomDetails: string | meetingData) => Promise<meetingData>;
+  joinPrecall: (
+    roomDetails: string | meetingData,
+  ) => Promise<
+    [meetingData, () => Promise<MeetingInfoContextInterface['data']>]
+  >;
+  setMicrophone: (deviceId: deviceId) => Promise<void>;
+  setCamera: (deviceId: deviceId) => Promise<void>;
+  setSpeaker: (deviceId: deviceId) => Promise<void>;
+  muteAudio: (
+    mute: boolean | ((currentMute: boolean) => boolean),
+  ) => Promise<void>;
+  muteVideo: (
+    mute: boolean | ((currentMute: boolean) => boolean),
+  ) => Promise<void>;
+  createCustomization: (
+    customization: CustomizationApiInterface,
+  ) => CustomizationApiInterface;
+  customEvents: typeof customEvents;
+  on: <T extends keyof userEventsMapInterface>(
+    userEventName: T,
+    cb: userEventsMapInterface[T],
+  ) => Unsubscribe;
 }
 
-// interface AppBuilderSdkApiInterface {
-//   customize: makeAsync<SdkMethodEvents['customize']>;
-//   joinRoom: makeAsync<takeOnlyFirstParam<SdkMethodEvents['join']>>;
-//   joinPrecall: makeAsync<takeOnlyFirstParam<SdkMethodEvents['join']>>;
-//   createCustomization: (
-//     customization: CustomizationApiInterface,
-//   ) => CustomizationApiInterface;
-//   on: <T extends keyof userEventsMapInterface>(
-//     userEventName: T,
-//     callBack: userEventsMapInterface[T],
-//   ) => Unsubscribe;
-// }
-
-export const AppBuilderSdkApi = {
-  login: async (token: string) => {
-    return await SDKMethodEventsManager.emit('login', token);
-  },
-  logout: async () => {
-    return await SDKMethodEventsManager.emit('logout');
-  },
-  customize: async (customization: CustomizationApiInterface) => {
+export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
+  customize: async (customization) => {
     return await SDKMethodEventsManager.emit('customize', customization);
   },
   customEvents: customEvents,
-  join: async (roomDetails: string) => {
-    await SDKMethodEventsManager.emit('join', roomDetails, false);
-  },
-  joinRoom: async (
-    roomDetails: string | Partial<MeetingInfoContextInterface['data']>,
-  ) => {
+  joinRoom: async (roomDetails) => {
     return await SDKMethodEventsManager.emit('join', roomDetails, true);
   },
-  joinPrecall: async (
-    roomDetails: string | Partial<MeetingInfoContextInterface['data']>,
-  ) => {
+  joinPrecall: async (roomDetails) => {
+    if (!$config.PRECALL)
+      throw new Error('Precall disabled in config, cant join precall');
     const t = await SDKMethodEventsManager.emit('join', roomDetails);
-    return t as unknown as [MeetingInfoContextInterface['data'], () => {}];
+    return t as unknown as [
+      MeetingInfoContextInterface['data'],
+      () => Promise<MeetingInfoContextInterface['data']>,
+    ];
+  },
+  setMicrophone: async (deviceId) => {
+    return await SDKMethodEventsManager.emit('microphoneDevice', deviceId);
+  },
+  setSpeaker: async (deviceId) => {
+    return await SDKMethodEventsManager.emit('speakerDevice', deviceId);
+  },
+  setCamera: async (deviceId) => {
+    return await SDKMethodEventsManager.emit('cameraDevice', deviceId);
+  },
+  muteAudio: async (state) => {
+    return await SDKMethodEventsManager.emit('muteAudio', state);
+  },
+  muteVideo: async (state) => {
+    return await SDKMethodEventsManager.emit('muteVideo', state);
   },
   createCustomization: customize,
-  on: <T extends keyof userEventsMapInterface>(
-    userEventName: T,
-    cb: userEventsMapInterface[T],
-  ): Unsubscribe => {
+  on: (userEventName, cb) => {
     console.log('SDKEvents: Event Registered', userEventName);
     return SDKEvents.on(userEventName, cb);
   },

package/template/src/atoms/Popup.tsx

@@ -21,7 +21,6 @@ interface PopupProps extends ModalProps {
   children: React.ReactNode;
   contentContainerStyle?: ViewStyle;
   containerStyle?: ViewStyle;
-  cancelable?: boolean;
 }
 const Popup = (props: PopupProps) => {
   const {
@@ -30,7 +29,6 @@ const Popup = (props: PopupProps) => {
     setModalVisible,
     children,
     showCloseIcon,
-    cancelable = true,
     ...otherProps
   } = props;
 
@@ -53,7 +51,7 @@ const Popup = (props: PopupProps) => {
         ]}>
         <TouchableWithoutFeedback
           onPress={() => {
-            cancelable && setModalVisible(false);
+            setModalVisible(false);
           }}>
           <View style={styles.backDrop} />
         </TouchableWithoutFeedback>

package/template/src/components/Chat.tsx

@@ -81,14 +81,15 @@ const Chat = (props?: ChatProps) => {
 
   const {primaryColor} = useContext(ColorContext);
 
-  React.useEffect(() => {
-    return () => {
-      // reset both the active tabs
-      setGroupActive(false);
-      setPrivateActive(false);
-      setSelectedUser(0);
-    };
-  }, []);
+  //not need since state are controlled by chatUIControl
+  // React.useEffect(() => {
+  //   return () => {
+  //     // reset both the active tabs
+  //     setGroupActive(false);
+  //     setPrivateActive(false);
+  //     setSelectedUser(0);
+  //   };
+  // }, []);
 
   const selectUser = (userUID: UidType) => {
     setSelectedUser(userUID);