wallet-stack 1.0.0-alpha.121

package/src/navigator/NavigatorWrapper.test.tsx

@@ -0,0 +1,65 @@
+import { render, waitFor } from '@testing-library/react-native'
+import * as React from 'react'
+import { Linking } from 'react-native'
+import { Provider } from 'react-redux'
+import NavigatorWrapper from 'src/navigator/NavigatorWrapper'
+import { getDynamicConfigParams } from 'src/statsig'
+import { StatsigDynamicConfigs } from 'src/statsig/types'
+import { createMockStore } from 'test/utils'
+
+jest.mock('src/statsig')
+jest.mock('src/navigator/NavigationService', () => ({
+  ...(jest.requireActual('src/navigator/NavigationService') as any),
+  navigatorIsReadyRef: { current: false },
+  navigate: jest.fn(),
+}))
+jest.mock('src/sentry/Sentry', () => ({
+  ...(jest.requireActual('src/sentry/Sentry') as any),
+  sentryRoutingInstrumentation: { registerNavigationContainer: jest.fn() },
+}))
+
+describe('NavigatorWrapper', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('initializes the deep links handlers', async () => {
+    jest.mocked(getDynamicConfigParams).mockImplementation(({ configName }) => {
+      if (configName === StatsigDynamicConfigs.APP_CONFIG) {
+        return {
+          minRequiredVersion: '0.0.1', // matches DeviceInfo mocks
+        }
+      }
+      return {} as any
+    })
+
+    const { queryByText } = render(
+      <Provider store={createMockStore()}>
+        <NavigatorWrapper />
+      </Provider>
+    )
+
+    await waitFor(() => expect(Linking.addEventListener).toHaveBeenCalled())
+    expect(Linking.getInitialURL).toHaveBeenCalled()
+    expect(queryByText('appUpdateAvailable')).toBeFalsy()
+  })
+
+  it('shows the upgrade screen if the version is below the minimum', () => {
+    jest.mocked(getDynamicConfigParams).mockImplementation(({ configName }) => {
+      if (configName === StatsigDynamicConfigs.APP_CONFIG) {
+        return {
+          minRequiredVersion: '2.0.0', // greater than DeviceInfo mocks
+        }
+      }
+      return {} as any
+    })
+
+    const { getByText } = render(
+      <Provider store={createMockStore()}>
+        <NavigatorWrapper />
+      </Provider>
+    )
+
+    expect(getByText('appUpdateAvailable')).toBeTruthy()
+  })
+})

package/src/navigator/NavigatorWrapper.tsx

