diff --git a/src/app/Components/ArtsyWebView.tsx b/src/app/Components/ArtsyWebView.tsx index 9db07a5a6bd..ecc1e15325a 100644 --- a/src/app/Components/ArtsyWebView.tsx +++ b/src/app/Components/ArtsyWebView.tsx @@ -10,12 +10,14 @@ import { ArtsyKeyboardAvoidingView } from "app/utils/ArtsyKeyboardAvoidingView" import { useBackHandler } from "app/utils/hooks/useBackHandler" import { useDevToggle } from "app/utils/hooks/useDevToggle" import { useEnvironment } from "app/utils/hooks/useEnvironment" +import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { Schema } from "app/utils/track" import { useWebViewCallback } from "app/utils/useWebViewEvent" import { debounce } from "lodash" import { parse as parseQueryString } from "query-string" import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react" import { Platform, View } from "react-native" +import { Edge, SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context" import Share from "react-native-share" import WebView, { WebViewNavigation, WebViewProps } from "react-native-webview" import { useTracking } from "react-tracking" @@ -41,6 +43,10 @@ export interface ArtsyWebViewConfig { * Always present in a modal */ alwaysPresentModally?: boolean + /** + * Always present in a modal + */ + safeAreaEdges?: Array } type WebViewWithShareTitleUrl = WebView & { shareTitleUrl: string } @@ -55,6 +61,7 @@ export const ArtsyWebViewPage = ({ systemBackAction, backProps, backAction, + safeAreaEdges, }: { url: string isPresentedModally?: boolean @@ -62,6 +69,9 @@ export const ArtsyWebViewPage = ({ systemBackAction?: () => void backAction?: () => void } & ArtsyWebViewConfig) => { + const saInsets = useSafeAreaInsets() + const enableNewNavigation = useFeatureFlag("AREnableNewNavigation") + const [canGoBack, setCanGoBack] = useState(false) const webURL = useEnvironment().webURL const ref = useRef(null) @@ -123,7 +133,11 @@ export const ArtsyWebViewPage = ({ const leftButton = useRightCloseButton && !canGoBack ? undefined : handleBackButtonPress return ( - + { @@ -159,12 +174,20 @@ export const ArtsyWebView = forwardRef< url: string onNavigationStateChange?: WebViewProps["onNavigationStateChange"] isPresentedModally?: boolean + safeAreaEdges?: Array } >( ( - { url, onNavigationStateChange: onNavigationStateChangeProp, isPresentedModally = false }, + { + url, + onNavigationStateChange: onNavigationStateChangeProp, + isPresentedModally = false, + safeAreaEdges = [], + }, ref ) => { + const enableNewNavigation = useFeatureFlag("AREnableNewNavigation") + const innerRef = useRef(null) useImperativeHandle(ref, () => innerRef.current as WebViewWithShareTitleUrl) const userAgent = getCurrentEmissionState().userAgent @@ -244,8 +267,10 @@ export const ArtsyWebView = forwardRef< } } + const WebViewWrapper = isPresentedModally && !enableNewNavigation ? SafeAreaView : View + return ( - + webview )} - + ) } ) diff --git a/src/app/Scenes/BottomTabs/BottomTabs.tsx b/src/app/Scenes/BottomTabs/BottomTabs.tsx index 568a1dc94b4..261f3e19e01 100644 --- a/src/app/Scenes/BottomTabs/BottomTabs.tsx +++ b/src/app/Scenes/BottomTabs/BottomTabs.tsx @@ -18,7 +18,6 @@ export const BottomTabs: React.FC = (props) => { const focusedRoute = findFocusedRoute(props.state) const params = focusedRoute?.params as any const module = modules[params?.moduleName as AppModule] - // const unreadConversationsCount = 3 const unreadConversationsCount = GlobalStore.useAppState( (state) => state.bottomTabs.sessionState.unreadCounts.conversations ) diff --git a/src/app/system/devTools/DevMenu/DevMenu.tsx b/src/app/system/devTools/DevMenu/DevMenu.tsx index 464324c43bc..8f05b2a7ebd 100644 --- a/src/app/system/devTools/DevMenu/DevMenu.tsx +++ b/src/app/system/devTools/DevMenu/DevMenu.tsx @@ -33,17 +33,15 @@ export const DevMenu = ({ onClose = () => goBack() }: { onClose(): void }) => { useBackHandler(handleBackButton) useEffect(() => { - queueMicrotask(() => { - if (enableNewNavigation) { - navigation?.setOptions({ - headerRight: () => ( - - - - ), - }) - } - }) + if (enableNewNavigation) { + navigation?.setOptions({ + headerRight: () => ( + + + + ), + }) + } }, [navigation]) return ( diff --git a/src/app/utils/hooks/useBackHandler.ts b/src/app/utils/hooks/useBackHandler.ts index 274d9a7ab52..b998bfe930b 100644 --- a/src/app/utils/hooks/useBackHandler.ts +++ b/src/app/utils/hooks/useBackHandler.ts @@ -1,5 +1,6 @@ import { useFocusEffect } from "@react-navigation/native" import { goBack } from "app/system/navigation/navigate" +import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { useCallback, useEffect } from "react" import { BackHandler, InteractionManager } from "react-native" @@ -23,8 +24,14 @@ export function useBackHandler(handler: () => boolean) { * */ export function useAndroidGoBack() { + const enableNewNavigation = useFeatureFlag("AREnableNewNavigation") + useFocusEffect( useCallback(() => { + if (enableNewNavigation) { + return + } + const onBackPress = () => { // this is needed in order to wait for the animation to finish // before moving to the previous screen for better performance