Dashboard and BaseHeader refinements

alephium · Sep 5, 2024 · f52b4bc · f52b4bc
1 parent a48d285
commit f52b4bc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 22 deletions.
diff --git a/apps/mobile-wallet/src/components/headers/BaseHeader.tsx b/apps/mobile-wallet/src/components/headers/BaseHeader.tsx
@@ -18,8 +18,8 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { StackHeaderProps } from '@react-navigation/stack'
 import { Canvas, LinearGradient, Rect, vec } from '@shopify/react-native-skia'
-import { ReactNode, RefObject } from 'react'
-import { Platform, Pressable, useWindowDimensions, ViewProps } from 'react-native'
+import { ReactNode, RefObject, useState } from 'react'
+import { LayoutChangeEvent, Platform, Pressable, useWindowDimensions, ViewProps } from 'react-native'
 import Animated, {
   Extrapolation,
   interpolate,
@@ -64,6 +64,8 @@ const BaseHeader = ({
   const insets = useSafeAreaInsets()
   const theme = useTheme()
   const { width: screenWidth } = useWindowDimensions()
+  const [headerHeight, setHeaderHeight] = useState(80)
+  const gradientHeight = headerHeight + 30
 
   const defaultScrollRange = [0 + scrollEffectOffset, scrollEndThreshold + scrollEffectOffset]
   const paddingTop = isIos ? insets.top : insets.top + 7
@@ -90,19 +92,14 @@ const BaseHeader = ({
       : {}
   )
 
-  const handleCompactHeaderPress = () => {
-    console.log('TODO: Reimplement scroll to top')
-
-    /*
-    if (activeScreenRef?.current) {
-      scrollScreenTo(0, activeScreenRef, true)
-    }
-    */
+  const handleHeaderLayout = (e: LayoutChangeEvent) => {
+    console.log(e.nativeEvent.layout.height)
+    setHeaderHeight(e.nativeEvent.layout.height)
   }
 
   return (
-    <BaseHeaderStyled ref={headerRef} {...props}>
-      <HeaderGradientCanvas pointerEvents="none">
+    <BaseHeaderStyled ref={headerRef} onLayout={handleHeaderLayout} {...props}>
+      <HeaderGradientCanvas pointerEvents="none" height={gradientHeight}>
         <Rect x={0} y={0} width={screenWidth} height={gradientHeight} opacity={animatedOpacity}>
           <LinearGradient
             start={vec(0, gradientHeight / 1.5)}
@@ -115,7 +112,7 @@ const BaseHeader = ({
           />
         </Rect>
       </HeaderGradientCanvas>
-      <Pressable onPress={handleCompactHeaderPress}>
+      <Pressable>
         <HeaderContainer>
           <Header style={{ paddingTop }}>
             {!CustomContent ? (
@@ -152,12 +149,12 @@ const BaseHeaderStyled = styled(Animated.View)`
   z-index: 1;
 `
 
-const HeaderGradientCanvas = styled(Canvas)`
+const HeaderGradientCanvas = styled(Canvas)<{ height: number }>`
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  height: ${gradientHeight}px;
+  height: ${({ height }) => height}px;
 `
 
 const HeaderContainer = styled(Animated.View)`

diff --git a/apps/mobile-wallet/src/screens/Dashboard/AnimatedCirclesBackground.tsx b/apps/mobile-wallet/src/screens/Dashboard/AnimatedCirclesBackground.tsx
@@ -17,6 +17,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Canvas, Circle } from '@shopify/react-native-skia'
+import { useWindowDimensions } from 'react-native'
 import Animated, {
   Extrapolation,
   interpolate,
@@ -35,25 +36,30 @@ interface AnimatedCirclesBackgroundProps {
 
 const AnimatedCirclesBackground = ({ scrollY }: AnimatedCirclesBackgroundProps) => {
   const gyroscope = useAnimatedSensor(SensorType.ROTATION)
+  const { width: screenWidth } = useWindowDimensions()
 
   const parallaxAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: interpolate(scrollY?.value || 0, [-200, 200], [-30, 30], Extrapolation.CLAMP) }]
   }))
 
-  const circle1X = useDerivedValue(() => withSpring(110 + gyroscope.sensor.value.roll * 25, { mass: 20, damping: 20 }))
-  const circle1Y = useDerivedValue(() => withSpring(230 + gyroscope.sensor.value.pitch * 25, { mass: 20, damping: 20 }))
+  const circle1X = useDerivedValue(() => withSpring(80 + gyroscope.sensor.value.roll * 25, { mass: 20, damping: 20 }))
+  const circle1Y = useDerivedValue(() => withSpring(140 + gyroscope.sensor.value.pitch * 25, { mass: 20, damping: 20 }))
 
-  const circle2X = useDerivedValue(() => withSpring(80 + gyroscope.sensor.value.roll * 20, { mass: 40, damping: 20 }))
-  const circle2Y = useDerivedValue(() => withSpring(130 + gyroscope.sensor.value.pitch * 20, { mass: 40, damping: 20 }))
+  const circle2X = useDerivedValue(() =>
+    withSpring(screenWidth / 2 + gyroscope.sensor.value.roll * 20, { mass: 40, damping: 20 })
+  )
+  const circle2Y = useDerivedValue(() => withSpring(90 + gyroscope.sensor.value.pitch * 20, { mass: 40, damping: 20 }))
 
-  const circle3X = useDerivedValue(() => withSpring(310 + gyroscope.sensor.value.roll * 23, { mass: 30, damping: 20 }))
-  const circle3Y = useDerivedValue(() => withSpring(120 + gyroscope.sensor.value.pitch * 23, { mass: 30, damping: 20 }))
+  const circle3X = useDerivedValue(() =>
+    withSpring(screenWidth - 50 + gyroscope.sensor.value.roll * 23, { mass: 30, damping: 20 })
+  )
+  const circle3Y = useDerivedValue(() => withSpring(160 + gyroscope.sensor.value.pitch * 23, { mass: 30, damping: 20 }))
 
   return (
     <AnimatedContainer style={parallaxAnimatedStyle}>
       <AnimatedBackgroundCanvas>
         <Circle r={90} color="#FFA621" cx={circle1X} cy={circle1Y} />
-        <Circle r={96} color="#FF2E21" cx={circle2X} cy={circle2Y} />
+        <Circle r={72} color="#FF2E21" cx={circle2X} cy={circle2Y} />
         <Circle r={80} color="#FB21FF" cx={circle3X} cy={circle3Y} />
       </AnimatedBackgroundCanvas>
     </AnimatedContainer>