@@ -0,0 +1,248 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { useLogger } from '@react-navigation/devtools'
+import { NavigationContainer, NavigationState } from '@react-navigation/native'
+import * as Sentry from '@sentry/react-native'
+import { SeverityLevel } from '@sentry/types'
+import * as SplashScreen from 'expo-splash-screen'
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
+import DeviceInfo from 'react-native-device-info'
+import LinearGradient from 'react-native-linear-gradient'
+import ShakeForSupport from 'src/account/ShakeForSupport'
+import AlertBanner from 'src/alert/AlertBanner'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import UpgradeScreen from 'src/app/UpgradeScreen'
+import { activeScreenChanged } from 'src/app/actions'
+import { getAppLocked } from 'src/app/selectors'
+import { useDeepLinks } from 'src/app/useDeepLinks'
+import { DEV_RESTORE_NAV_STATE_ON_RELOAD } from 'src/config'
+import {
+  navigateClearingStack,
+  navigationRef,
+  navigatorIsReadyRef,
+} from 'src/navigator/NavigationService'
+import Navigator from 'src/navigator/Navigator'
+import { Screens } from 'src/navigator/Screens'
+import PincodeLock from 'src/pincode/PincodeLock'
+import HooksPreviewModeBanner from 'src/positions/HooksPreviewModeBanner'
+import { useDispatch, useSelector } from 'src/redux/hooks'
+import { sentryRoutingInstrumentation } from 'src/sentry/Sentry'
+import { getDynamicConfigParams } from 'src/statsig'
+import { DynamicConfigs } from 'src/statsig/constants'
+import { StatsigDynamicConfigs } from 'src/statsig/types'
+import appTheme from 'src/styles/appTheme'
+import Colors from 'src/styles/colors'
+import variables from 'src/styles/variables'
+import Logger from 'src/utils/Logger'
+import { userInSanctionedCountrySelector } from 'src/utils/countryFeatures'
+import { isVersionBelowMinimum } from 'src/utils/versionCheck'
+import { demoModeEnabledSelector } from 'src/web3/selectors'
+
+SplashScreen.preventAutoHideAsync().catch((e) => Logger.error('SplashSceen', e))
+
+// This uses RN Navigation's experimental nav state persistence
+// to improve the hot reloading experience when in DEV mode
+// https://reactnavigation.org/docs/en/state-persistence.html
+const PERSISTENCE_KEY = 'NAVIGATION_STATE'
+
+// @ts-ignore https://reactnavigation.org/docs/screen-tracking/
+const getActiveRouteName = (state: NavigationState) => {
+  const route = state.routes[state.index]
+
+  if (route.state) {
+    // @ts-ignore Dive into nested navigators
+    return getActiveRouteName(route.state)
+  }
+
+  return route.name
+}
+
+const RESTORE_STATE = __DEV__ && DEV_RESTORE_NAV_STATE_ON_RELOAD
+
+export const NavigatorWrapper = () => {
+  const [isReady, setIsReady] = React.useState(RESTORE_STATE ? false : true)
+  const [initialState, setInitialState] = React.useState()
+  const appLocked = useSelector(getAppLocked)
+  const { minRequiredVersion } = getDynamicConfigParams(
+    DynamicConfigs[StatsigDynamicConfigs.APP_CONFIG]
+  )
+  const routeNameRef = React.useRef<string>(undefined)
+  const inSanctionedCountry = useSelector(userInSanctionedCountrySelector)
+  const demoModeEnabled = useSelector(demoModeEnabledSelector)
+
+  const dispatch = useDispatch()
+
+  useLogger({ current: navigationRef.current as any })
+  useDeepLinks()
+
+  const updateRequired = React.useMemo(() => {
+    if (!minRequiredVersion) {
+      return false
+    }
+    const version = DeviceInfo.getVersion()
+    Logger.info(
+      'NavigatorWrapper',
+      `Current version: ${version}. Required min version: ${minRequiredVersion}`
+    )
+    return isVersionBelowMinimum(version, minRequiredVersion)
+  }, [minRequiredVersion])
+
+  React.useEffect(() => {
+    if (inSanctionedCountry) {
+      navigateClearingStack(Screens.SanctionedCountryErrorScreen)
+    }
+  }, [inSanctionedCountry])
+
+  React.useEffect(() => {
+    if (navigationRef && navigationRef.current) {
+      const state = navigationRef.current.getRootState()
+
+      if (state) {
+        // Save the initial route name
+        routeNameRef.current = getActiveRouteName(state)
+      }
+    }
+  }, [])
+
+  React.useEffect(() => {
+    const restoreState = async () => {
+      const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY)
+      if (savedStateString) {
+        try {
+          const state = JSON.parse(savedStateString)
+
+          setInitialState(state)
+        } catch (e) {
+          Logger.error('NavigatorWrapper', 'Error getting nav state', e)
+        }
+      }
+      setIsReady(true)
+    }
+
+    if (!isReady) {
+      restoreState().catch((error) =>
+        Logger.error('NavigatorWrapper', 'Error persisting nav state', error)
+      )
+    }
+  }, [isReady])
+
+  React.useEffect(() => {
+    return () => {
+      navigatorIsReadyRef.current = false
+    }
+  }, [])
+
+  if (!isReady) {
+    return null
+  }
+
+  const handleStateChange = (state: NavigationState | undefined) => {
+    if (state === undefined) {
+      return
+    }
+
+    if (RESTORE_STATE) {
+      AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state)).catch((error) =>
+        Logger.error('NavigatorWrapper', 'Error persisting nav state', error)
+      )
+    }
+
+    const previousRouteName = routeNameRef.current
+    const currentRouteName = getActiveRouteName(state)
+
+    if (previousRouteName !== currentRouteName) {
+      AppAnalytics.page(currentRouteName, {
+        previousScreen: previousRouteName,
+        currentScreen: currentRouteName,
+      })
+      dispatch(activeScreenChanged(currentRouteName as Screens))
+      Sentry.addBreadcrumb({
+        category: 'navigation',
+        message: `Navigated to ${currentRouteName}`,
+        level: 'info' as SeverityLevel,
+      })
+    }
+
+    // Save the current route name for later comparision
+    routeNameRef.current = currentRouteName
+  }
+
+  const onReady = () => {
+    navigatorIsReadyRef.current = true
+    sentryRoutingInstrumentation.registerNavigationContainer(navigationRef)
+    requestAnimationFrame(() =>
+      SplashScreen.hideAsync().catch((e) => Logger.error('SplashSceen', e))
+    )
+  }
+
+  return (
+    <NavigationContainer
+      navigationInChildEnabled
+      ref={navigationRef}
+      onReady={onReady}
+      onStateChange={handleStateChange}
+      initialState={initialState}
+      theme={appTheme}
+    >
+      <LinearGradient
+        colors={[Colors.brandGradientLeft, Colors.brandGradientRight]}
+        locations={[0, 0.8915]}
+        useAngle={true}
+        angle={90}
+        style={styles.linearGradientBackground}
+      >
+        <View
+          style={[
+            styles.container,
+            { margin: demoModeEnabled ? variables.demoModeBorderWidth : 0 },
+          ]}
+        >
+          <Navigator />
+          <HooksPreviewModeBanner />
+          {(appLocked || updateRequired) && (
+            <View style={styles.locked}>
+              {updateRequired ? <UpgradeScreen /> : <PincodeLock />}
+            </View>
+          )}
+          <AlertBanner />
+          <ShakeForSupport />
+        </View>
+      </LinearGradient>
+    </NavigationContainer>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+  },
+  linearGradientBackground: {
+    flex: 1,
+  },
+  locked: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+  },
+})
+
+export const navbarStyle: {
+  headerMode: 'none'
+} = {
+  headerMode: 'none',
+}
+
+export const headerArea = {
+  navigationOptions: {
+    headerStyle: {
+      elevation: 0,
+    },
+  },
+}
+
+export default NavigatorWrapper

