feat(dev): option to render web app inside the mobile app (#1164)

* feat (WIP): render web app inside the mobile app

* fix: web app loading

* chore: build scripts related to mobile web bundle

* feat: show WebView header, which lets to close the WebView

* refactor: remove extra component

* chore: correct type

* chore: remove TODO

Co-authored-by: Mo <mo@standardnotes.com>

packages/mobile/src/Lib/constants.ts

@@ -1,3 +1,7 @@
+import { IsDev } from '@Lib/Utils'
+
 export enum ErrorMessage {
   GeneralText = 'An error occurred. Please try again later.',
 }
+
+export const WebAppOptionEnabled = IsDev

packages/mobile/src/ModalStack.tsx

@@ -18,6 +18,7 @@ import {
   SCREEN_MANAGE_SESSIONS,
   SCREEN_SETTINGS,
   SCREEN_UPLOADED_FILES_LIST,
+  SCREEN_WEB_APP,
 } from '@Root/Screens/screens'
 import { Settings } from '@Root/Screens/Settings/Settings'
 import { UploadedFilesList } from '@Root/Screens/UploadedFilesList/UploadedFilesList'
@@ -29,6 +30,7 @@ import React, { memo, useContext } from 'react'
 import { Platform } from 'react-native'
 import { HeaderButtons, Item } from 'react-navigation-header-buttons'
 import { ThemeContext } from 'styled-components'
+import { MobileWebAppContainer } from '../MobileWebAppContainer'
 import { HeaderTitleParams, TEnvironment } from './App'
 import { ApplicationContext } from './ApplicationContext'
 import { AppStackComponent } from './AppStack'
@@ -63,6 +65,7 @@ export type ModalStackNavigatorParamList = {
     title?: string
     text: string
   }
+  [SCREEN_WEB_APP]: undefined
 }
 
 export type ModalStackNavigationProp<T extends keyof ModalStackNavigatorParamList> = {
@@ -303,6 +306,7 @@ export const MainStackComponent = ({ env }: { env: TEnvironment }) => {
         })}
         component={WorkspaceInputModal}
       />
+      <MainStack.Screen name={SCREEN_WEB_APP} options={() => ({ title: 'App' })} component={MobileWebAppContainer} />
     </MainStack.Navigator>
   )
 }

packages/mobile/src/Screens/Settings/Sections/OptionsSection.tsx

@@ -1,3 +1,4 @@
+import { WebAppOptionEnabled } from '@Lib/constants'
 import { useSignedIn } from '@Lib/SnjsHelperHooks'
 import { useNavigation } from '@react-navigation/native'
 import { ButtonCell } from '@Root/Components/ButtonCell'
@@ -7,7 +8,7 @@ import { SectionHeader } from '@Root/Components/SectionHeader'
 import { TableSection } from '@Root/Components/TableSection'
 import { useSafeApplicationContext } from '@Root/Hooks/useSafeApplicationContext'
 import { ModalStackNavigationProp } from '@Root/ModalStack'
-import { SCREEN_MANAGE_SESSIONS, SCREEN_SETTINGS } from '@Root/Screens/screens'
+import { SCREEN_MANAGE_SESSIONS, SCREEN_SETTINGS, SCREEN_WEB_APP } from '@Root/Screens/screens'
 import { ButtonType, PrefKey } from '@standardnotes/snjs'
 import moment from 'moment'
 import React, { useCallback, useMemo, useState } from 'react'
@@ -182,6 +183,10 @@ export const OptionsSection = ({ title, encryptionAvailable }: Props) => {
     )
   }, [application.alertService])
 
+  const openWebApp = useCallback(() => {
+    navigation.push(SCREEN_WEB_APP)
+  }, [navigation])
+
   return (
     <TableSection>
       <SectionHeader title={title} />
@@ -221,6 +226,10 @@ export const OptionsSection = ({ title, encryptionAvailable }: Props) => {
         onPress={onExportPress}
       />
 
+      {WebAppOptionEnabled && (
+        <ButtonCell testID="openWebApp" leftAligned title={'Open Web App'} onPress={() => openWebApp()} />
+      )}
+
       {!signedIn && (
         <SectionedAccessoryTableCell
           testID="lastExportDate"

packages/mobile/src/Screens/screens.ts

@@ -16,3 +16,5 @@ export const SCREEN_MANAGE_SESSIONS = 'ManageSessions' as const
 export const MODAL_BLOCKING_ALERT = 'ModalBlockingAlert' as const
 
 export const SCREEN_VIEW_PROTECTED_NOTE = 'ViewProtectedNote' as const
+
+export const SCREEN_WEB_APP = 'WebApp' as const