Dynamic FooterMenu gradient height

apps/mobile-wallet/src/components/footers/FooterMenu.tsx

@@ -18,7 +18,8 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
 import { Canvas, LinearGradient, Rect, vec } from '@shopify/react-native-skia'
-import { StyleProp, useWindowDimensions, View, ViewStyle } from 'react-native'
+import { useState } from 'react'
+import { LayoutChangeEvent, StyleProp, useWindowDimensions, View, ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import styled, { css, useTheme } from 'styled-components/native'
 
@@ -28,12 +29,13 @@ interface FooterMenuProps extends BottomTabBarProps {
   style?: StyleProp<ViewStyle>
 }
 
-const gradientHeight = 130
-
 const FooterMenu = ({ state, descriptors, navigation, style }: FooterMenuProps) => {
   const insets = useSafeAreaInsets()
   const { width: screenWidth } = useWindowDimensions()
   const theme = useTheme()
+  const [footerHeight, setFooterHeight] = useState(120)
+
+  const gradientHeight = footerHeight + 30
 
   const footerContent = (
     <>
@@ -50,12 +52,16 @@ const FooterMenu = ({ state, descriptors, navigation, style }: FooterMenuProps)
     </>
   )
 
+  const handleFooterLayout = (e: LayoutChangeEvent) => {
+    setFooterHeight(e.nativeEvent.layout.height + insets.bottom)
+  }
+
   return (
-    <View style={[style]}>
-      <FooterGradientCanvas pointerEvents="none">
+    <View style={[style]} onLayout={handleFooterLayout}>
+      <FooterGradientCanvas pointerEvents="none" height={gradientHeight}>
         <Rect x={0} y={0} width={screenWidth} height={gradientHeight}>
           <LinearGradient
-            start={vec(0, gradientHeight / 1.8)}
+            start={vec(0, gradientHeight / 1.9)}
             end={vec(0, 0)}
             colors={
               theme.name === 'dark'
@@ -90,10 +96,10 @@ const FooterMenuContent = styled.View`
   ${footerMenuStyles}
 `
 
-const FooterGradientCanvas = styled(Canvas)`
+const FooterGradientCanvas = styled(Canvas)<{ height: number }>`
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  height: ${gradientHeight}px;
+  height: ${({ height }) => height}px;
 `

apps/mobile-wallet/src/components/headers/BaseHeader.tsx

@@ -48,7 +48,6 @@ export interface BaseHeaderProps extends ViewProps {
 }
 
 export const scrollEndThreshold = 80
-const gradientHeight = 110
 
 const isIos = Platform.OS === 'ios'
 
@@ -65,8 +64,8 @@ const BaseHeader = ({
   const theme = useTheme()
   const { width: screenWidth } = useWindowDimensions()
   const [headerHeight, setHeaderHeight] = useState(80)
-  const gradientHeight = headerHeight + 30
 
+  const gradientHeight = headerHeight + 30
   const defaultScrollRange = [0 + scrollEffectOffset, scrollEndThreshold + scrollEffectOffset]
   const paddingTop = isIos ? insets.top : insets.top + 7
 
@@ -93,7 +92,6 @@ const BaseHeader = ({
   )
 
   const handleHeaderLayout = (e: LayoutChangeEvent) => {
-    console.log(e.nativeEvent.layout.height)
     setHeaderHeight(e.nativeEvent.layout.height)
   }