package/src/navigator/QRNavigator.test.tsx

@@ -0,0 +1,61 @@
+import { render } from '@testing-library/react-native'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import QRNavigator, { QRCodePicker, QRCodeProps } from 'src/navigator/QRNavigator'
+import MockedNavigator from 'test/MockedNavigator'
+import { createMockStore } from 'test/utils'
+
+jest.mock('src/qrcode/StyledQRGen', () => jest.fn().mockReturnValue(''))
+jest.mock('expo-camera', () => ({
+  CameraView: 'CameraView',
+}))
+
+const mockStore = createMockStore({
+  web3: {
+    account: '0x0000',
+  },
+  account: {
+    name: 'username',
+  },
+})
+
+function getProps(): QRCodeProps {
+  // getMockStackScreenProps won't work for the tab navigator
+  return {
+    route: {
+      params: {},
+    },
+    qrSvgRef: jest.fn(),
+  } as any
+}
+
+describe('QRNavigator', () => {
+  describe('QRCodePicker', () => {
+    beforeEach(() => {
+      jest.clearAllMocks()
+    })
+
+    it('renders the new style', async () => {
+      const { queryByTestId } = render(
+        <Provider store={mockStore}>
+          <QRCodePicker {...getProps()} />
+        </Provider>
+      )
+      expect(queryByTestId('styledQRCode')).toBeTruthy()
+      expect(queryByTestId('supportedNetworksNotification')).toBeTruthy()
+    })
+  })
+  describe('QRNavigator component', () => {
+    it('renders tabs for scan and my code', () => {
+      const { queryByText, queryByTestId } = render(
+        <Provider store={mockStore}>
+          <MockedNavigator component={QRNavigator} />
+        </Provider>
+      )
+
+      expect(queryByTestId('Times')).toBeTruthy()
+      expect(queryByText('myCode')).toBeTruthy()
+      expect(queryByText('scanCode')).toBeTruthy()
+    })
+  })
+})

package/src/navigator/QRNavigator.tsx

