agora-appbuilder-core 2.3.0-beta.9 → 3.0.0

package/template/electron/main/index.js

@@ -1,8 +1,7 @@
-const {app, BrowserWindow, session, Menu, Notification } = require('electron');
+const {app, BrowserWindow, session, Menu, Notification} = require('electron');
 
 const log = require('electron-log');
-const {autoUpdater} = require("electron-updater");
-
+const {autoUpdater} = require('electron-updater');
 
 const path = require('path');
 const isDevelopment = process.env.NODE_ENV === 'development';
@@ -20,8 +19,8 @@ autoUpdater.logger.transports.file.level = 'info';
 log.info('App starting...');
 
 const intr = setInterval(() => {
-  autoUpdater.checkForUpdates()
-}, 30000)
+  app.isPackaged && autoUpdater.checkForUpdates();
+}, 30000);
 
 let mainWindow;
 
@@ -31,34 +30,42 @@ function sendStatusToWindow(text) {
 }
 autoUpdater.on('checking-for-update', () => {
   sendStatusToWindow('Checking for update...');
-})
+});
 autoUpdater.on('update-available', (info) => {
   sendStatusToWindow('Update available.');
-})
+});
 autoUpdater.on('update-not-available', (info) => {
   sendStatusToWindow('Update not available.');
-})
+});
 autoUpdater.on('error', (err) => {
   sendStatusToWindow('Error in auto-updater. ' + err);
-})
+});
 autoUpdater.on('download-progress', (progressObj) => {
-  let log_message = "Download speed: " + progressObj.bytesPerSecond;
+  let log_message = 'Download speed: ' + progressObj.bytesPerSecond;
   log_message = log_message + ' - Downloaded ' + progressObj.percent + '%';
-  log_message = log_message + ' (' + progressObj.transferred + "/" + progressObj.total + ')';
+  log_message =
+    log_message +
+    ' (' +
+    progressObj.transferred +
+    '/' +
+    progressObj.total +
+    ')';
   sendStatusToWindow(log_message);
-})
+});
 autoUpdater.on('update-downloaded', (info) => {
   sendStatusToWindow('Update downloaded');
   // autoUpdater.quitAndInstall();
 
-  const NOTIFICATION_TITLE = 'An update is ready'
-  const NOTIFICATION_BODY = 'Please restart your app to complete the update'
+  const NOTIFICATION_TITLE = 'An update is ready';
+  const NOTIFICATION_BODY = 'Please restart your app to complete the update';
 
-  function showNotification () {
-    new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY }).show()
+  function showNotification() {
+    new Notification({
+      title: NOTIFICATION_TITLE,
+      body: NOTIFICATION_BODY,
+    }).show();
   }
   showNotification();
-
 });
 
 const createWindow = () => {
@@ -98,7 +105,7 @@ const createWindow = () => {
       ],
     },
   ];
-  autoUpdater.checkForUpdatesAndNotify();
+  app.isPackaged && autoUpdater.checkForUpdatesAndNotify();
   const menu = Menu.buildFromTemplate(template);
   Menu.setApplicationMenu(menu);
 
@@ -170,7 +177,7 @@ if (isDevelopment && process.platform === 'win32') {
   // These two additional parameters are only available on windows.
   // Setting this is required to get this working in dev mode.
   app.setAsDefaultProtocolClient('appbuilder', process.execPath, [
-    path.resolve(process.argv[1])
+    path.resolve(process.argv[1]),
   ]);
 } else {
   app.setAsDefaultProtocolClient('appbuilder');
@@ -185,38 +192,38 @@ if (gotTheLock) {
     // argv: An array of the second instance’s (command line / deep linked) arguments
     if (process.platform == 'win32') {
       // Keep only command line / deep linked arguments
-      deeplinkingUrl = argv.slice(1)
+      deeplinkingUrl = argv.slice(1);
     }
-    logEverywhere('app.makeSingleInstance# ' + deeplinkingUrl)
+    logEverywhere('app.makeSingleInstance# ' + deeplinkingUrl);
 
     if (mainWindow) {
-      if (mainWindow.isMinimized()) mainWindow.restore()
-      mainWindow.focus()
+      if (mainWindow.isMinimized()) mainWindow.restore();
+      mainWindow.focus();
     }
-  })
-} 
+  });
+}
 
