diff --git a/output.log b/output.log deleted file mode 100644 index 46b134b..0000000 --- a/output.log +++ /dev/null @@ -1 +0,0 @@ -ÿþ \ No newline at end of file diff --git a/src/screens/DeveloperScreen.tsx b/src/screens/DeveloperScreen.tsx index 2a7f55a..af7c8a2 100644 --- a/src/screens/DeveloperScreen.tsx +++ b/src/screens/DeveloperScreen.tsx @@ -1,6 +1,8 @@ import {observer} from 'mobx-react-lite' -import React, {FC, useEffect, useState} from 'react' -import {Alert, Platform, ScrollView, TextStyle, View, ViewStyle} from 'react-native' +import React, {FC, useEffect, useLayoutEffect, useState} from 'react' +import {Alert, Platform, TextStyle, View, ViewStyle} from 'react-native' +import Animated, {useSharedValue} from 'react-native-reanimated' +import {useTabBarInset, useTabBarScrollHandler} from '../navigation/tabBarVisibility' import {colors, spacing, useThemeColor} from '../theme' import { APP_ENV, @@ -20,8 +22,9 @@ import { InfoModal, BottomModal, Button, + Header, + AnimatedHeader, } from '../components' -import {useHeader} from '../utils/useHeader' import {rootStoreInstance, useStores} from '../models' import {translate} from '../i18n' import AppError from '../utils/AppError' @@ -41,10 +44,23 @@ type Props = StaticScreenProps export const DeveloperScreen = observer(function DeveloperScreen({ route }: Props) { const navigation = useNavigation() - useHeader({ - leftIcon: 'faArrowLeft', - onLeftPress: () => navigation.goBack(), - }) + const scrollY = useSharedValue(0) + const HEADER_SCROLL_DISTANCE = spacing.screenHeight * 0.15 + + useLayoutEffect(() => { + navigation.setOptions({ + headerShown: true, + header: () => ( +
navigation.goBack()} + scrollY={scrollY} + scrollDistance={HEADER_SCROLL_DISTANCE} + /> + ), + }) + }, []) const {transactionsStore, userSettingsStore, proofsStore, walletProfileStore, authStore} = useStores() const rootStore = useStores() @@ -286,23 +302,26 @@ export const DeveloperScreen = observer(function DeveloperScreen({ route }: Prop setError(e) } - const headerBg = useThemeColor('header') const iconSelectedColor = useThemeColor('button') const iconColor = useThemeColor('textDim') - const headerTitle = useThemeColor('headerTitle') + + const scrollHandler = useTabBarScrollHandler(scrollY) + const tabBarInset = useTabBarInset() return ( - - - + + - - } /> - + { - scrollY.value = event.contentOffset.y - }, - }) + const scrollHandler = useTabBarScrollHandler(scrollY) + const tabBarInset = useTabBarInset() return ( - + @@ -313,11 +311,11 @@ export const OptimizeEcashScreen = function OptimizeEcash(_props: Props) { } const $screen: ViewStyle = { - // flex: 1, + //flex: 1, } const $contentContainer: TextStyle = { - //flex: 1, + //flex: 1, } const $card: ViewStyle = { diff --git a/src/screens/PrivacyScreen.tsx b/src/screens/PrivacyScreen.tsx index c4b6246..6d9ec8b 100644 --- a/src/screens/PrivacyScreen.tsx +++ b/src/screens/PrivacyScreen.tsx @@ -3,8 +3,8 @@ import React, {FC, useEffect, useState, useLayoutEffect} from 'react' import {Switch, TextStyle, View, ViewStyle} from 'react-native' import Animated, { useSharedValue, - useAnimatedScrollHandler, } from 'react-native-reanimated' +import {useTabBarInset, useTabBarScrollHandler} from '../navigation/tabBarVisibility' import {colors, spacing, useThemeColor} from '../theme' import { ListItem, @@ -197,16 +197,14 @@ export const PrivacyScreen = observer(function PrivacyScreen({ route }: Props) { const iconColor = useThemeColor('textDim') - const scrollHandler = useAnimatedScrollHandler({ - onScroll: (event) => { - scrollY.value = event.contentOffset.y - }, - }) + const scrollHandler = useTabBarScrollHandler(scrollY) + const tabBarInset = useTabBarInset() return ( - + @@ -287,7 +285,7 @@ export const PrivacyScreen = observer(function PrivacyScreen({ route }: Props) { } />*/} @@ -315,17 +315,15 @@ export const RecoveryOptionsScreen = observer(function RecoveryOptionsScreen(_: const mintsModalBg = useThemeColor('background') const inputText = useThemeColor('text') - const scrollHandler = useAnimatedScrollHandler({ - onScroll: (event) => { - scrollY.value = event.contentOffset.y - }, - }) + const scrollHandler = useTabBarScrollHandler(scrollY) + const tabBarInset = useTabBarInset() return ( - + @@ -334,7 +332,7 @@ export const RecoveryOptionsScreen = observer(function RecoveryOptionsScreen(_: scrollY={scrollY} /> ( )} onPress={gotoAdd} - style={[{backgroundColor: mainButtonColor, borderWidth: 1, borderColor: screenBg}, $buttonNew]} + //style={[{backgroundColor: mainButtonColor, borderWidth: 1, borderColor: screenBg}, $buttonNew]} preset='tertiary' - text='Add' + tx='buttonAdd' /> diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx index 6ca6696..3d92dea 100644 --- a/src/screens/SettingsScreen.tsx +++ b/src/screens/SettingsScreen.tsx @@ -307,7 +307,7 @@ export const SettingsScreen = observer(function SettingsScreen({ route }: Props) const tabBarInset = useTabBarInset() return ( - + (null) const [transaction, setTransaction] = useState() @@ -233,8 +242,22 @@ export const TranDetailScreen = observer(function TranDetailScreen({ route }: Pr const inputText = useThemeColor('text') const statusColor = useThemeColor('header') + const scrollHandler = useTabBarScrollHandler(scrollY) + const tabBarInset = useTabBarInset() + + // Mirrors AnimatedHeader: the amount fades over the first half of the header's + // height while the block itself scrolls away, so there is no layout jitter. + const animatedAmount = useAnimatedStyle(() => ({ + opacity: interpolate( + scrollY.value, + [0, HEADER_SCROLL_DISTANCE * 0.5], + [1, 0], + Extrapolation.CLAMP, + ), + })) + return ( - + {transaction && ( <> - + @@ -278,11 +307,10 @@ export const TranDetailScreen = observer(function TranDetailScreen({ route }: Pr ]} /> - )} - - + )} + )} - + )} {error && } @@ -1974,12 +2002,16 @@ const $headerContainer: TextStyle = { alignItems: 'center', paddingBottom: spacing.medium, height: spacing.screenHeight * 0.15, + // Cancels $contentContainer's padding so the header's background still meets the + // MintHeader above it and spans the full width, now that it scrolls inside the + // scroll view rather than sitting above it. + marginHorizontal: -spacing.extraSmall, + marginTop: -spacing.extraSmall, } const $contentContainer: TextStyle = { - // flex: 1, + flex: 1, padding: spacing.extraSmall, - marginTop: -spacing.extraLarge * 1.5, paddingBottom: spacing.medium, } diff --git a/src/screens/WalletScreen.tsx b/src/screens/WalletScreen.tsx index af38c89..f9cc372 100644 --- a/src/screens/WalletScreen.tsx +++ b/src/screens/WalletScreen.tsx @@ -755,7 +755,8 @@ export const WalletScreen = observer(function WalletScreen({ route }: Props) { /> } - style={isNwcCompact ? [$nwcCard, $nwcCardCompact] : $nwcCard} + //style={isNwcCompact ? [$nwcCard, $nwcCardCompact] : $nwcCard} + style={$nwcCardCompact} /> ) @@ -1241,8 +1242,8 @@ const $headerContainer: TextStyle = { const $tabContainer: TextStyle = { marginTop: -spacing.extraLarge * 1.5, paddingTop: spacing.small, - //borderWidth: 1, - //borderColor: 'green', + // borderWidth: 1, + // borderColor: 'green', } @@ -1253,7 +1254,7 @@ const $rightContainer: ViewStyle = { } const $card: ViewStyle = { - marginBottom: spacing.small, + //marginBottom: spacing.small, marginHorizontal: spacing.extraSmall, } @@ -1285,26 +1286,29 @@ const CARD_SHADOW_ALLOWANCE = 20 const $tabView: ViewStyle = { flexGrow: 0, flexShrink: 0, - //borderWidth: 1, - //borderColor: 'red', + // borderWidth: 1, + // borderColor: 'red', + marginBottom: 0, + paddingBottom: 0, } // Flexible band that takes the space left between the TabView and the buttons. // The top gap must clear the transactions card's drop shadow (offset 10 + // radius 8 ≈ 18px), otherwise on shorter/wider screens the NWC card gets pushed // up under the shadow. The bottom gap keeps the card off the Scan button. -const NWC_BAND_TOP_GAP = spacing.large +const NWC_BAND_TOP_GAP = 0 const NWC_BAND_BOTTOM_GAP = spacing.small const $middleContainer: ViewStyle = { flex: 1, - justifyContent: 'flex-end', - paddingTop: NWC_BAND_TOP_GAP, + //justifyContent: 'flex-start', + //paddingTop: NWC_BAND_TOP_GAP, paddingBottom: NWC_BAND_BOTTOM_GAP, + //borderWidth: 1, } const $nwcContainer: ViewStyle = { - //flexShrink: 1, + flexShrink: 1, paddingHorizontal: spacing.extraSmall, //borderWidth: 1, //borderColor: 'red', @@ -1324,6 +1328,8 @@ const NWC_CARD_FULL_HEIGHT = verticalScale(84) // card can shrink when the band is squeezed on shorter/wider screens. Combined // with the collapsed label→amount gap in renderNwcCard. const $nwcCardCompact: ViewStyle = { + width: spacing.screenWidth * 0.28, + marginRight: spacing.small, minHeight: verticalScale(48), paddingVertical: spacing.tiny, }