fix: misc Android fixes

Author: maxbbb

src/components/gradient-border/GradientBorderView.tsx

@@ -49,13 +49,11 @@ export const GradientBorderView = memo(function GradientBorderView({
 
   return (
     <View style={[styles.baseStyle, style, { backgroundColor }, radiusStyle]}>
-      <MaskedView
-        maskElement={<View style={[styles.maskElement, { borderWidth }, radiusStyle]} />}
-        style={styles.maskView}
-        pointerEvents="none"
-      >
-        <LinearGradient start={start} end={end} style={StyleSheet.absoluteFill} colors={borderGradientColors} locations={locations} />
-      </MaskedView>
+      <View style={styles.maskView} pointerEvents="none">
+        <MaskedView maskElement={<View style={[styles.maskElement, { borderWidth }, radiusStyle]} />} style={StyleSheet.absoluteFill}>
+          <LinearGradient start={start} end={end} style={StyleSheet.absoluteFill} colors={borderGradientColors} locations={locations} />
+        </MaskedView>
+      </View>
       {children}
     </View>
   );

src/features/rnbw-membership/constants.ts

@@ -226,3 +226,8 @@ export const FALLBACK_TIERS: Tier[] = [
     cashbackBps: 10000,
   },
 ];
+
+export const MEMBERSHIP_SCREEN_BACKGROUND_COLOR = {
+  light: '#F5F5F7',
+  dark: '#090909',
+};

src/features/rnbw-membership/screens/rnbw-membership-screen/RnbwMembershipScreen.tsx

@@ -1,8 +1,8 @@
 import { memo, useState, useCallback } from 'react';
-import { RefreshControl, ScrollView, StyleSheet } from 'react-native';
+import { RefreshControl, StyleSheet } from 'react-native';
 import { Box, useColorMode } from '@/design-system';
 import { AccountImage } from '@/components/AccountImage';
-import { Navbar } from '@/components/navbar/Navbar';
+import { Navbar, navbarHeight } from '@/components/navbar/Navbar';
 import { RnbwRewardsClaimCard } from './components/RnbwRewardsClaimCard';
 import { RnbwAirdropClaimCard } from './components/RnbwAirdropClaimCard';
 import { RnbwUnstakePenaltyRecoveryCard } from './components/RnbwUnstakePenaltyRecoveryCard';
@@ -17,35 +17,49 @@ import { RnbwStakingEarningsCard } from './components/RnbwStakingEarningsCard';
 import { TAB_BAR_HEIGHT } from '@/navigation/SwipeNavigator';
 import { TierBadge } from '@/features/rnbw-membership/components/TierBadge';
 import { useMembershipTierInfo } from '@/features/rnbw-membership/stores/derived/useMembershipTierInfo';
+import { IS_ANDROID } from '@/env';
+import { ScrollHeaderFade } from '@/components/scroll-header-fade/ScrollHeaderFade';
+import { useScrollFadeHandler } from '@/components/scroll-header-fade/useScrollFadeHandler';
+import Animated, { useSharedValue } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { getValueForColorMode } from '@/design-system/color/palettes';
+import { MEMBERSHIP_SCREEN_BACKGROUND_COLOR } from '@/features/rnbw-membership/constants';
 
 export const RnbwMembershipScreen = memo(function RnbwMembershipScreen() {
-  const { isDarkMode } = useColorMode();
+  const { colorMode } = useColorMode();
+  const safeAreaInsets = useSafeAreaInsets();
+  const backgroundColor = getValueForColorMode(MEMBERSHIP_SCREEN_BACKGROUND_COLOR, colorMode);
+  const scrollOffset = useSharedValue(0);
+  const onScroll = useScrollFadeHandler(scrollOffset);
+  const bottomInset = TAB_BAR_HEIGHT + 16;
 
   return (
-    <Box backgroundColor={isDarkMode ? '#090909' : '#F5F5F7'} style={styles.flex}>
+    <Box backgroundColor={backgroundColor} style={styles.flex}>
       <Navbar hasStatusBarInset titleComponent={<CurrentTierBadge />} leftComponent={<AccountImage />} />
-      <ScrollView
+      <ScrollHeaderFade color={backgroundColor} height={32} scrollOffset={scrollOffset} topInset={safeAreaInsets.top + navbarHeight} />
+      <Animated.ScrollView
         refreshControl={<RefreshControlWrapper />}
-        contentContainerStyle={styles.scrollViewContentContainer}
+        contentContainerStyle={[styles.scrollViewContentContainer, { paddingBottom: IS_ANDROID ? bottomInset : 0 }]}
         style={styles.flex}
+        onScroll={onScroll}
         contentInset={{
-          bottom: TAB_BAR_HEIGHT + 16,
+          bottom: bottomInset,
         }}
       >
-        <Box gap={16} style={{ flex: 1 }}>
+        <Box gap={16}>
           <RnbwStakingCard />
           <RnbwStakingEarningsCard />
           <RnbwUnstakePenaltyRecoveryCard />
           <MembershipTierCard />
           <RnbwRewardsClaimCard />
           <RnbwAirdropClaimCard />
         </Box>
-      </ScrollView>
+      </Animated.ScrollView>
     </Box>
   );
 });
 
-function RefreshControlWrapper() {
+function RefreshControlWrapper(props: Omit<React.ComponentProps<typeof RefreshControl>, 'refreshing' | 'onRefresh'>) {
   const [isRefreshing, setIsRefreshing] = useState(false);
 
   const handleRefresh = useCallback(async () => {
@@ -61,7 +75,14 @@ function RefreshControlWrapper() {
     setIsRefreshing(false);
   }, []);
 
-  return <RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />;
+  return (
+    <RefreshControl
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      refreshing={isRefreshing}
+      onRefresh={handleRefresh}
+    />
+  );
 }
 
 function CurrentTierBadge() {

src/features/rnbw-staking/screens/rnbw-staking-learn-screen/RnbwStakingLearnScreen.tsx

@@ -36,7 +36,7 @@ export const RnbwStakingLearnScreen = memo(function RnbwStakingLearnScreen() {
       />
       <SheetHandleFixedToTop top={safeAreaTop + 6} />
       <View style={[styles.content, { marginTop: safeAreaTop + 40, paddingBottom: safeAreaBottom + 8 }]}>
-        <Box gap={64}>
+        <Box gap={64} flexGrow={1}>
           <Box alignItems="center" gap={24}>
             <Text align="center" size="17pt" weight="heavy" color={{ custom: '#D7A921' }}>
               {'INTRODUCING'}
@@ -159,7 +159,6 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   button: {
-    marginTop: 'auto',
     width: '100%',
   },
   container: {