agora-appbuilder-core 4.0.0-beta.1 → 4.0.0-beta.10

package/package.json

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

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

@@ -331,31 +331,34 @@ const Create = ({
         });
 
         engine.current.addListener('AudioVolumeIndication', (...args) => {
-          const [remoteUserVolumes, localUserVolume] = args;
-          const localUserObj = {
-            uid: rtcProps.uid,
-            volume: localUserVolume,
-          };
-          const volumes = [...remoteUserVolumes, localUserObj];
-          /* finding obj with highest volume level from local & remote users*/
-          const highestvolumeObj = volumes.reduce(function (prev, current) {
-            return prev.volume > current.volume ? prev : current;
-          });
-
-          const activeSpeakerUid = highestvolumeObj
-            ? highestvolumeObj.uid
-            : undefined;
-          // console.log('highest volume obj', highestvolumeObj);
-
-          highestvolumeObj.volume > 0 &&
-            dispatch({
-              type: 'ActiveSpeakerDetected',
-              value: [activeSpeakerUid],
-            });
+          // console.log('-- AudioVolumeCallback', args);
+          const [speakers, totalVolume] = args;
+          if (speakers[0]?.uid === 0) {
+            //callback for local user
+            const isLocalUserSpeaking = speakers[0].vad; //1-speaking ,  0-not speaking
+            const localUserVolumeLevel = speakers[0].volume;
+            // vad value is not consistent while speaking so using volume level
+            if (localUserVolumeLevel > 0) {
+              dispatch({
+                type: 'ActiveSpeakerDetected',
+                value: [rtcProps.uid],
+              });
+            } else {
+              dispatch({
+                type: 'ActiveSpeakerDetected',
+                value: [undefined],
+              });
+            }
+          } else {
+            // remote users callback, this will be handeled in ActiveSpeaker callback(367)
+            // const highestvolumeObj = speakers.reduce(function (prev, current) {
+            //   return prev.volume > current.volume ? prev : current;
+            // }, null);
+          }
         });
 
         engine.current.addListener('ActiveSpeaker', (...args) => {
-          // used as a callback from the web bridge
+          // used as a callback from the web bridge as well remote users
           dispatch({
             type: 'ActiveSpeakerDetected',
             value: args,

package/template/android/app/src/main/AndroidManifest.xml

@@ -1,40 +1,34 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+<manifest
+	xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.helloworld">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-     <!-- for bg audio , foreground service -->
-    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
-    <uses-permission android:name="android.permission.WAKE_LOCK" />
-
-    <application
+	<uses-permission android:name="android.permission.INTERNET" />
+	<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+	<uses-permission android:name="android.permission.WAKE_LOCK" />
+	<application
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme">
-      
-       <!-- for bg audio , foreground service -->
-      <meta-data android:name="com.supersami.foregroundservice.notification_channel_name" 	android:value="AppBuilder"/> 
-      <meta-data  android:name="com.supersami.foregroundservice.notification_channel_description" android:value="AppBuilder is running"/> 
-      <meta-data  android:name="com.supersami.foregroundservice.notification_color"      android:resource="@color/blue"/> 
-      <service android:name="com.supersami.foregroundservice.ForegroundService"></service> 
-      <service android:name="com.supersami.foregroundservice.ForegroundServiceTask"></service>
-
-      <activity
+		<activity
         android:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
         android:launchMode="singleTask"
         android:windowSoftInputMode="adjustResize"
         android:screenOrientation="portrait"
-          android:exported="true">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>
-
+        android:exported="true">
+			<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+		<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+		<meta-data android:name="com.supersami.foregroundservice.notification_channel_name" android:value="AppBuilder"/>
+		<meta-data android:name="com.supersami.foregroundservice.notification_channel_description" android:value="AppBuilder is running"/>
+		<meta-data android:name="com.supersami.foregroundservice.notification_color" android:resource="@color/blue"/>
+		<service android:name="com.supersami.foregroundservice.ForegroundService" />
+		<service android:name="com.supersami.foregroundservice.ForegroundServiceTask" />
+	</application>
 </manifest>

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

@@ -192,8 +192,8 @@ export default class RtcEngine {
   private inScreenshare: Boolean = false;
   private videoProfile: VideoProfile = '480p_9';
   private isPublished = false;
-  private isAudioEnabled = true;
-  private isVideoEnabled = true;
+  private isAudioEnabled = false;
+  private isVideoEnabled = false;
   private isAudioPublished = false;
   private isVideoPublished = false;
   private isJoined = false;
@@ -229,6 +229,10 @@ export default class RtcEngine {
     try {
       let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
       this.localStream.audio = localAudio;
+      this.audioDeviceId = localAudio
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.isAudioEnabled = true;
     } catch (e) {
       let audioError = e;
       e.status = {audioError};
@@ -262,6 +266,14 @@ export default class RtcEngine {
         );
       this.localStream.audio = localAudio;
       this.localStream.video = localVideo;
+      this.audioDeviceId = localAudio
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.videoDeviceId = localVideo
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.isVideoEnabled = true;
+      this.isAudioEnabled = true;
     } catch (e) {
       let audioError = false;
       let videoError = false;
@@ -269,12 +281,20 @@ export default class RtcEngine {
         let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
 
         this.localStream.audio = localAudio;
+        this.audioDeviceId = localAudio
+          ?.getMediaStreamTrack()
+          .getSettings().deviceId;
+        this.isAudioEnabled = true;
       } catch (error) {
         audioError = error;
       }
       try {
         let localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
         this.localStream.video = localVideo;
+        this.videoDeviceId = localVideo
+          ?.getMediaStreamTrack()
+          .getSettings().deviceId;
+        this.isVideoEnabled = true;
       } catch (error) {
         videoError = error;
       }

package/template/global.d.ts

@@ -76,7 +76,7 @@ interface ConfigInterface {
   PRIMARY_ACTION_TEXT_COLOR: string;
   SECONDARY_ACTION_COLOR: string;
   FONT_COLOR: string;
-  BACKGROUND_IMAGE: string;
+  BG: string;
   BACKGROUND_COLOR: string;
   VIDEO_AUDIO_TILE_COLOR: string;
   VIDEO_AUDIO_TILE_OVERLAY_COLOR: string;
@@ -85,7 +85,7 @@ interface ConfigInterface {
   SEMANTIC_ERROR: string;
   SEMANTIC_SUCCESS: string;
   SEMANTIC_WARNING: string;
-  SEMANTIC_NETRUAL: string;
+  SEMANTIC_NEUTRAL: string;
   INPUT_FIELD_BACKGROUND_COLOR: string;
   INPUT_FIELD_BORDER_COLOR: string;
   CARD_LAYER_1_COLOR: string;

package/template/index.rsdk.tsx

@@ -18,6 +18,7 @@ import SDKAppWrapper, {
 } from './src/SDKAppWrapper';
 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';

package/template/index.wsdk.tsx

@@ -6,7 +6,7 @@ import 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';
 

package/template/react-native-toast-message/src/components/checkbox.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { View, TouchableOpacity, Text, Pressable } from 'react-native';
 import PropTypes from 'prop-types';
 import { stylePropType } from '../utils/prop-types';
@@ -17,6 +17,7 @@ function BaseToast({
   contentContainerStyle,
   text1Style,
   text2Style,
+  subTextStyle,
   activeOpacity,
   text1NumberOfLines,
   text2NumberOfLines,
@@ -90,7 +91,7 @@ function BaseToast({
                 marginRight: 8
               }}
             />
-            <Text style={{ color: 'white' }}>{checkbox.text}</Text>
+            <Text style={subTextStyle}>{checkbox.text}</Text>
           </Pressable>
         )}
         {primaryBtn || secondaryBtn ? (
@@ -114,6 +115,7 @@ function BaseToast({
                 {...primaryBtn}
                 onPress={(e) => {
                   primaryBtn.onPress(checked, e);
+                  setChecked(false);
                 }}
               />
             )}
@@ -126,6 +128,10 @@ function BaseToast({
                   paddingVertical: 0
                 }}
                 {...secondaryBtn}
+                onPress={(e) => {
+                  secondaryBtn.onPress(checked, e);
+                  setChecked(false);
+                }}
               />
             )}
           </View>
@@ -143,7 +149,7 @@ BaseToast.propTypes = {
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,
   text1: PropTypes.string,
-  text2: PropTypes.string || PropTypes.element,
+  text2: PropTypes.string || PropTypes.element || PropTypes.any,
   onPress: PropTypes.func,
   style: stylePropType,
   contentContainerStyle: stylePropType,

package/template/src/AppWrapper.tsx

@@ -75,9 +75,7 @@ const AppWrapper = (props: AppWrapperProps) => {
 
   return (
     <AppRoot>
-      <ImageBackgroundComp
-        bg={$config.BACKGROUND_IMAGE}
-        color={$config.BACKGROUND_COLOR}>
+      <ImageBackgroundComp bg={$config.BG} color={$config.BACKGROUND_COLOR}>
         <SafeAreaView
           // @ts-ignore textAlign not supported by TS definitions but is applied to web regardless
           style={[{flex: 1}, Platform.select({web: {textAlign: 'left'}})]}>

package/template/src/assets/font-styles.css

@@ -1,6 +1,8 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap");
+
 @font-face {
   font-family: 'icomoon';
-  src: url('fonts/icomoon.ttf?6qgqxy') format('truetype');
+  src: url('https://dbudicf5k4as1.cloudfront.net/10/icomoon.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: block;

package/template/src/atoms/Dropdown.tsx

@@ -169,7 +169,7 @@ const Dropdown: FC<Props> = ({
               iconType="plain"
               name={icon}
               iconSize={20}
-              tintColor={$config.SEMANTIC_NETRUAL}
+              tintColor={$config.SEMANTIC_NEUTRAL}
             />
           </View>
         ) : (

package/template/src/atoms/PrimaryButton.tsx

@@ -38,7 +38,7 @@ export default function PrimaryButton(props: PrimaryButtonProps) {
       style={[
         styles.container,
         props?.disabled
-          ? {backgroundColor: $config.SEMANTIC_NETRUAL}
+          ? {backgroundColor: $config.SEMANTIC_NEUTRAL}
           : {backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR},
         containerStyle ? containerStyle : {},
       ]}

package/template/src/atoms/Toggle.tsx

@@ -20,7 +20,7 @@ const Toggle = (props: SwitchProps) => {
         onValueChange={toggleSwitch}
         disabled={false}
         backgroundActive={$config.PRIMARY_ACTION_BRAND_COLOR}
-        backgroundInactive={$config.SEMANTIC_NETRUAL}
+        backgroundInactive={$config.SEMANTIC_NEUTRAL}
         circleActiveColor={$config.CARD_LAYER_1_COLOR}
         circleInActiveColor={$config.CARD_LAYER_1_COLOR}
         // renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.)

package/template/src/components/Controls.tsx

@@ -423,6 +423,7 @@ const style = StyleSheet.create({
     alignItems: 'center',
   },
   centerContent: {
+    zIndex: 2,
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',

package/template/src/components/DeviceConfigure.tsx

@@ -224,13 +224,22 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     }
   };
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      navigator.mediaDevices.enumerateDevices();
+    }, 2000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
   useEffect(() => {
     // Labels are empty in firefox when permission is granted first time
     // refresh device list if labels are empty
 
     const logTag = 'useEffect[rtc,store]';
 
-    if (activeDeviceId && deviceList.length !== 0) {
+    if (activeDeviceId && deviceList.length > 0) {
       // If stream exists and selected devices are empty, check for devices again
       if (!selectedCam || selectedCam.trim().length == 0) {
         log(logTag, 'cam: Device list populated but No selected cam');
@@ -307,6 +316,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   const commonOnChangedEvent = async (changedDeviceData: DeviceInfo) => {
     // Extracted devicelist because we want to perform fallback with
     // the most current version.
+    const previousDeviceList = deviceList;
     const updatedDeviceList = await refreshDeviceList();
     const changedDevice = changedDeviceData.device;
 
@@ -330,7 +340,40 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
 
     log(logTag, changedDeviceData);
 
-    if (changedDeviceData.state === 'ACTIVE') {
+    if (currentDevice === 'default') {
+      // const previousDefaultDevice = previousDeviceList.find(
+      //   (device) => device.deviceId === 'default',
+      // );
+      // const currentDefaultDevice = updatedDeviceList.find(
+      //   (device) => device.deviceId === 'default',
+      // );
+      //   log(logTag, 'current Default device', {
+      //     changedDeviceData,
+      //     previousDeviceList,
+      //     updatedDeviceList,
+      //     previousDefaultDevice,
+      //     currentDefaultDevice,
+      //   });
+      // if (previousDefaultDevice.groupId !== currentDefaultDevice.groupId) {
+      //   log(logTag, 'Default device changed', {
+      //     changedDeviceData,
+      //     previousDeviceList,
+      //     updatedDeviceList,
+      //     previousDefaultDevice,
+      //     currentDefaultDevice,
+      //   });
+      //   setCurrentDevice('default');
+      // }
+      setCurrentDevice('default');
+    }
+
+    const didChangeDeviceExistBefore = previousDeviceList.find(
+      (device) => device.deviceId === changedDevice.deviceId,
+    )
+      ? true
+      : false;
+
+    if (changedDeviceData.state === 'ACTIVE' && !didChangeDeviceExistBefore) {
       const rememberedDevice =
         rememberedDevicesList[changedDevice.kind][changedDevice.deviceId];
 
@@ -348,24 +391,22 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         return;
       }
     }
-    if (selectedMic === 'default') {
-      setCurrentDevice('default');
-    }
   };
 
   // Port this to useEffectEvent(https://beta.reactjs.org/reference/react/useEffectEvent) when
   // released
   useEffect(() => {
+    log('previous devicelist updated', deviceList);
     AgoraRTC.onMicrophoneChanged = commonOnChangedEvent;
-  }, [selectedMic]);
+  }, [selectedMic, deviceList]);
 
   useEffect(() => {
     AgoraRTC.onPlaybackDeviceChanged = commonOnChangedEvent;
-  }, [selectedSpeaker]);
+  }, [selectedSpeaker, deviceList]);
 
   useEffect(() => {
     AgoraRTC.onCameraChanged = commonOnChangedEvent;
-  }, [selectedCam]);
+  }, [selectedCam, deviceList]);
 
   const setSelectedMic = (deviceId: deviceId) => {
     log('mic: setting to', deviceId);
@@ -375,7 +416,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         () => {
           syncSelectedDeviceUi('audioinput');
           updateActiveDeviceId('audioinput', deviceId);
-          res();
+          res(null);
         },
         (e: any) => {
           console.error('DeviceConfigure: Error setting mic', e);
@@ -393,7 +434,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         () => {
           syncSelectedDeviceUi('videoinput');
           updateActiveDeviceId('videoinput', deviceId);
-          res();
+          res(null);
         },
         (e: any) => {
           console.error('Device Configure: Error setting webcam', e);
@@ -411,7 +452,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         () => {
           setUiSelectedSpeaker(deviceId);
           updateActiveDeviceId('audiooutput', deviceId);
-          res();
+          res(null);
         },
         (e: any) => {
           console.error('Device Configure: Error setting speaker', e);

package/template/src/components/DeviceContext.tsx

@@ -13,11 +13,11 @@ import {createContext} from 'react';
 
 interface DeviceContext {
   selectedCam: string;
-  setSelectedCam: (cam: string) => void;
+  setSelectedCam: (cam: string) => Promise<any>;
   selectedMic: string;
-  setSelectedMic: (mic: string) => void;
+  setSelectedMic: (mic: string) => Promise<any>;
   selectedSpeaker: string;
-  setSelectedSpeaker: (speaker: string) => void;
+  setSelectedSpeaker: (speaker: string) => Promise<any>;
   deviceList: MediaDeviceInfo[];
   setDeviceList: (devices: MediaDeviceInfo[]) => void;
 }
@@ -27,9 +27,9 @@ const DeviceContext = createContext<DeviceContext>({
   selectedMic: '',
   selectedSpeaker: '',
   deviceList: [],
-  setSelectedCam: () => {},
-  setSelectedMic: () => {},
-  setSelectedSpeaker: () => {},
+  setSelectedCam: async () => {},
+  setSelectedMic: async () => {},
+  setSelectedSpeaker: async () => {},
   setDeviceList: () => {},
 });
 export default DeviceContext;

package/template/src/components/NetworkQualityContext.tsx

@@ -37,7 +37,7 @@ export const networkIconsObject: {
 } = {
   0: {
     icon: 'connection-unsupported',
-    tint: $config.SEMANTIC_NETRUAL,
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'unknown',
   },
   1: {
@@ -72,12 +72,12 @@ export const networkIconsObject: {
   },
   7: {
     icon: 'connection-unpublished',
-    tint: $config.SEMANTIC_NETRUAL,
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'unpublished',
   },
   8: {
     icon: 'connection-loading',
-    tint: $config.SEMANTIC_NETRUAL,
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'loading',
   },
 };

package/template/src/components/PinnedVideo.tsx

@@ -127,10 +127,18 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
             }
             return (
               <Pressable
+                //old
                 //if user pinned somebody then side panel items should not be clickable - swap video should be called
                 //instead we will show replace pin button on hovering the video tile
+                //old
                 disabled={
-                  activeSpeaker || pinnedUid || screenShareOn ? true : false
+                  //old fix
+                  //activeSpeaker || pinnedUid || screenShareOn ? true : false
+                  //old fix
+
+                  //latest fix : pinned video sidepanel layout should not be clickable
+                  //if user hover on it we will show pin for me/replace pin(if someone already pinned) button
+                  true
                 }
                 style={
                   isSidePinnedlayout

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

@@ -379,7 +379,7 @@ const style = StyleSheet.create({
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.small,
     lineHeight: 18,
-    color: $config.SEMANTIC_NETRUAL,
+    color: $config.SEMANTIC_NEUTRAL,
     textAlign: 'left',
   },
   btnContainerStyle: {maxWidth: 337, alignSelf: 'center', marginTop: 50},

package/template/src/components/Precall.tsx

@@ -382,7 +382,7 @@ const style = StyleSheet.create({
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.small,
     lineHeight: 18,
-    color: $config.SEMANTIC_NETRUAL,
+    color: $config.SEMANTIC_NEUTRAL,
     textAlign: 'left',
   },
   btnContainerStyle: {maxWidth: 337, alignSelf: 'center', marginTop: 50},

package/template/src/components/SettingsView.tsx

@@ -116,7 +116,7 @@ const EditName: React.FC = (props?: EditNameProps) => {
             name="person"
             iconSize={20}
             iconType="plain"
-            tintColor={$config.SEMANTIC_NETRUAL}
+            tintColor={$config.SEMANTIC_NEUTRAL}
           />
           <TextInput
             maxLength={maxInputLimit}

package/template/src/components/participants/Participant.tsx

@@ -169,7 +169,7 @@ const Participant = (props: ParticipantInterface) => {
                                 tintColor: isVideoEnabled
                                   ? $config.PRIMARY_ACTION_BRAND_COLOR
                                   : isPermissionDenied
-                                  ? $config.SEMANTIC_NETRUAL
+                                  ? $config.SEMANTIC_NEUTRAL
                                   : $config.SEMANTIC_ERROR,
                               };
                             }}
@@ -202,7 +202,7 @@ const Participant = (props: ParticipantInterface) => {
                               tintColor: isAudioEnabled
                                 ? $config.PRIMARY_ACTION_BRAND_COLOR
                                 : isPermissionDenied
-                                ? $config.SEMANTIC_NETRUAL
+                                ? $config.SEMANTIC_NEUTRAL
                                 : $config.SEMANTIC_ERROR,
                             };
                           }}

package/template/src/components/precall/LocalMute.tsx

@@ -12,7 +12,12 @@
 import React, {useState, useEffect, useContext} from 'react';
 import {View, StyleSheet} from 'react-native';
 import {useCustomization} from 'customization-implementation';
-import {isAndroid, isIOS, isValidReactComponent} from '../../utils/common';
+import {
+  isAndroid,
+  isIOS,
+  isMobileUA,
+  isValidReactComponent,
+} from '../../utils/common';
 import LocalVideoMute, {
   LocalVideoMuteProps,
 } from '../../subComponents/LocalVideoMute';
@@ -99,7 +104,7 @@ const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
       <View style={{width: 52, height: 52}}>
         <AudioMute
           isMobileView={isMobileView}
-          showLabel={!isMobileView}
+          showLabel={isMobileUA() ? !isMobileView : $config.ICON_TEXT}
           showToolTip={true}
         />
       </View>
@@ -114,7 +119,7 @@ const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
             }}>
             <VideoMute
               isMobileView={isMobileView}
-              showLabel={!isMobileView}
+              showLabel={isMobileUA() ? !isMobileView : $config.ICON_TEXT}
               showToolTip={true}
             />
           </View>

package/template/src/components/precall/PreCallSettings.tsx

@@ -46,7 +46,7 @@ const styles = StyleSheet.create({
     borderColor: $config.CARD_LAYER_3_COLOR,
     borderRadius: 4,
     padding: 0,
-    maxWidth: '90%',
+    width: '100%',
   },
   containerStyle: {},
 });

package/template/src/pages/Authenticate.tsx

@@ -33,7 +33,7 @@ const Authenticate = () => {
   const oauthProviderLabel = 'Please select an OAuth provider to login.';
   return (
     <ImageBackground
-      source={{uri: $config.BACKGROUND_IMAGE}}
+      source={{uri: $config.BG}}
       style={style.full}
       resizeMode={'cover'}>
       <View style={style.main}>

package/template/src/pages/Create.tsx

@@ -181,7 +181,7 @@ const Create = () => {
           tintColor={
             isToolTipVisible
               ? $config.SECONDARY_ACTION_COLOR
-              : $config.SEMANTIC_NETRUAL
+              : $config.SEMANTIC_NEUTRAL
           }
         />
       </Pressable>