agora-appbuilder-core 2.3.0-beta.28 → 2.3.0-beta.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "2.3.0-beta.28",
+  "version": "2.3.0-beta.29",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/src/App.tsx

@@ -10,6 +10,7 @@
 *********************************************
 */
 import React, {useState} from 'react';
+import {Platform} from 'react-native';
 import Join from './pages/Join';
 import VideoCall from './pages/VideoCall';
 import Create from './pages/Create';
@@ -17,7 +18,7 @@ import {Route, Switch, Redirect} from './components/Router';
 import PrivateRoute from './components/PrivateRoute';
 import OAuth from './components/OAuth';
 import StoreToken from './components/StoreToken';
-import {shouldAuthenticate, useIsIOS} from './utils/common';
+import {shouldAuthenticate} from './utils/common';
 import KeyboardManager from 'react-native-keyboard-manager';
 // commented for v1 release
 //import {CustomRoutesInterface, CUSTOM_ROUTES_PREFIX} from 'customization-api';
@@ -30,8 +31,9 @@ import {
 } from './components/meeting-info/useMeetingInfo';
 import {SetMeetingInfoProvider} from './components/meeting-info/useSetMeetingInfo';
 import {ShareLinkProvider} from './components/useShareLink';
-const isIOS = useIsIOS();
-if (isIOS()) {
+
+//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);
   KeyboardManager.setShouldShowToolbarPlaceholder(false);

package/template/src/AppWrapper.tsx

@@ -18,7 +18,7 @@ import {SessionProvider} from './components/SessionContext';
 import {ImageBackground, SafeAreaView, StatusBar, Platform} from 'react-native';
 import ColorConfigure from './components/ColorConfigure';
 import Toast from '../react-native-toast-message';
-import ToastConfig from './subComponents/toastConfig';
+import useToastConfig from './subComponents/useToastConfig';
 import {isValidReactComponent} from './utils/common';
 import DimensionProvider from './components/dimension/DimensionProvider';
 import Error from './components/common/Error';
@@ -37,6 +37,7 @@ const AppWrapper = (props: AppWrapperProps) => {
     }
     return React.Fragment;
   });