@@ -0,0 +1,144 @@
+import {
+  MaterialTopTabBarProps,
+  createMaterialTopTabNavigator,
+} from '@react-navigation/material-top-tabs'
+import { useIsFocused } from '@react-navigation/native'
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import React, { useEffect, useRef, useState } from 'react'
+import { useAsync } from 'react-async-hook'
+import { useTranslation } from 'react-i18next'
+import { Dimensions, Platform, StatusBar, StyleSheet, View } from 'react-native'
+import { PERMISSIONS, RESULTS, check } from 'react-native-permissions'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { QrScreenEvents } from 'src/analytics/Events'
+import { noHeader } from 'src/navigator/Headers'
+import { Screens } from 'src/navigator/Screens'
+import { QRTabParamList, StackParamList } from 'src/navigator/types'
+import QRCode from 'src/qrcode/QRCode'
+import QRScanner from 'src/qrcode/QRScanner'
+import QRTabBar from 'src/qrcode/QRTabBar'
+import { useDispatch } from 'src/redux/hooks'
+import { SVG, handleQRCodeDetected } from 'src/send/actions'
+import { QrCode } from 'src/send/types'
+import Logger from 'src/utils/Logger'
+
+const Tab = createMaterialTopTabNavigator()
+
+const width = Dimensions.get('window').width
+const initialLayout = { width }
+
+export type QRCodeProps = NativeStackScreenProps<QRTabParamList, Screens.QRCode> & {
+  qrSvgRef: React.MutableRefObject<SVG>
+}
+
+export function QRCodePicker({ route, qrSvgRef, ...props }: QRCodeProps) {
+  const onPressCopy = () => {
+    AppAnalytics.track(QrScreenEvents.qr_screen_copy_address)
+  }
+  return <QRCode {...props} qrSvgRef={qrSvgRef} onPressCopy={onPressCopy} />
+}
+
+type ScannerSceneProps = NativeStackScreenProps<QRTabParamList, Screens.QRScanner>
+
+// Component doing our custom transition for the QR scanner
+function ScannerScene({ route }: ScannerSceneProps) {
+  const lastScannedQR = useRef('')
+  const dispatch = useDispatch()
+  const defaultOnQRCodeDetected = (qrCode: QrCode) =>
+    dispatch(
+      handleQRCodeDetected({
+        qrCode,
+        defaultTokenIdOverride: route?.params?.defaultTokenIdOverride,
+      })
+    )
+  const { onQRCodeDetected: onQRCodeDetectedParam = defaultOnQRCodeDetected } = route.params || {}
+  const isFocused = useIsFocused()
+  const [wasFocused, setWasFocused] = useState(isFocused)
+  const cameraPermission = useAsync(check, [
+    Platform.select({ ios: PERMISSIONS.IOS.CAMERA, default: PERMISSIONS.ANDROID.CAMERA }),
+  ])
+  // DENIED means the permission has not been requested / is denied but requestable
+  const hasAskedCameraPermission =
+    cameraPermission.result !== undefined && cameraPermission.result !== RESULTS.DENIED
+
+  useEffect(() => {
+    if (isFocused && !wasFocused) {
+      setWasFocused(true)
+    }
+  }, [isFocused])
+
+  // This only enables the camera when necessary.
+  // There a special treatment for when we haven't asked the user for camera permission yet.
+  // In that case we want to wait for the screen to be fully focused before enabling the camera so the
+  // prompt doesn't show up in the middle of the slide animation.
+  const enableCamera = isFocused || hasAskedCameraPermission || wasFocused
+
+  const onQRCodeDetectedWrapper = (qrCode: QrCode) => {
+    if (lastScannedQR.current === qrCode.data) {
+      return
+    }
+    Logger.debug('QRScanner', 'Bar code detected')
+    onQRCodeDetectedParam(qrCode)
+    lastScannedQR.current = qrCode.data
+  }
+
+  return (
+    <View style={styles.viewContainer}>
+      {isFocused && <StatusBar barStyle="light-content" />}
+      {enableCamera && <QRScanner onQRCodeDetected={onQRCodeDetectedWrapper} />}
+    </View>
+  )
+}
+
+type Props = NativeStackScreenProps<StackParamList, Screens.QRNavigator>
+
+export default function QRNavigator({ route }: Props) {
+  const qrSvgRef = useRef<SVG>(undefined)
+  const { t } = useTranslation()
+
+  const tabBar = (props: MaterialTopTabBarProps) => (
+    <QRTabBar
+      {...props}
+      qrSvgRef={qrSvgRef}
+      canSwitch={!route.params?.params?.showSecureSendStyling}
+      leftIcon={route.params?.params?.showSecureSendStyling ? 'back' : 'times'}
+    />
+  )
+
+  return (
+    <Tab.Navigator
+      tabBar={tabBar}
+      // Trick to position the tabs floating on top
+      tabBarPosition="bottom"
+      initialLayout={initialLayout}
+    >
+      <Tab.Screen name={Screens.QRCode} options={{ title: t('myCode') ?? undefined }}>
+        {({ route, navigation }) => (
+          <QRCodePicker
+            navigation={navigation}
+            route={{
+              ...route,
+              params: { ...route.params },
+            }}
+            qrSvgRef={qrSvgRef}
+          />
+        )}
+      </Tab.Screen>
+      <Tab.Screen name={Screens.QRScanner} options={{ title: t('scanCode') ?? undefined }}>
+        {(props) => <ScannerScene {...props} />}
+      </Tab.Screen>
+    </Tab.Navigator>
+  )
+}
+
+QRNavigator.navigationOptions = {
+  ...noHeader,
+}
+
+const styles = StyleSheet.create({
+  viewContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/navigator/Screens.tsx

@@ -0,0 +1,107 @@
+export type ScreensType = typeof Screens
+export enum Screens {
+  AccountKeyEducation = 'AccountKeyEducation',
+  AccounSetupFailureScreen = 'AccounSetupFailureScreen',
+  BackupComplete = 'BackupComplete',
+  BackupIntroduction = 'BackupIntroduction',
+  BackupPhrase = 'BackupPhrase',
+  BackupQuiz = 'BackupQuiz',
+  FiatDetailsScreen = 'FiatDetailsScreen',
+  BidaliScreen = 'BidaliScreen',
+  CashInSuccess = 'CashInSuccess',
+  ConsumerIncentivesHomeScreen = 'ConsumerIncentivesHomeScreen',
+  DappShortcutsRewards = 'DappShortcutsRewards',
+  DappShortcutTransactionRequest = 'DappShortcutTransactionRequest',
+  DappsScreen = 'DappsScreen',
+  DebugImages = 'DebugImages',
+  DemoModeAuthBlock = 'DemoModeAuthBlock',
+  EarnInfoScreen = 'EarnInfoScreen',
+  EarnEnterAmount = 'EarnEnterAmount',
+  EarnDepositConfirmationScreen = 'EarnDepositConfirmationScreen',
+  EarnWithdrawConfirmationScreen = 'EarnWithdrawConfirmationScreen',
+  EarnHome = 'EarnHome',
+  TabEarn = 'TabEarn',
+  EarnPoolInfoScreen = 'EarnPoolInfoScreen',
+  EnableBiometry = 'EnableBiometry',
+  ErrorScreen = 'ErrorScreen',
+  ExternalExchanges = 'ExternalExchanges',
+  ExchangeQR = 'ExchangeQR',
+  FiatExchangeAmount = 'FiatExchangeAmount',
+  FiatExchangeCurrency = 'FiatExchangeCurrency',
+  FiatExchangeCurrencyBottomSheet = 'FiatExchangeCurrencyBottomSheet',
+  FiatConnectLinkAccount = 'FiatConnectLinkAccount',
+  FiatConnectReview = 'FiatConnectReview',
+  FiatConnectRefetchQuote = 'FiatConnectRefetchQuote',
+  FiatConnectTransferStatus = 'FiatConnectTransferStatus',
+  GoldEducation = 'GoldEducation',
+  ImportSelect = 'ImportSelect',
+  ImportWallet = 'ImportWallet',
+  KeylessBackupPhoneInput = 'KeylessBackupPhoneInput',
+  KeylessBackupPhoneCodeInput = 'KeylessBackupPhoneCodeInput',
+  KeylessBackupProgress = 'KeylessBackupProgress',
+  KeylessBackupIntro = 'KeylessBackupIntro',
+  KycInactive = 'KycInactive',
+  KycDenied = 'KycDenied',
+  KycPending = 'KycPending',
+  KycExpired = 'KycExpired',
+  Language = 'Language',
+  LanguageModal = 'LanguageModal',
+  Licenses = 'Licenses',
+  LinkPhoneNumber = 'LinkPhoneNumber',
+  JumpstartTransactionDetailsScreen = 'JumpstartTransactionDetailsScreen',
+  Main = 'Main',
+  MainModal = 'MainModal',
+  NotificationCenter = 'NotificationCenter',
+  NftsInfoCarousel = 'NftsInfoCarousel',
+  OnboardingRecoveryPhrase = 'OnboardingRecoveryPhrase',
+  OnboardingSuccessScreen = 'OnboardingSuccessScreen',
+  PincodeEnter = 'PincodeEnter',
+  PincodeSet = 'PincodeSet',
+  PointsHome = 'PointsHome',
+  PrivateKey = 'PrivateKey',
+  PointsIntro = 'PointsIntro',
+  Profile = 'Profile',
+  ProfileSubmenu = 'ProfileSubmenu',
+  LegalSubmenu = 'LegalSubmenu',
+  PreferencesSubmenu = 'PreferencesSubmenu',
+  SecuritySubmenu = 'SecuritySubmenu',
+  SettingsMenu = 'SettingsMenu',
+  ProtectWallet = 'ProtectWallet',
+  QRCode = 'QRCode',
+  QRNavigator = 'QRNavigator',
+  QRScanner = 'QRScanner',
+  RegulatoryTerms = 'RegulatoryTerms',
+  SanctionedCountryErrorScreen = 'SanctionedCountryErrorScreen',
+  SelectCountry = 'SelectCountry',
+  SelectLocalCurrency = 'SelectLocalCurrency',
+  SelectProvider = 'SelectProvider',
+  SendSelectRecipient = 'SendSelectRecipient',
+  SendConfirmation = 'SendConfirmation',
+  SendEnterAmount = 'SendEnterAmount',
+  SignInWithEmail = 'SignInWithEmail',
+  Simplex = 'Simplex',
+  Spend = 'Spend',
+  StoreWipeRecoveryScreen = 'StoreWipeRecoveryScreen',
+  Support = 'Support',
+  SupportContact = 'SupportContact',
+  SwapScreenWithBack = 'SwapScreenWithBack',
+  TabNavigator = 'TabNavigator',
+  TabDiscover = 'TabDiscover',
+  TabHome = 'TabHome',
+  TabWallet = 'TabWallet',
+  TokenDetails = 'TokenDetails',
+  TokenDetailsMoreActions = 'TokenDetailsMoreActions',
+  TokenImport = 'TokenImport',
+  TransactionDetailsScreen = 'TransactionDetailsScreen',
+  UpgradeScreen = 'UpgradeScreen',
+  ValidateRecipientAccount = 'ValidateRecipientAccount',
+  ValidateRecipientIntro = 'ValidateRecipientIntro',
+  VerificationCodeInputScreen = 'VerificationCodeInputScreen',
+  VerificationStartScreen = 'VerificationStartScreen',
+  WalletConnectRequest = 'WalletConnectRequest',
+  WalletConnectSessions = 'WalletConnectSessions',
+  WalletSecurityPrimer = 'WalletSecurityPrimer',
+  WebViewScreen = 'WebViewScreen',
+  Welcome = 'Welcome',
+  WithdrawSpend = 'WithdrawSpend',
+}

package/src/navigator/ScrollAwareHeader.tsx

@@ -0,0 +1,57 @@
+import { NativeStackNavigationProp } from '@react-navigation/native-stack'
+import React, { useLayoutEffect } from 'react'
+import Animated, { useAnimatedStyle, useDerivedValue } from 'react-native-reanimated'
+import { HeaderTitleWithSubtitle } from 'src/navigator/Headers'
+import { StackParamList } from 'src/navigator/types'
+
+interface Props {
+  title: string | React.ReactNode
+  subtitle?: string | null
+  scrollPosition: Animated.SharedValue<number>
+  navigation: NativeStackNavigationProp<StackParamList, keyof StackParamList>
+  startFadeInPosition: number
+  animationDistance: number
+}
+
+// This header is blank, after starting to scroll it will fade in the title and
+// subtitle according to scroll position. The fade in starts at
+// startFadeInPosition (in pt), and will be completely visible with opacity 1 at
+// the scroll distance of animationDistance.
+const useScrollAwareHeader = ({
+  navigation,
+  title,
+  subtitle,
+  scrollPosition,
+  startFadeInPosition,
+  animationDistance,
+}: Props) => {
+  const animatedScreenHeaderOpacity = useDerivedValue(() => {
+    if (startFadeInPosition <= 0) {
+      // initial render
+      return 0
+    }
+
+    const animatedValue = (scrollPosition.value - startFadeInPosition) / animationDistance
+
+    // return only values between 0 and 1
+    return Math.max(0, Math.min(1, animatedValue))
+  }, [scrollPosition.value, startFadeInPosition, animationDistance])
+
+  const animatedScreenHeaderStyles = useAnimatedStyle(() => {
+    return {
+      opacity: animatedScreenHeaderOpacity.value,
+    }
+  }, [animatedScreenHeaderOpacity.value])
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerTitle: () => (
+        <Animated.View style={animatedScreenHeaderStyles}>
+          <HeaderTitleWithSubtitle title={title} subTitle={subtitle} />
+        </Animated.View>
+      ),
+    })
+  }, [navigation, title, subtitle, animatedScreenHeaderStyles])
+}
+
+export default useScrollAwareHeader