agora-appbuilder-core 4.1.29 → 4.1.30-beta.2

package/template/metro.config.js

@@ -6,6 +6,11 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
  *
  * @type {import('metro-config').MetroConfig}
  */
-const config = {};
+const config = {
+  resolver: {
+    // CI builds should not depend on a running Watchman service.
+    useWatchman: process.env.CI !== 'true',
+  },
+};
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package/template/package.json

@@ -8,6 +8,9 @@
     "android:build": "npm run android:build:unix",
     "android:build:unix": "cross-env TARGET=android gulp androidUnix",
     "android:build:windows": "cross-env TARGET=android gulp androidWin",
+    "android:bundle": "npm run android:bundle:unix",
+    "android:bundle:unix": "cross-env TARGET=android gulp androidBundleUnix",
+    "android:bundle:windows": "cross-env TARGET=android gulp androidBundleWin",
     "ios": "cd ios && ls | grep .xcworkspace | xargs open",
     "ios:build": "cd ios && ls | grep .xcworkspace | xargs open",
     "start": "react-native start",
@@ -34,7 +37,8 @@
     "package:mac": "npm run mac:build && electron-builder --publish=always",
     "release": "electron-builder --mac --windows --linux --publish always --config ./electron-builder.js ",
     "make-rsdk-ts-defs": "cross-env TARGET=rsdk NODE_ENV=production gulp makeRsdkTsDefs",
