diff --git a/src/App.tsx b/src/App.tsx
index d4d6dba5..4828d3d4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -196,7 +196,7 @@ function App() {
? require('../android/app/src/main/res/mipmap-xxhdpi/ic_launcher_golden.png')
: require('../android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png')} />
-
+
/**
- * The scroll distance over which the animation occurs.
- * Defaults to spacing.screenHeight * 0.07
- */
- scrollDistance?: number
- /**
- * Maximum header height when not scrolled.
+ * Header height. Title fades out over the first half of this distance.
* Defaults to spacing.screenHeight * 0.15
*/
maxHeight?: number
- /**
- * Minimum header height when fully scrolled.
- * Defaults to spacing.screenHeight * 0.08
- */
- minHeight?: number
}
/**
- * AnimatedHeader component that provides a collapsible header with animated title.
- * Use with Animated.ScrollView and useAnimatedScrollHandler to track scroll position.
+ * AnimatedHeader component with a large title that fades as the user scrolls.
+ * Place this as the first child inside an Animated.ScrollView so that it scrolls
+ * away naturally — no height animation means no layout jitter.
*/
export function AnimatedHeader(props: AnimatedHeaderProps) {
const {
title,
titleTx,
scrollY,
- scrollDistance = spacing.screenHeight * 0.07,
maxHeight = spacing.screenHeight * 0.15,
- minHeight = spacing.screenHeight * 0.08,
} = props
const headerBg = useThemeColor('header')
const headerTitleColor = useThemeColor('headerTitle')
- const animatedHeaderStyle = useAnimatedStyle(() => {
- const height = interpolate(
- scrollY.value,
- [0, scrollDistance],
- [maxHeight, minHeight],
- Extrapolation.CLAMP
- )
- return { height }
- })
-
const animatedTitleStyle = useAnimatedStyle(() => {
- const scale = interpolate(
- scrollY.value,
- [0, scrollDistance],
- [1, 0.75],
- Extrapolation.CLAMP
- )
- const translateY = interpolate(
- scrollY.value,
- [0, scrollDistance],
- [0, -spacing.extraLarge * 1.5],
- Extrapolation.CLAMP
- )
const opacity = interpolate(
scrollY.value,
- [0, scrollDistance * 0.8],
+ [0, maxHeight * 0.5],
[1, 0],
Extrapolation.CLAMP
)
- return {
- transform: [{ scale }, { translateY }],
- opacity,
- }
+ return { opacity }
})
const titleContent = titleTx ? translate(titleTx) : title
return (
-
+
{titleContent}
-
+
)
}
const $headerContainer: ViewStyle = {
alignItems: 'center',
+ justifyContent: 'center',
}
const $headerTitle: TextStyle = {
- fontSize: verticalScale(32),
+ fontSize: verticalScale(32),
lineHeight: verticalScale(44),
fontFamily: typography.primary?.medium,
+ marginBottom: spacing.extraLarge * 2,
}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 348822ef..8457291c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -228,7 +228,7 @@ export function Header(props: HeaderProps) {
}
const opacity = interpolate(
scrollY.value,
- [0, scrollDistance],
+ [scrollDistance * 0.5, scrollDistance],
[0, 1],
Extrapolation.CLAMP
)
diff --git a/src/components/QRShareModal.tsx b/src/components/QRShareModal.tsx
index deddc435..f228255a 100644
--- a/src/components/QRShareModal.tsx
+++ b/src/components/QRShareModal.tsx
@@ -47,7 +47,7 @@ export const QRShareModal = (props: QRShareModalProps) => {
isVisible={isVisible}
ContentComponent={
<>
- {shareModalTx || shareModalTitle && (
+ {(shareModalTx || shareModalTitle) && (
export const PrivacyScreen = observer(function PrivacyScreen({ route }: Props) {
const navigation = useNavigation()
const scrollY = useSharedValue(0)
- const HEADER_SCROLL_DISTANCE = spacing.screenHeight * 0.07
+ const HEADER_SCROLL_DISTANCE = spacing.screenHeight * 0.15
useLayoutEffect(() => {
navigation.setOptions({
@@ -205,16 +205,15 @@ export const PrivacyScreen = observer(function PrivacyScreen({ route }: Props) {
return (
-
+
{/**/}
export const RecoveryOptionsScreen = observer(function RecoveryOptionsScreen(_: Props) {
const navigation = useNavigation()
const scrollY = useSharedValue(0)
- const HEADER_SCROLL_DISTANCE = spacing.screenHeight * 0.07
+ const HEADER_SCROLL_DISTANCE = spacing.screenHeight * 0.15
useLayoutEffect(() => {
navigation.setOptions({
@@ -327,18 +327,18 @@ export const RecoveryOptionsScreen = observer(function RecoveryOptionsScreen(_:
return (
-
+
export const SettingsScreen = observer(function SettingsScreen({ route }: Props) {
const navigation = useNavigation()
const scrollY = useSharedValue(0)
- const HEADER_SCROLL_DISTANCE = spacing.screenHeight * 0.07
+ const HEADER_SCROLL_DISTANCE = spacing.screenHeight * 0.15
useLayoutEffect(() => {
navigation.setOptions({
@@ -315,18 +315,17 @@ export const SettingsScreen = observer(function SettingsScreen({ route }: Props)
return (
-
+