-app.on('will-finish-launching', function() {
+app.on('will-finish-launching', function () {
   // Protocol handler for osx
-  app.on('open-url', function(event, url) {
-    event.preventDefault()
-    deeplinkingUrl = url
-    logEverywhere('open-url# ' + deeplinkingUrl)
-  })
-})
+  app.on('open-url', function (event, url) {
+    event.preventDefault();
+    deeplinkingUrl = url;
+    logEverywhere('open-url# ' + deeplinkingUrl);
+  });
+});
 
 // Log both at dev console and at running node console instance
 function logEverywhere(s) {
-  console.log(s)
+  console.log(s);
   if (mainWindow && mainWindow.webContents) {
-    mainWindow.webContents.executeJavaScript(`console.log("${s}")`)
+    mainWindow.webContents.executeJavaScript(`console.log("${s}")`);
   }
 }
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', ()=> {
+app.on('ready', () => {
   createWindow();
 });
 

package/template/esbuild.rsdk.go

@@ -52,9 +52,9 @@ func commonAliasResolver() api.Plugin {
 				},
 			)
 
-			pb.OnResolve(api.OnResolveOptions{Filter: "fpe-api/install"},
+			pb.OnResolve(api.OnResolveOptions{Filter: "customization-api"},
 				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
-					path, err := filepath.Abs("./fpe-api/install.ts")
+					path, err := filepath.Abs("./customization-api/index.ts")
 					if err != nil {
 						log.Fatalln(err)
 					}
@@ -62,9 +62,9 @@ func commonAliasResolver() api.Plugin {
 				},
 			)
 
-			pb.OnResolve(api.OnResolveOptions{Filter: "fpe-api"},
+			pb.OnResolve(api.OnResolveOptions{Filter: "customization-implementation"},
 				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
-					path, err := filepath.Abs("./fpe-api/index.ts")
+					path, err := filepath.Abs("./customization-implementation/index.ts")
 					if err != nil {
 						log.Fatalln(err)
 					}
@@ -72,23 +72,13 @@ func commonAliasResolver() api.Plugin {
 				},
 			)
 
-			pb.OnResolve(api.OnResolveOptions{Filter: "fpe-implementation"},
+			pb.OnResolve(api.OnResolveOptions{Filter: "customization"},
 				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
-					path, err := filepath.Abs("./fpe-implementation/index.ts")
+					fpePath, err := filepath.Abs("./customization/index.ts")
 					if err != nil {
 						log.Fatalln(err)
 					}
-					return api.OnResolveResult{Path: path}, nil
-				},
-			)
-
-			pb.OnResolve(api.OnResolveOptions{Filter: "test-fpe"},
-				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
-					fpePath, err := filepath.Abs("./test-fpe/index.ts")
-					if err != nil {
-						log.Fatalln(err)
-					}
-					fpeDummyPath, err := filepath.Abs("./fpe-implementation/dummyFpe.ts")
+					fpeDummyPath, err := filepath.Abs("./customization-implementation/dummyConfig.ts")
 					if err != nil {
 						log.Fatalln(err)
 					}
@@ -211,6 +201,7 @@ func rsdk(iopath *ioPaths) api.BuildResult {
 		MinifyWhitespace:  true,
 		MinifyIdentifiers: true,
 		MinifySyntax:      true,
+    Sourcemap:         api.SourceMapExternal,
 
 		// debug options. does not affect bundle size
 		// Metafile: true,

package/template/global.d.ts

@@ -75,9 +75,10 @@ interface ConfigInterface {
   RAISE_HAND: boolean;
   GEO_FENCING: boolean;
   LOG_ENABLED: boolean;
+  AUDIO_ROOM: boolean;
 }
 declare var $config: ConfigInterface;
-declare module 'test-fpe'{
-  const data:{}
-  export default data;
+declare module 'customization' {
+  const customizationConfig: {};
+  export default customizationConfig;
 }

package/template/index.rsdk.tsx

@@ -12,16 +12,24 @@
 /**
  * @format
  */
-import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+import SDKAppWrapper, {
+  AppBuilderSdkApi,
+  AppBuilderSdkApiInterface,
+} from './src/SDKAppWrapper';
 import React from 'react';
-export * from 'fpe-api';
+import * as RN from 'react-native-web';
+
+export * from 'customization-api';
+export * from 'customization-implementation';
 
 interface AppBuilderReactSdkInterface extends AppBuilderSdkApiInterface {
   View: React.FC;
 }
 
 const AppBuilderReactSdkApi: AppBuilderReactSdkInterface = {
-    ...AppBuilderSdkApi,
-    View: SDKAppWrapper,
-  }
+  ...AppBuilderSdkApi,
+  View: SDKAppWrapper,
+};
+
+export {React, RN};
 export default AppBuilderReactSdkApi;

package/template/index.wsdk.tsx

@@ -1,11 +1,26 @@
 import {AppRegistry} from 'react-native';
-import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
-export * from 'fpe-api';
+import SDKAppWrapper, {
+  AppBuilderSdkApi,
+  AppBuilderSdkApiInterface,
+} from './src/SDKAppWrapper';
+import SDKEvents from './src/utils/SdkEvents';
+import React from 'react';
+import * as RN from 'react-native-web';
 
-interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {
-}
+export * from 'customization-api';
+export * from 'customization-implementation';
+
+interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {}
 
-const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = AppBuilderSdkApi;
+const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = {
+  ...AppBuilderSdkApi,
+  // Override customize function for web-sdk
+  customize: (customization) => {
+    SDKEvents.on('addFpeInit', () => {
+      SDKEvents.emit('addFpe', customization);
+    });
+  },
+};
 
 // init code
 class AppBuilder extends HTMLElement {
@@ -24,4 +39,5 @@ class AppBuilder extends HTMLElement {
 
 customElements.define('app-builder', AppBuilder);
 
+export {React, RN};
 export default AppBuilderWebSdkApi;

package/template/package.json

@@ -18,6 +18,7 @@
     "web-sdk:build": "cross-env TARGET=wsdk NODE_ENV=production gulp webSdk",
     "react-sdk": "cross-env TARGET=rsdk NODE_ENV=development gulp reactSdk",
     "react-sdk:build": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdk",
+    "react-sdk:esbuild": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdkEsbuild",
     "electron:start": "cross-env NODE_ENV=development gulp electron_development",
     "electron:build": "cross-env NODE_ENV=production gulp electron_build",
     "windows": "cross-env TARGET=windows npm run electron:start",
@@ -62,6 +63,8 @@
     "electron-updater": "4.3.9",
     "exponential-backoff": "3.1.0",
     "graphql": "15.5.0",
+    "nanoevents": "7.0.1",
+    "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",

package/template/react-native-toast-message/src/index.js

@@ -353,14 +353,14 @@ class Toast extends Component {
 
     const translateY = animation.interpolate({
       inputRange: [0, 1, 2],
-      outputRange: [0, 1, 0]
+      outputRange
     });
 
     return [
       styles.base,
       styles[position],
       {
-        opacity: translateY
+        transform: [{ translateY }]
       }
     ];
   }
@@ -378,11 +378,7 @@ class Toast extends Component {
       <Animated.View
         testID='animatedView'
         onLayout={this.onLayout}
-        style={[
-          baseStyle,
-          style,
-          { zIndex: 100, display: this.state.isVisible || this.state.inProgress ? 'flex' : 'none' }
-        ]} //added zindex
+        style={[baseStyle, style, { zIndex: 100 }]} //added zindex
         {...this.panResponder.panHandlers}>
         {this.renderContent(this.props)}
       </Animated.View>

package/template/react-native-toast-message/src/{index.wsdk.js → index.sdk.tsx}

@@ -381,7 +381,7 @@ class Toast extends Component {
         style={[
           baseStyle,
           style,
-          { zIndex: 100, display: this.state.isVisible ? 'flex' : 'none', backgroundColor:'red' }
+          { zIndex: 100, display: this.state.isVisible ? 'flex' : 'none' }
         ]} //added zindex
         {...this.panResponder.panHandlers}>
         {this.renderContent(this.props)}

package/template/react-native-toast-message/src/styles.sdk.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  base: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    left: 0,
+    right: 0
+  },
+  top: {
+    top: 30
+  },
+  bottom: {
+    bottom: 0
+  }
+});

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,10 +18,11 @@ import {Route, Switch, Redirect} from './components/Router';
 import PrivateRoute from './components/PrivateRoute';
 import OAuth from './components/OAuth';
 import StoreToken from './components/StoreToken';
-import {shouldAuthenticate, isIOS} from './utils/common';
+import {shouldAuthenticate} from './utils/common';
 import KeyboardManager from 'react-native-keyboard-manager';
 // commented for v1 release
-//import {useFpe, CustomRoutesInterface, CUSTOM_ROUTES_PREFIX} from 'fpe-api';
+//import {CustomRoutesInterface, CUSTOM_ROUTES_PREFIX} from 'customization-api';
+//import {useCustomization} from 'customization-implementation';
 import AppWrapper from './AppWrapper';
 import {
   MeetingInfoContextInterface,
@@ -29,7 +31,9 @@ import {
 } from './components/meeting-info/useMeetingInfo';
 import {SetMeetingInfoProvider} from './components/meeting-info/useSetMeetingInfo';
 import {ShareLinkProvider} from './components/useShareLink';
-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);
@@ -51,7 +55,7 @@ declare module 'agora-rn-uikit' {
 
 const App: React.FC = () => {
   //commented for v1 release
-  //const CustomRoutes = useFpe((data) => data?.customRoutes);
+  //const CustomRoutes = useCustomization((data) => data?.customRoutes);
   // const RenderCustomRoutes = () => {
   //   try {
   //     return (

package/template/src/AppWrapper.tsx

@@ -18,23 +18,25 @@ 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 ToastConfig from './subComponents/ToastConfig';
 import {isValidReactComponent} from './utils/common';
 import DimensionProvider from './components/dimension/DimensionProvider';
 import Error from './components/common/Error';
 import {ErrorProvider} from './components/common';
-import {useFpe, FpeProvider, fpeConfig, FpeApiInterface} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import {LanguageProvider} from './language/useLanguage';
 
 interface AppWrapperProps {
   children: React.ReactNode;
-  fpeConfig?: FpeApiInterface;
 }
 
 const AppWrapper = (props: AppWrapperProps) => {
-  const AppRoot = useFpe((data) => {
-    if (data?.appRoot && isValidReactComponent(data.appRoot)) {
-      return data.appRoot;
+  const AppRoot = useCustomization((data) => {
+    if (
+      data?.components?.appRoot &&
+      isValidReactComponent(data?.components?.appRoot)
+    ) {
+      return data.components.appRoot;
     }
     return React.Fragment;
   });

package/template/src/SDKAppWrapper.tsx

@@ -1,6 +1,9 @@
 import React, {useEffect, useState} from 'react';
-import {fpeConfig, FpeProvider, FpeApiInterface} from 'fpe-api';
-import {installFPE as createFPE} from 'fpe-api/install';
+import {CustomizationApiInterface, customize} from 'customization-api';
+import {
+  customizationConfig,
+  CustomizationProvider,
+} from 'customization-implementation';
 import SDKEvents from './utils/SdkEvents';
 import App from './App';
 
@@ -9,9 +12,12 @@ export interface userEventsMapInterface {
   create: (
     hostPhrase: string,
     attendeePhrase?: string,
-    pstnNumer?: string,
+    pstnNumer?: {
+      number: string;
+      pin: string;
+    },
   ) => void;
-  preJoin: (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
+  'ready-to-join': (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
   join: (
     meetingTitle: string,
     devices: MediaDeviceInfo[],
@@ -20,46 +26,47 @@ export interface userEventsMapInterface {
 }
 
 export interface AppBuilderSdkApiInterface {
-  addFPE: (fpe: FpeApiInterface) => void;
-  createFPE: (fpe: FpeApiInterface) => FpeApiInterface;
-  joinMeeting: (joinPhrase: string) => void;
+  customize: (customization: CustomizationApiInterface) => void;
+  createCustomization: (
+    customization: CustomizationApiInterface,
+  ) => CustomizationApiInterface;
+  join: (roomid: string) => Promise<void>;
   on: <T extends keyof userEventsMapInterface>(
     userEventName: T,
     callBack: userEventsMapInterface[T],
   ) => void;
-  off: (userEventName: keyof userEventsMapInterface) => void;
 }
 
 export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
-  addFPE: (fpeConfig: FpeApiInterface) => {
-    SDKEvents.emit('addFpe', fpeConfig);
+  customize: (customization: CustomizationApiInterface) => {
+    SDKEvents.emit('addFpe', customization);
   },
-  joinMeeting: (joinPhrase: string) => {
-    SDKEvents.emit('joinMeetingWithPhrase', joinPhrase);
-  },
-  createFPE,
+  join: (roomid: string) =>
+    new Promise((resolve, reject) => {
+      SDKEvents.emit('joinMeetingWithPhrase', roomid, resolve, reject);
+    }),
+  createCustomization: customize,
   on: (userEventName, cb) => {
     SDKEvents.on(userEventName, cb);
-  },
-  off: (userEventName) => {
-    SDKEvents.off(userEventName);
+    console.log('SDKEvents: Event Registered', userEventName);
   },
 };
 
 const SDKAppWrapper = () => {
-  const [fpe, setFpe] = useState(fpeConfig);
+  const [fpe, setFpe] = useState(customizationConfig);
   useEffect(() => {
     SDKEvents.on('addFpe', (sdkFpeConfig) => {
-      console.log('DEBUG(aditya)-SDKEvents: addFpe event called');
+      console.log('SDKEvents: addFpe event called');
       setFpe(sdkFpeConfig);
     });
+    SDKEvents.emit('addFpeInit');
     // Join event consumed in Create.tsx
   }, []);
   return (
     <>
-      <FpeProvider value={fpe}>
+      <CustomizationProvider value={fpe}>
         <App />
-      </FpeProvider>
+      </CustomizationProvider>
     </>
   );
 };

package/template/src/app-state/useLocalUserInfo.ts

@@ -0,0 +1,8 @@
+import {useLocalUid} from '../../agora-rn-uikit';
+import {useRender} from 'customization-api';
+
+export const useLocalUserInfo = () => {
+  const localUid = useLocalUid();
+  const {renderList} = useRender();
+  return renderList[localUid];
+};

package/template/src/app-state/useMessages.ts

@@ -0,0 +1,52 @@
+import {
+  individualUnreadMessageCount,
+  useChatNotification,
+} from '../components/chat-notification/useChatNotification';
+import {
+  messageStoreInterface,
+  useChatMessages,
+} from '../components/chat-messages/useChatMessages';
+
+export interface messageInterface {
+  groupMessages: messageStoreInterface[];
+  privateMessages: {
+    [key: string]: messageStoreInterface[];
+  };
+  sendMessage: (msg: string, toUid?: number) => void;
+  editMessage: (msgId: string, msg: string, toUid?: number) => void;
+  deleteMessage: (msgId: string, toUid?: number) => void;
+  groupUnreadCount: number;
+  individualUnreadCount: individualUnreadMessageCount;
+  setGroupUnreadCount: React.Dispatch<React.SetStateAction<number>>;
+  setIndividualUnreadCount: React.Dispatch<
+    React.SetStateAction<individualUnreadMessageCount>
+  >;
+}
+
+export const useMessages: () => messageInterface = () => {
+  const {
+    deleteChatMessage: deleteMessage,
+    editChatMessage: editMessage,
+    messageStore: groupMessages,
+    privateMessageStore: privateMessages,
+    sendChatMessage: sendMessage,
+  } = useChatMessages();
+  const {
+    setUnreadIndividualMessageCount: setIndividualUnreadCount,
+    setUnreadGroupMessageCount: setGroupUnreadCount,
+    unreadGroupMessageCount: groupUnreadCount,
+    unreadIndividualMessageCount: individualUnreadCount,
+  } = useChatNotification();
+
+  return {
+    groupMessages,
+    privateMessages,
+    sendMessage,
+    editMessage,
+    deleteMessage,
+    groupUnreadCount,
+    individualUnreadCount,
+    setGroupUnreadCount,
+    setIndividualUnreadCount,
+  };
+};

package/template/src/atoms/PrimaryButton.tsx

@@ -21,11 +21,11 @@ import {
 import {primaryButton, primaryButtonText} from '../../theme.json';
 import ColorContext from '../components/ColorContext';
 
-export interface ButtonProps extends PressableProps {
+export interface PrimaryButtonProps extends PressableProps {
   text?: string;
 }
 
-export default function PrimaryButton(props: ButtonProps) {
+export default function PrimaryButton(props: PrimaryButtonProps) {
   const {primaryColor} = useContext(ColorContext);
   const {children, ...otherProps} = props;
   return (

package/template/src/atoms/SecondaryButton.tsx

@@ -21,26 +21,34 @@ import {
 import {secondaryBtn, secondaryButtonText} from '../../theme.json';
 // import ColorContext from '../components/ColorContext';
 
-export interface ButtonProps extends TouchableOpacityProps {
+export interface SecondaryButtonProps extends TouchableOpacityProps {
   text?: string;
   children?: React.ReactNode;
 }
 
-export default function SecondaryButton(props: ButtonProps) {
+export default function SecondaryButton(props: SecondaryButtonProps) {
   // const primaryColor = $config.PRIMARY_FONT_COLOR; //useContext(ColorContext);
   const {children, ...otherProps} = props;
   return (
     <TouchableOpacity
       style={[
         styles.secondaryBtn,
-        {borderColor: props.disabled ? $config.PRIMARY_COLOR + '80' : $config.PRIMARY_COLOR},
+        {
+          borderColor: props.disabled
+            ? $config.PRIMARY_COLOR + '80'
+            : $config.PRIMARY_COLOR,
+        },
       ]}
       {...otherProps}>
       {props.text ? (
         <Text
           style={[
             styles.secondaryButtonText as StyleProp<TextStyle>,
-            {color: props.disabled ? $config.PRIMARY_COLOR + '80' : $config.PRIMARY_COLOR},
+            {
+              color: props.disabled
+                ? $config.PRIMARY_COLOR + '80'
+                : $config.PRIMARY_COLOR,
+            },
           ]}>
           {props.text}
         </Text>

package/template/src/atoms/TextInput.tsx

@@ -11,7 +11,7 @@
 */
 import React, {useContext} from 'react';
 import {TextInputProps, StyleSheet, TextInput, Platform} from 'react-native';
-import {isWeb} from '../utils/common';
+import {isWebInternal} from '../utils/common';
 import {textInput} from '../../theme.json';
 import ColorContext from '../components/ColorContext';
 
@@ -39,7 +39,7 @@ export default PrimaryButton;
 const styles = StyleSheet.create({
   textInput,
   // @ts-ignore
-  noOutline: isWeb ? {outlineStyle: 'none'} : {},
+  noOutline: isWebInternal() ? {outlineStyle: 'none'} : {},
   textWrapFix: Platform.select({
     ios: {
       paddingVertical: 5,