-    "make-wsdk-ts-defs": "cross-env TARGET=wsdk NODE_ENV=production gulp makeWsdkTsDefs"
+    "make-wsdk-ts-defs": "cross-env TARGET=wsdk NODE_ENV=production gulp makeWsdkTsDefs",
+    "postinstall": "patch-package --error-on-fail"
   },
   "publish": [
     {
@@ -54,10 +58,10 @@
     "@netless/react-native-whiteboard": "^0.0.14",
     "@openspacelabs/react-native-zoomable-view": "^2.1.1",
     "@react-native-async-storage/async-storage": "1.19.2",
+    "@react-native-clipboard/clipboard": "1.16.3",
     "@react-native-community/checkbox": "0.5.16",
-    "@react-native-community/clipboard": "1.5.1",
     "@splinetool/runtime": "^1.9.69",
-    "@supersami/rn-foreground-service": "^1.1.1",
+    "@supersami/rn-foreground-service": "1.1.1",
     "add": "^2.0.6",
     "agora-agent-client-toolkit": "2.9.0",
     "agora-chat": "1.2.2-3",
@@ -84,29 +88,30 @@
     "npm": "^9.7.2",
     "p-queue": "^7.3.4",
     "protobufjs": "^7.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-is": "18.0.0",
-    "react-native": "0.72.4",
+    "react-native": "0.77.3",
     "react-native-agora": "4.6.4",
-    "react-native-agora-chat": "1.2.1",
+    "react-native-agora-chat": "1.4.1",
     "react-native-document-picker": "^9.1.0",
     "react-native-exit-app": "1.1.0",
     "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "2.8.0",
+    "react-native-gesture-handler": "2.25.0",
     "react-native-get-random-values": "^1.11.0",
     "react-native-hyperlink": "0.0.19",
     "react-native-inappbrowser-reborn": "3.5.1",
     "react-native-keep-awake": "4.0.0",
     "react-native-keyboard-manager": "6.5.4-1",
-    "react-native-reanimated": "3.4.2",
+    "react-native-reanimated": "3.17.5",
     "react-native-responsive-fontsize": "0.5.1",
+    "react-native-safe-area-context": "5.4.0",
     "react-native-share": "10.0.2",
-    "react-native-svg": "13.6.0",
+    "react-native-svg": "15.11.2",
     "react-native-vector-icons": "9.2.0",
     "react-native-walkthrough-tooltip": "1.4.0",
     "react-native-web": "0.19.7",
-    "react-native-webview": "13.8.1",
+    "react-native-webview": "13.13.5",
     "react-router-dom": "5.2.0",
     "react-router-native": "5.2.0",
     "react-spring-bottom-sheet": "3.4.1",
@@ -117,24 +122,27 @@
     "white-web-sdk": "2.16.42"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.25.2",
     "@babel/plugin-proposal-class-properties": "7.14.5",
     "@babel/plugin-proposal-optional-chaining": "7.16.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/runtime": "^7.25.0",
     "@bam.tech/react-native-make": "3.0.3",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
     "@react-native-community/eslint-config": "1.1.0",
-    "@react-native/eslint-config": "^0.72.2",
-    "@react-native/metro-config": "^0.72.11",
+    "@react-native/babel-preset": "0.77.3",
+    "@react-native/eslint-config": "0.77.3",
+    "@react-native/metro-config": "0.77.3",
     "@tsconfig/react-native": "^3.0.0",
     "@types/hark": "^1.2.2",
     "@types/jest": "25.2.3",
-    "@types/react": "17.0.2",
+    "@types/react": "^18.3.1",
     "@types/react-is": "17.0.3",
-    "@types/react-native": "0.67.6",
     "@types/react-native-keep-awake": "2.0.2",
     "@types/react-router-dom": "5.1.7",
     "@types/react-router-native": "5.1.0",
@@ -162,12 +170,12 @@
     "html-webpack-plugin": "4.5.2",
     "ignore-loader": "^0.1.2",
     "jest": "^29.2.1",
-    "metro-react-native-babel-preset": "0.76.8",
+    "patch-package": "8.0.0",
     "prettier": "^2.4.1",
     "react-devtools-electron": "4.7.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-refresh": "0.12.0",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "style-loader": "3.3.1",
     "ts-loader": "^8.3.0",
     "typescript": "4.8.4",
@@ -180,7 +188,7 @@
   },
   "overrides": {
     "@netless/react-native-whiteboard": {
-      "react-native-webview": "13.8.1"
+      "react-native-webview": "13.13.5"
     },
     "agora-extension-ai-denoiser": {
       "agora-rtc-sdk-ng": "4.20.1-1"

package/template/patches/@supersami+rn-foreground-service+1.1.1.patch

@@ -0,0 +1,12 @@
+diff --git a/node_modules/@supersami/rn-foreground-service/android/src/main/java/com/supersami/foregroundservice/NotificationHelper.java b/node_modules/@supersami/rn-foreground-service/android/src/main/java/com/supersami/foregroundservice/NotificationHelper.java
+--- a/node_modules/@supersami/rn-foreground-service/android/src/main/java/com/supersami/foregroundservice/NotificationHelper.java
++++ b/node_modules/@supersami/rn-foreground-service/android/src/main/java/com/supersami/foregroundservice/NotificationHelper.java
+@@ -59 +59 @@
+-        PendingIntent pendingIntent = PendingIntent.getActivity(context, uniqueInt1, notificationIntent, PendingIntent.FLAG_UPDATE_CURRENT);
++        PendingIntent pendingIntent = PendingIntent.getActivity(context, uniqueInt1, notificationIntent, PendingIntent.FLAG_UPDATE_CURRENT | PendingIntent.FLAG_IMMUTABLE);
+@@ -66 +66 @@
+-            pendingBtnIntent = PendingIntent.getActivity(context, uniqueInt, notificationBtnIntent, PendingIntent.FLAG_UPDATE_CURRENT);
++            pendingBtnIntent = PendingIntent.getActivity(context, uniqueInt, notificationBtnIntent, PendingIntent.FLAG_UPDATE_CURRENT | PendingIntent.FLAG_IMMUTABLE);
+@@ -125 +125 @@
+-           notificationBuilder.addAction(R.drawable.redbox_top_border_background, bundle.getString("buttonText", "Button"), pendingBtnIntent);
++           notificationBuilder.addAction(android.R.drawable.ic_media_play, bundle.getString("buttonText", "Button"), pendingBtnIntent);

package/template/scripts/verify-android-native-libs.py

@@ -0,0 +1,106 @@
+#!/usr/bin/env python3
+"""Check 64-bit ELF/APK alignment and shared Agora AOSL symbol compatibility."""
+import argparse
+import struct
+import sys
+import zipfile
+from pathlib import Path
+
+PAGE_SIZE = 16384
+
+
+def aosl_symbols(data):
+    """Read required and exported AOSL symbols from ELF32/ELF64 dynamic tables."""
+    if data[:4] != b'\x7fELF':
+        raise ValueError('expected an ELF library')
+    is_64 = data[4] == 2
+    endian = '<' if data[5] == 1 else '>'
+    table_offset = struct.unpack_from(endian + ('Q' if is_64 else 'I'), data, 40 if is_64 else 32)[0]
+    entry_size, entry_count = struct.unpack_from(endian + 'HH', data, 58 if is_64 else 46)
+    section_format = endian + ('IIQQQQIIQQ' if is_64 else 'IIIIIIIIII')
+    sections = [struct.unpack_from(section_format, data, table_offset + i * entry_size)
+                for i in range(entry_count)]
+    required, exported = set(), set()
+    for section in sections:
+        if section[1] != 11:  # SHT_DYNSYM
+            continue
+        strings = sections[section[6]]
+        string_data = data[strings[4]:strings[4] + strings[5]]
+        for offset in range(section[4], section[4] + section[5], section[9]):
+            symbol = struct.unpack_from(endian + ('IBBHQQ' if is_64 else 'IIIBBH'), data, offset)
+            name_offset = symbol[0]
+            name_bytes = string_data[name_offset:string_data.find(b'\0', name_offset)]
+            if not name_bytes.startswith(b'aosl_'):
+                continue
+            name = name_bytes.decode('ascii')
+            info, section_index = (symbol[1], symbol[3]) if is_64 else (symbol[3], symbol[5])
+            if section_index == 0:
+                if info >> 4 == 1:  # Undefined GLOBAL symbols; WEAK imports are optional.
+                    required.add(name)
+            elif info >> 4 in (1, 2):
+                exported.add(name)
+    return required, exported
+
+
+def check_artifact(path):
+    failures = []
+    checked = 0
+    aosl_providers = {}
+    aosl_consumers = []
+    with zipfile.ZipFile(path) as archive, path.open('rb') as artifact:
+        for entry in archive.infolist():
+            name = entry.filename
+            if name.endswith('.so'):
+                data = archive.read(entry)
+                required, exported = aosl_symbols(data)
+                abi = name.split('/')[-2]
+                if name.endswith('/libaosl.so'):
+                    aosl_providers[abi] = exported
+                if required:
+                    aosl_consumers.append((name, abi, required))
+            if not name.endswith('.so') or not any(
+                f'/{abi}/' in name for abi in ('arm64-v8a', 'x86_64')
+            ):
+                continue
+            checked += 1
+            data = archive.read(entry)
+            if data[:5] != b'\x7fELF\x02':
+                failures.append(f'{name}: expected a 64-bit ELF library')
+                continue
+            endian = '<' if data[5] == 1 else '>'
+            table_offset = struct.unpack_from(endian + 'Q', data, 32)[0]
+            entry_size, entry_count = struct.unpack_from(endian + 'HH', data, 54)
+            for index in range(entry_count):
+                offset = table_offset + index * entry_size
+                segment_type = struct.unpack_from(endian + 'I', data, offset)[0]
+                if segment_type == 1:  # PT_LOAD
+                    alignment = struct.unpack_from(endian + 'Q', data, offset + 48)[0]
+                    if alignment < PAGE_SIZE:
+                        failures.append(f'{name}: ELF load segment is aligned to {alignment} bytes')
+                        break
+            if path.suffix == '.apk' and entry.compress_type == zipfile.ZIP_STORED:
+                artifact.seek(entry.header_offset + 26)
+                name_size, extra_size = struct.unpack('<HH', artifact.read(4))
+                data_offset = entry.header_offset + 30 + name_size + extra_size
+                if data_offset % PAGE_SIZE:
+                    failures.append(f'{name}: uncompressed APK entry lacks 16 KB ZIP alignment')
+    if not checked:
+        failures.append('No 64-bit native libraries found')
+    for name, abi, required in aosl_consumers:
+        missing = required - aosl_providers.get(abi, set())
+        if missing:
+            failures.append(f'{name}: packaged libaosl.so lacks symbols: {", ".join(sorted(missing))}')
+    for failure in failures:
+        print(f'FAIL: {failure}', file=sys.stderr)
+    print(f'{path.name}: checked alignment of {checked} native libraries and '
+          f'AOSL imports in {len(aosl_consumers)} libraries; {len(failures)} failures')
+    if path.suffix == '.aab':
+        print('AAB check covers ELF alignment. Also verify ZIP alignment in generated APKs.')
+    return bool(failures)
+
+
+if __name__ == '__main__':
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument('artifact', type=Path)
+    args = parser.parse_args()
+    sys.exit(check_artifact(args.artifact))

package/template/src/AppWrapper.tsx

@@ -14,13 +14,7 @@ import {Router} from './components/Router';
 import Navigation from './components/Navigation';
 import {StorageProvider} from './components/StorageContext';
 import {SessionProvider} from './components/SessionContext';
-import {
-  ImageBackground,
-  SafeAreaView,
-  StatusBar,
-  Platform,
-  View,
-} from 'react-native';
+import {ImageBackground, StatusBar, Platform, View} from 'react-native';
 import ColorConfigure from './components/ColorConfigure';
 import {isValidReactComponent} from './utils/common';
 import DimensionProvider from './components/dimension/DimensionProvider';
@@ -35,6 +29,7 @@ import {ToastContext, ToastProvider} from './components/useToast';
 import {SdkApiContext} from './components/SdkApiContext';
 import isSDK from './utils/isSDK';
 import BlockUI from './subComponents/BlockUI';
+import SafeAreaView from './components/AppSafeAreaView';
 
 interface AppWrapperProps {
   children: React.ReactNode;

package/template/src/atoms/Carousel.native.tsx

@@ -1,9 +1,7 @@
-import React, {useState} from 'react';
-import {View, StyleSheet, Dimensions, Pressable} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {View, StyleSheet, useWindowDimensions, Pressable} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
 
-const {width} = Dimensions.get('window');
-
 interface CarouselItem {
   id: string;
   component: React.ReactNode;
@@ -14,9 +12,22 @@ interface CarouselProps {
 }
 
 const Carousel: React.FC<CarouselProps> = ({data}) => {
+  const {width: windowWidth} = useWindowDimensions();
+  const [width, setWidth] = useState(windowWidth);
   const [activeIndex, setActiveIndex] = useState(0);
 
   const flatListRef = React.useRef<FlatList | null>(null);
+  const previousWidth = React.useRef(width);
+
+  useEffect(() => {
+    if (previousWidth.current !== width) {
+      previousWidth.current = width;
+      flatListRef.current?.scrollToOffset({
+        offset: activeIndex * width,
+        animated: false,
+      });
+    }
+  }, [width, activeIndex]);
 
   const handleScroll = event => {
     const {contentOffset} = event.nativeEvent;
@@ -37,7 +48,13 @@ const Carousel: React.FC<CarouselProps> = ({data}) => {
   };
 
   return (
-    <View style={styles.container}>
+    <View
+      style={styles.container}
+      onLayout={({nativeEvent: {layout}}) => {
+        if (layout.width > 0) {
+          setWidth(layout.width);
+        }
+      }}>
       <FlatList
         ref={flatListRef}
         data={data}

package/template/src/atoms/CustomSwitch.tsx

@@ -7,7 +7,6 @@ import {
   Animated,
   PanResponder,
   TouchableOpacity,
-  ViewPropTypes,
 } from 'react-native';
 import PropTypes from 'prop-types';
 

package/template/src/atoms/Dropdown.tsx

@@ -222,7 +222,6 @@ const PlatformWrapper = ({children, onPress}) => {
 
 const styles = StyleSheet.create({
   dropdownOptionContainer: {
-    flex: 1,
     flexDirection: 'row',
     minHeight: 40,
     backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,

package/template/src/atoms/MeetingLink.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
-import {
-  SHARE_LINK_CONTENT_TYPE,
-  useShareLink,
-} from '../components/useShareLink';
+import {Platform, StyleSheet, Text, View} from 'react-native';
+import {SHARE_LINK_CONTENT_TYPE} from '../components/useShareLink';
 import platform from '../subComponents/Platform';
-import Spacer from './Spacer';
 import isSDKCheck from '../utils/isSDK';
+import Spacer from './Spacer';
 import ClipboardIconButton from './ClipboardIconButton';
 import ThemeConfig, {FontSizes} from '../theme';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
@@ -41,12 +38,8 @@ const MeetingLink = (props: MeetingLinkProps) => {
   } = props;
 
   const style = useStyles(styleProps);
-
-  const {getShareLink} = useShareLink();
-
-  const isSDK = isSDKCheck();
   const isWebCheck =
-    $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
+    $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDKCheck());
 
   return (
     <>
@@ -60,7 +53,7 @@ const MeetingLink = (props: MeetingLinkProps) => {
             style={[
               style.linkText,
               //@ts-ignore
-              isWebCheck ? urlWeb : {opacity: 1},
+              Platform.OS === 'web' && isWebCheck ? urlWeb : {opacity: 1},
             ]}>
             {link}
           </Text>

package/template/src/atoms/Popup.tsx

@@ -3,6 +3,7 @@ import {
   Text,
   View,
   Modal,
+  ScrollView,
   TouchableWithoutFeedback,
   ModalProps,
   ViewStyle,
@@ -13,6 +14,7 @@ import ThemeConfig from '../theme';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {isMobileUA, useIsDesktop} from '../../src/utils/common';
 import Spacer from './Spacer';
+import useIsTablet from '../utils/useIsTablet';
 
 interface PopupProps extends ModalProps {
   title?: string;
@@ -44,6 +46,7 @@ const Popup = (props: PopupProps) => {
   } = props;
 
   const isDesktop = useIsDesktop()('popup');
+  const isTabletView = useIsTablet();
 
   return (
     <Modal
@@ -67,7 +70,12 @@ const Popup = (props: PopupProps) => {
           <View style={styles.backDrop} />
         </TouchableWithoutFeedback>
 
-        <View style={[styles.modalView, props?.contentContainerStyle]}>
+        <View
+          style={[
+            styles.modalView,
+            props?.contentContainerStyle,
+            isTabletView && styles.tabletModalView,
+          ]}>
           {title || showCloseIcon || headerComponent ? (
             <>
               <View style={styles.header}>
@@ -111,7 +119,15 @@ const Popup = (props: PopupProps) => {
           ) : (
             <></>
           )}
-          <View style={bodyContainerStyle}>{children}</View>
+          {isTabletView ? (
+            <ScrollView
+              style={styles.tabletBody}
+              contentContainerStyle={bodyContainerStyle}>
+              {children}
+            </ScrollView>
+          ) : (
+            <View style={bodyContainerStyle}>{children}</View>
+          )}
         </View>
       </View>
     </Modal>
@@ -153,6 +169,14 @@ const styles = StyleSheet.create({
     backgroundColor:
       $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60%'],
   },
+  tabletModalView: {
+    maxHeight: '90%',
+    flexShrink: 1,
+  },
+  tabletBody: {
+    flexGrow: 0,
+    flexShrink: 1,
+  },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',

package/template/src/components/AppSafeAreaView.android.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {
+  SafeAreaProvider,
+  SafeAreaView,
+  SafeAreaViewProps,
+  initialWindowMetrics,
+} from 'react-native-safe-area-context';
+
+export default function AppSafeAreaView(props: SafeAreaViewProps) {
+  return (
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <SafeAreaView {...props} />
+    </SafeAreaProvider>
+  );
+}

package/template/src/components/AppSafeAreaView.tsx

@@ -0,0 +1 @@
+export {SafeAreaView as default} from 'react-native';

package/template/src/components/Precall.native.tsx

@@ -13,6 +13,7 @@ import React, {useState, useContext, useEffect} from 'react';
 import {View, Text, StyleSheet, ScrollView} from 'react-native';
 import {PropsContext, ClientRoleType, ToggleState} from '../../agora-rn-uikit';
 import {isValidReactComponent, isWebInternal, trimText} from '../utils/common';
+import useIsTablet from '../utils/useIsTablet';
 import ColorContext from './ColorContext';
 import {useRoomInfo} from './room-info/useRoomInfo';
 import PreCallLogo from './common/Logo';
@@ -214,6 +215,7 @@ const JoinRoomButton = () => {
 };
 
 const Precall = (props: any) => {
+  const isTabletView = useIsTablet();
   const {primaryColor} = useContext(ColorContext);
   const {rtcProps} = useContext(PropsContext);
   const [isSettingsOpen, setIsSettingsOpen] = React.useState(true);
@@ -424,16 +426,28 @@ const Precall = (props: any) => {
                       <></>
                     )}
                   </View>
-                  <View style={style.content}>
-                    <View style={style.preview}>
+                  <View
+                    style={[
+                      style.content,
+                      isTabletView && style.tabletContent,
+                    ]}>
+                    <View
+                      style={[
+                        style.preview,
+                        isTabletView && style.tabletPreview,
+                        isTabletView && style.tabletFrame,
+                      ]}>
                       <View
-                        style={{
-                          flex: 1,
-                          position: 'relative',
-                          overflow: 'hidden',
-                          borderTopLeftRadius: 12,
-                          borderTopRightRadius: 12,
-                        }}>
+                        style={[
+                          {
+                            flex: 1,
+                            position: 'relative',
+                            overflow: 'hidden',
+                            borderTopLeftRadius: 12,
+                            borderTopRightRadius: 12,
+                          },
+                          isTabletView && style.tabletVideo,
+                        ]}>
                         {isLocalVideoON ? (
                           <View style={style.switchCamera}>
                             <LocalSwitchCamera
@@ -458,7 +472,8 @@ const Precall = (props: any) => {
                         />
                       </View>
                     </View>
-                    <View style={style.footer}>
+                    <View
+                      style={[style.footer, isTabletView && style.tabletFrame]}>
                       <JoinRoomName isDesktop={false} isOnPrecall={true} />
                       <Spacer size={8} horizontal={false} />
                       <JoinRoomButton />
@@ -495,6 +510,21 @@ const style = StyleSheet.create({
   content: {
     flex: 1,
   },
+  tabletContent: {
+    justifyContent: 'center',
+  },
+  tabletPreview: {
+    flex: 0,
+  },
+  tabletFrame: {
+    width: '100%',
+    maxWidth: 600,
+    alignSelf: 'center',
+  },
+  tabletVideo: {
+    flex: 0,
+    aspectRatio: 4 / 3,
+  },
   preview: {
     // paddingHorizontal: 20,
     // paddingBottom: 8,

package/template/src/components/Share.tsx

@@ -18,6 +18,7 @@ import {
   TouchableOpacity,
   Image,
   Pressable,
+  Platform,
 } from 'react-native';
 import platform from '../subComponents/Platform';
 import PrimaryButton from '../atoms/PrimaryButton';
@@ -25,6 +26,7 @@ import SecondaryButton from '../atoms/SecondaryButton';
 import {SHARE_LINK_CONTENT_TYPE, useShareLink} from './useShareLink';
 import {useString} from '../utils/useString';
 import isSDKCheck from '../utils/isSDK';
+import useIsTablet from '../utils/useIsTablet';
 import Logo from '../components/common/Logo';
 import {useRoomInfo} from './room-info/useRoomInfo';
 import {useHistory} from '../components/Router';
@@ -144,7 +146,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
                   style.url,
                   style.urlPadding,
                   //@ts-ignore
-                  isWebCheck ? urlWeb : {opacity: 1},
+                  Platform.OS === 'web' && isWebCheck ? urlWeb : {opacity: 1},
                 ]}>
                 {getShareLink(SHARE_LINK_CONTENT_TYPE.HOST)}
               </Text>
@@ -178,7 +180,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
                   style.url,
                   style.urlPadding,
                   //@ts-ignore
-                  isWebCheck ? urlWeb : {opacity: 1},
+                  Platform.OS === 'web' && isWebCheck ? urlWeb : {opacity: 1},
                 ]}>
                 {getShareLink(SHARE_LINK_CONTENT_TYPE.ATTENDEE)}
               </Text>
@@ -210,7 +212,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
                   style={[
                     style.url,
                     //@ts-ignore
-                    isWebCheck ? urlWeb : {opacity: 1},
+                    Platform.OS === 'web' && isWebCheck ? urlWeb : {opacity: 1},
                   ]}>
                   {shareRoomPSTNNumber} - {pstn?.number} {' | '}{' '}
                   {shareRoomPSTNPin} - {pstn?.pin}
@@ -302,7 +304,7 @@ export const ShowInputURL = (props: ShowInputURLProps) => {
               style.url,
               style.urlPadding,
               //@ts-ignore
-              urlWeb,
+              Platform.OS === 'web' ? urlWeb : {opacity: 1},
             ]}>
             {url}
           </Text>
@@ -314,6 +316,7 @@ export const ShowInputURL = (props: ShowInputURLProps) => {
 };
 
 const Share = () => {
+  const isTabletView = useIsTablet();
   const {FpeShareComponent} = useCustomization(data => {
     let components: {
       FpeShareComponent?: React.ElementType;
@@ -368,8 +371,12 @@ const Share = () => {
       ) : (
         <></>
       )}
-      <ScrollView contentContainerStyle={style.scrollMain}>
-        <Card>
+      <ScrollView
+        contentContainerStyle={[
+          style.scrollMain,
+          isTabletView && style.tabletScrollMain,
+        ]}>
+        <Card cardContainerStyle={isTabletView ? style.tabletCard : undefined}>
           <View>
             <View
               style={{
@@ -425,6 +432,20 @@ const style = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
   },
+  tabletScrollMain: {
+    alignItems: 'center',
+    padding: 24,
+  },
+  tabletCard: {
+    flex: 0,
+    alignSelf: 'center',
+    justifyContent: 'flex-start',
+    paddingHorizontal: 40,
+    paddingVertical: 40,
+    borderRadius: ThemeConfig.BorderRadius.extraLarge,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+  },
   heading: {
     fontSize: ThemeConfig.FontSize.extraLarge,
     fontWeight: '700',