agora-appbuilder-core 4.0.25-beta-11 → 4.0.25-beta-13

package/package.json

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

package/template/defaultConfig.js

@@ -76,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.0.25-beta-11',
-  CORE_VERSION: '4.0.25-beta-11',
+  CLI_VERSION: '3.0.25-beta-13',
+  CORE_VERSION: '4.0.25-beta-13',
 };
 
 module.exports = DefaultConfig;

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

@@ -18,6 +18,7 @@ import Spacer from '../../atoms/Spacer';
 import Transcript from '../../subComponents/caption/Transcript';
 import {ToolbarProvider} from '../../utils/useToolbar';
 import {ActionSheetProvider} from '../../utils/useActionSheet';
+import {useOrientation} from '../../utils/useOrientation';
 
 const ActionSheet = props => {
   const {snapPointsMinMax = [100, 400]} = props;
@@ -136,6 +137,10 @@ const ActionSheet = props => {
       default:
     }
   };
+  const orientation = useOrientation();
+  if (orientation === 'LANDSCAPE') {
+    return <></>;
+  }
   return (
     <>
       {showOverlay && (

package/template/src/subComponents/BlockUI.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import {useOrientation} from '../utils/useOrientation';
 import ThemeConfig from '../theme';
 import {isMobileUA} from '../utils/common';
+import Popup from './../atoms/Popup';
 
 export default function BlockUI() {
+  const [isBlockModalVisible, setBlockModalVisible] = useState(true);
   const orientation = useOrientation();
   if (!isMobileUA()) {
     return <></>;
@@ -13,32 +15,44 @@ export default function BlockUI() {
     return <></>;
   }
   return (
-    <View style={styles.blockui__wrapper}>
-      <View style={styles.blockui__body}>
-        <Text style={styles.blockui__content}>
-          Please change to portrait mode to further access our application.
-        </Text>
+    <Popup
+      cancelable={false}
+      modalVisible={isBlockModalVisible}
+      setModalVisible={setBlockModalVisible}
+      containerStyle={styles.blockui__wrapper}
+      contentContainerStyle={styles.blockui__body}
+      showCloseIcon={false}>
+      <View style={styles.blockui__wrapper}>
+        <View style={styles.blockui__body}>
+          <Text style={styles.blockui__content}>
+            Please change to portrait mode to further access our application.
+          </Text>
+        </View>
       </View>
-    </View>
+    </Popup>
   );
 }
 
 const styles = StyleSheet.create({
   blockui__wrapper: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    zIndex: 99999,
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-    color: '#fff',
+    padding: 0,
+    // position: 'absolute',
+    // top: 0,
+    // left: 0,
+    // width: '100%',
+    // height: '100%',
+    // zIndex: 99999,
+    // backgroundColor: $config.CARD_LAYER_1_COLOR,
+    // color: '#fff',
   },
   blockui__body: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     flex: 1,
+    width: '100%',
+    maxWidth: '100%',
+    borderRadius: 0,
   },
   blockui__content: {
     fontSize: 16,

package/template/src/utils/useOrientation.tsx

@@ -3,7 +3,8 @@ import {Dimensions} from 'react-native';
 
 const isPortrait = () => {
   const dim = Dimensions.get('window');
-  return dim.height >= dim.width;
+  // This 20 is added to adjust for keyboard autocomplete suggestion area height
+  return dim.height + 20 >= dim.width;
 };
 
 /**