laantungir/minibits_wallet
1
0
Fork 0
mirror of https://github.com/minibits-cash/minibits_wallet.git synced 2026-10-05 11:18:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix animated header, fix pending filter, fix QRShareModal

Browse Source
This commit is contained in:
minibits-cash
2026-03-11 22:13:16 +01:00
parent c1b03ac4a8
commit 5ddc3de9e0
8 changed files with 46 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+1 -1
View File
@@ -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')} />
</View>
<Text text={displayName} style={[$title]} />
<Text text={displayName} style={[$title, {paddingBottom: isAppLocked ? spacing.tiny : spacing.extraLarge}]} />
<View style={{
paddingHorizontal: spacing.large,
paddingBottom: spacing.extraLarge,
src/components/AnimatedHeader.tsx
+11 -45
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { TextStyle, ViewStyle } from 'react-native'
import { TextStyle, View, ViewStyle } from 'react-native'
import Animated, {
SharedValue,
useAnimatedStyle,
@@ -24,91 +24,57 @@ export interface AnimatedHeaderProps {
*/
scrollY: SharedValue<number>
/**
* 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 (
<Animated.View style={[animatedHeaderStyle, $headerContainer, { backgroundColor: headerBg }]}>
<View style={[$headerContainer, { height: maxHeight, backgroundColor: headerBg }]}>
<Animated.Text style={[animatedTitleStyle, $headerTitle, { color: headerTitleColor }]}>
{titleContent}
</Animated.Text>
</Animated.View>
</View>
)
}
const $headerContainer: ViewStyle = {
alignItems: 'center',
justifyContent: 'center',
}
const $headerTitle: TextStyle = {
fontSize: verticalScale(32),
lineHeight: verticalScale(44),
fontFamily: typography.primary?.medium,
marginBottom: spacing.extraLarge * 2,
}
src/components/Header.tsx
+1 -1
View File
@@ -228,7 +228,7 @@ export function Header(props: HeaderProps) {
}
const opacity = interpolate(
scrollY.value,
[0, scrollDistance],
[scrollDistance * 0.5, scrollDistance],
[0, 1],
Extrapolation.CLAMP
)
src/components/QRShareModal.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export const QRShareModal = (props: QRShareModalProps) => {
isVisible={isVisible}
ContentComponent={
<>
{shareModalTx || shareModalTitle && (
{(shareModalTx || shareModalTitle) && (
<Text
tx={shareModalTx}
text={shareModalTitle}
src/screens/PrivacyScreen.tsx
+9 -9
View File
@@ -31,7 +31,7 @@ type Props = StaticScreenProps<undefined>
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 (
<Screen style={$screen} preset='fixed'>
<AnimatedHeader
titleTx="privacyScreen_title"
scrollY={scrollY}
scrollDistance={HEADER_SCROLL_DISTANCE}
/>
<Animated.ScrollView
style={$contentContainer}
onScroll={scrollHandler}
scrollEventThrottle={16}
>
<AnimatedHeader
titleTx="privacyScreen_title"
scrollY={scrollY}
/>
{/*<Card
style={[$card, {marginTop: spacing.medium}]}
ContentComponent={
@@ -288,7 +287,7 @@ export const PrivacyScreen = observer(function PrivacyScreen({ route }: Props) {
}
/>*/}
<Card
style={[$card, {marginTop: spacing.medium}]}
style={[$card, {marginTop: -spacing.extraLarge * 2}]}
ContentComponent={
<>
<ListItem
@@ -425,13 +424,14 @@ const $screen: ViewStyle = {}
const $contentContainer: TextStyle = {
flex: 1,
marginTop: -spacing.extraLarge * 2,
padding: spacing.extraSmall,
// marginTop: -spacing.extraLarge * 2,
// padding: spacing.extraSmall,
// alignItems: 'center',
}
const $card: ViewStyle = {
marginBottom: 0,
marginHorizontal: spacing.small,
}
const $bottomModal: ViewStyle = {
src/screens/RecoveryOptionsScreen.tsx
+10 -9
View File
@@ -39,7 +39,7 @@ type Props = StaticScreenProps<undefined>
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 (
<Screen preset="fixed" contentContainerStyle={$screen}>
<AnimatedHeader
titleTx="recoveryOptionsTitle"
scrollY={scrollY}
scrollDistance={HEADER_SCROLL_DISTANCE}
/>
<Animated.ScrollView
style={$contentContainer}
//contentContainerStyle={{ paddingBottom: HEADER_SCROLL_DISTANCE }}
onScroll={scrollHandler}
scrollEventThrottle={16}
>
<AnimatedHeader
titleTx="recoveryOptionsTitle"
scrollY={scrollY}
/>
<Card
style={$card}
style={[$card, {marginTop: -spacing.extraLarge * 2}]}
HeadingComponent={
<ListItem
tx="seedRecoveryOptions"
@@ -601,8 +601,8 @@ const $screen: ViewStyle = {
const $contentContainer: TextStyle = {
//flex: 1,
marginTop: -spacing.extraLarge * 2,
padding: spacing.extraSmall,
// marginTop: -spacing.extraLarge * 2,
// padding: spacing.extraSmall,
// alignItems: 'center',
}
@@ -641,6 +641,7 @@ const $quoteInput: TextStyle = {
const $card: ViewStyle = {
marginBottom: spacing.small,
marginHorizontal: spacing.small,
}
const $rightContainer: ViewStyle = {
src/screens/SettingsScreen.tsx
+9 -9
View File
@@ -31,7 +31,7 @@ type Props = StaticScreenProps<undefined>
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 (
<Screen contentContainerStyle={$screen} preset='fixed'>
<AnimatedHeader
titleTx="settingsScreen_title"
scrollY={scrollY}
scrollDistance={HEADER_SCROLL_DISTANCE}
/>
<Animated.ScrollView
style={$contentContainer}
onScroll={scrollHandler}
scrollEventThrottle={16}
>
<AnimatedHeader
titleTx="settingsScreen_title"
scrollY={scrollY}
/>
<Card
style={$card}
style={[$card, {marginTop: -spacing.extraLarge * 2}]}
ContentComponent={
<>
<ListItem
@@ -595,12 +594,13 @@ const $screen: ViewStyle = {
}
const $contentContainer: TextStyle = {
marginTop: -spacing.extraLarge * 2,
padding: spacing.extraSmall,
//marginTop: -spacing.extraLarge * 2,
//padding: spacing.extraSmall,
}
const $card: ViewStyle = {
marginHorizontal: spacing.small,
//paddingVertical: 0,
}
src/screens/TranHistoryScreen.tsx
+3 -3
View File
@@ -120,9 +120,9 @@ export const TranHistoryScreen = observer(function TranHistoryScreen({ route }:
log.trace('[initFilter] toggleShowPendingOnly ')
toggleShowPendingOnly()
//@ts-ignore
/* navigation.setParams({
navigation.setParams({
showPending: undefined,
})*/
})
}
}, [])
@@ -349,7 +349,7 @@ export const TranHistoryScreen = observer(function TranHistoryScreen({ route }:
) : (
<Button
preset="secondary"
onPress={addTransactionsToList}
onPress={showPendingOnly ? addPendingTransactionsToList : addTransactionsToList}
tx="tranHistory_viewMore"
style={{minHeight: 25, paddingVertical: spacing.tiny}}
textStyle={{fontSize: 14}}