+  const toastConfig = useToastConfig();
 
   return (
     <AppRoot>
@@ -48,7 +49,7 @@ const AppWrapper = (props: AppWrapperProps) => {
           // @ts-ignore textAlign not supported by TS definitions but is applied to web regardless
           style={[{flex: 1}, Platform.select({web: {textAlign: 'left'}})]}>
           <StatusBar hidden={true} />
-          <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />
+          <Toast ref={(ref) => Toast.setRef(ref)} config={toastConfig} />
           <StorageProvider>
             <GraphQLProvider>
               <Router>

package/template/src/atoms/TextInput.tsx

@@ -11,15 +11,14 @@
 */
 import React, {useContext} from 'react';
 import {TextInputProps, StyleSheet, TextInput, Platform} from 'react-native';
-import {useIsWeb} from '../utils/common';
+import {useIsWebInternal} from '../utils/common';
 import {textInput} from '../../theme.json';
 import ColorContext from '../components/ColorContext';
 
-const isWeb = useIsWeb();
-
 const PrimaryButton = (props: TextInputProps) => {
   const {primaryColor} = useContext(ColorContext);
   const {style, ...otherProps} = props;
+  const styles = useStyles();
   return (
     <TextInput
       style={[
@@ -38,13 +37,16 @@ const PrimaryButton = (props: TextInputProps) => {
 
 export default PrimaryButton;
 
-const styles = StyleSheet.create({
-  textInput,
-  // @ts-ignore
-  noOutline: isWeb() ? {outlineStyle: 'none'} : {},
-  textWrapFix: Platform.select({
-    ios: {
-      paddingVertical: 5,
-    },
-  }),
-});
+const useStyles = () => {
+  const isWebInternal = useIsWebInternal();
+  return StyleSheet.create({
+    textInput,
+    // @ts-ignore
+    noOutline: isWebInternal() ? {outlineStyle: 'none'} : {},
+    textWrapFix: Platform.select({
+      ios: {
+        paddingVertical: 5,
+      },
+    }),
+  });
+};

package/template/src/components/Chat.tsx

@@ -23,7 +23,11 @@ import ChatParticipants from '../subComponents/chat/ChatParticipants';
 import ColorContext from './ColorContext';
 import {useChatNotification} from './chat-notification/useChatNotification';
 import {useString} from '../utils/useString';
-import {useIsIOS, isValidReactComponent, useIsWeb} from '../utils/common';
+import {
+  useIsIOS,
+  isValidReactComponent,
+  useIsWebInternal,
+} from '../utils/common';
 import {useChatUIControl} from './chat-ui/useChatUIControl';
 import {useCustomization} from 'customization-implementation';
 import {UidType} from '../../agora-rn-uikit';
@@ -43,7 +47,7 @@ const Chat = (props?: ChatProps) => {
   // commented for v1 release
   // const groupChatLabel = useString('groupChatLabel')();
   // const privateChatLabel = useString('privateChatLabel')();
-  const isWeb = useIsWeb();
+  const isWebInternal = useIsWebInternal();
   const groupChatLabel = 'Group';
   const privateChatLabel = 'Private';
   const [dim, setDim] = useState([
@@ -138,12 +142,12 @@ const Chat = (props?: ChatProps) => {
     }
     return components;
   });
-
+  const style = useStyle();
   return (
     <>
       <View
         style={
-          isWeb()
+          isWebInternal()
             ? !isSmall
               ? style.chatView
               : style.chatViewNative
@@ -238,140 +242,143 @@ const Chat = (props?: ChatProps) => {
     </>
   );
 };
-const isIOS = useIsIOS();
-const style = StyleSheet.create({
-  chatView: {
-    width: '20%',
-    minWidth: 200,
-    maxWidth: 300,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    flex: 1,
-    shadowColor: $config.PRIMARY_FONT_COLOR + '80',
-    shadowOpacity: 0.5,
-    shadowOffset: {width: -2, height: 1},
-    shadowRadius: 3,
-  },
-  chatViewNative: {
-    position: 'absolute',
-    zIndex: 5,
-    width: '100%',
-    height: '100%',
-    right: 0,
-    bottom: 0,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-  },
-  heading: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    width: 150,
-    height: '7%',
-    paddingLeft: 20,
-    flexDirection: 'row',
-  },
-  headingText: {
-    flex: 1,
-    paddingLeft: 5,
-    marginVertical: 'auto',
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
-    fontSize: 25,
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-  chatNav: {
-    flexDirection: 'row',
-    height: '6%',
-  },
-  chatInputContainer: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    paddingBottom: 10,
-  },
-  chatInputLineSeparator: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
-    width: '100%',
-    height: 1,
-    marginHorizontal: -20,
-    alignSelf: 'center',
-    opacity: 0.5,
-    marginBottom: 10,
-  },
-  groupActive: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    flex: 1,
-    height: '100%',
-    textAlign: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  group: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + 22,
-    flex: 1,
-    height: '100%',
-    textAlign: 'center',
-    borderBottomRightRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  privateActive: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    flex: 1,
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  private: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + 22,
-    flex: 1,
-    height: '100%',
-    borderBottomLeftRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  groupTextActive: {
-    marginVertical: 'auto',
-    fontWeight: '700',
-    textAlign: 'center',
-    fontSize: 16,
-    color: $config.PRIMARY_FONT_COLOR,
-    justifyContent: 'center',
-    paddingVertical: 5,
-  },
-  groupText: {
-    marginVertical: 'auto',
-    fontWeight: '700',
-    textAlign: 'center',
-    fontSize: 16,
-    paddingVertical: 5,
-    justifyContent: 'center',
-    color: $config.PRIMARY_FONT_COLOR + 50,
-  },
-  chatNotification: {
-    width: 20,
-    height: 20,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: $config.PRIMARY_COLOR,
-    color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
-    borderRadius: 10,
-    position: 'absolute',
-    left: 25,
-    top: -5,
-  },
-  chatNotificationPrivate: {
-    width: 20,
-    height: 20,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: $config.PRIMARY_COLOR,
-    color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
-    borderRadius: 10,
-    position: 'absolute',
-    right: 20,
-    top: 0,
-  },
-});
+
+const useStyle = () => {
+  const isIOS = useIsIOS();
+  return StyleSheet.create({
+    chatView: {
+      width: '20%',
+      minWidth: 200,
+      maxWidth: 300,
+      backgroundColor: $config.SECONDARY_FONT_COLOR,
+      flex: 1,
+      shadowColor: $config.PRIMARY_FONT_COLOR + '80',
+      shadowOpacity: 0.5,
+      shadowOffset: {width: -2, height: 1},
+      shadowRadius: 3,
+    },
+    chatViewNative: {
+      position: 'absolute',
+      zIndex: 5,
+      width: '100%',
+      height: '100%',
+      right: 0,
+      bottom: 0,
+      backgroundColor: $config.SECONDARY_FONT_COLOR,
+    },
+    heading: {
+      backgroundColor: $config.SECONDARY_FONT_COLOR,
+      width: 150,
+      height: '7%',
+      paddingLeft: 20,
+      flexDirection: 'row',
+    },
+    headingText: {
+      flex: 1,
+      paddingLeft: 5,
+      marginVertical: 'auto',
+      fontWeight: '700',
+      color: $config.PRIMARY_FONT_COLOR,
+      fontSize: 25,
+      alignSelf: 'center',
+      justifyContent: 'center',
+    },
+    chatNav: {
+      flexDirection: 'row',
+      height: '6%',
+    },
+    chatInputContainer: {
+      backgroundColor: $config.SECONDARY_FONT_COLOR,
+      paddingBottom: 10,
+    },
+    chatInputLineSeparator: {
+      backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
+      width: '100%',
+      height: 1,
+      marginHorizontal: -20,
+      alignSelf: 'center',
+      opacity: 0.5,
+      marginBottom: 10,
+    },
+    groupActive: {
+      backgroundColor: $config.SECONDARY_FONT_COLOR,
+      flex: 1,
+      height: '100%',
+      textAlign: 'center',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    group: {
+      backgroundColor: $config.PRIMARY_FONT_COLOR + 22,
+      flex: 1,
+      height: '100%',
+      textAlign: 'center',
+      borderBottomRightRadius: 10,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    privateActive: {
+      backgroundColor: $config.SECONDARY_FONT_COLOR,
+      flex: 1,
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    private: {
+      backgroundColor: $config.PRIMARY_FONT_COLOR + 22,
+      flex: 1,
+      height: '100%',
+      borderBottomLeftRadius: 10,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    groupTextActive: {
+      marginVertical: 'auto',
+      fontWeight: '700',
+      textAlign: 'center',
+      fontSize: 16,
+      color: $config.PRIMARY_FONT_COLOR,
+      justifyContent: 'center',
+      paddingVertical: 5,
+    },
+    groupText: {
+      marginVertical: 'auto',
+      fontWeight: '700',
+      textAlign: 'center',
+      fontSize: 16,
+      paddingVertical: 5,
+      justifyContent: 'center',
+      color: $config.PRIMARY_FONT_COLOR + 50,
+    },
+    chatNotification: {
+      width: 20,
+      height: 20,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: $config.PRIMARY_COLOR,
+      color: $config.SECONDARY_FONT_COLOR,
+      fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
+      borderRadius: 10,
+      position: 'absolute',
+      left: 25,
+      top: -5,
+    },
+    chatNotificationPrivate: {
+      width: 20,
+      height: 20,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: $config.PRIMARY_COLOR,
+      color: $config.SECONDARY_FONT_COLOR,
+      fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
+      borderRadius: 10,
+      position: 'absolute',
+      right: 20,
+      top: 0,
+    },
+  });
+};
 
 export default Chat;

package/template/src/components/Controls.tsx

@@ -31,7 +31,7 @@ import {ClientRole} from '../../agora-rn-uikit';
 import LiveStreamControls, {
   LiveStreamControlsProps,
 } from './livestream/views/LiveStreamControls';
-import {useIsIOS, useIsWeb} from '../utils/common';
+import {useIsWebInternal} from '../utils/common';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 import LocalEndcall, {LocalEndcallProps} from '../subComponents/LocalEndCall';
 
@@ -51,11 +51,11 @@ const Controls = () => {
   const {
     data: {isHost},
   } = useMeetingInfo();
-
+  const {controlsHolder} = useStyle();
   return (
     <View
       style={[
-        style.controlsHolder,
+        controlsHolder,
         {
           paddingHorizontal: isDesktop ? '25%' : '1%',
           backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
@@ -128,29 +128,15 @@ export const ControlsComponentsArray: ControlsComponentsArrayProps = [
   LiveStreamControls,
 ];
 
-const isWeb = useIsWeb();
-const isIOS = useIsIOS();
-
-const style = StyleSheet.create({
-  // @ts-ignore
-  controlsHolder: {
-    flex: isWeb() ? 1.3 : 1.6,
-    ...controlsHolder,
-  },
-  chatNotification: {
-    width: 20,
-    height: 20,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: $config.PRIMARY_COLOR,
-    color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
-    borderRadius: 10,
-    position: 'absolute',
-    left: 25,
-    top: -10,
-  },
-});
+const useStyle = () => {
+  const isWebInternal = useIsWebInternal();
+  return StyleSheet.create({
+    // @ts-ignore
+    controlsHolder: {
+      flex: isWebInternal() ? 1.3 : 1.6,
+      ...controlsHolder,
+    },
+  });
+};
 
 export default Controls;

package/template/src/components/GridVideo.tsx

@@ -12,7 +12,7 @@
 import {layoutComponent, useRtc} from 'customization-api';
 import React, {useMemo, useState} from 'react';
 import {View, StyleSheet, Dimensions, Pressable} from 'react-native';
-import {useIsWeb} from '../utils/common';
+import {useIsWebInternal} from '../utils/common';
 import {useSetPinnedLayout} from '../pages/video-call/DefaultLayouts';
 import RenderComponent from '../pages/video-call/RenderComponent';
 const layout = (len: number, isDesktop: boolean = true) => {
@@ -34,7 +34,7 @@ const layout = (len: number, isDesktop: boolean = true) => {
 };
 
 const GridVideo: layoutComponent = ({renderData}) => {
-  const isWeb = useIsWeb();
+  const isWebInternal = useIsWebInternal();
   const {dispatch} = useRtc();
   let onLayout = (e: any) => {
     setDim([
@@ -74,7 +74,7 @@ const GridVideo: layoutComponent = ({renderData}) => {
                 setPinnedLayout();
               }}
               style={{
-                flex: isWeb() ? 1 / dims.c : 1,
+                flex: isWebInternal() ? 1 / dims.c : 1,
                 marginHorizontal: 'auto',
               }}
               key={cidx}>