Tweaks for android + update Skia

Issue: pointerEvents non not working on Android cf: Shopify/react-native-skia#2551
alephium · Sep 5, 2024 · c687701 · c687701
1 parent 5f582d3
commit c687701
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 575 deletions.
diff --git a/apps/mobile-wallet/ios/Podfile.lock b/apps/mobile-wallet/ios/Podfile.lock
@@ -1341,7 +1341,7 @@ PODS:
     - Yoga
   - react-native-safe-area-context (4.10.1):
     - React-Core
-  - react-native-skia (1.2.3):
+  - react-native-skia (1.3.10):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2109,7 +2109,7 @@ SPEC CHECKSUMS:
   react-native-netinfo: bdb108d340cdb41875c9ced535977cac6d2ff321
   react-native-pager-view: c1e29e1a6105a02807392ba822ad322447a72f55
   react-native-safe-area-context: dcab599c527c2d7de2d76507a523d20a0b83823d
-  react-native-skia: 80282ed176572d97f6abe128ddcb567e0c33fe93
+  react-native-skia: 4857f8a85d0e4fc152c7b8aff4fbcc7573be1cf9
   react-native-webview: 596fb33d67a3cde5a74bf1f6b4c28d3543477fdd
   React-nativeconfig: 9f223cd321823afdecf59ed00861ab2d69ee0fc1
   React-NativeModulesApple: ff7efaff7098639db5631236cfd91d60abff04c0

diff --git a/apps/mobile-wallet/package.json b/apps/mobile-wallet/package.json
@@ -35,7 +35,7 @@
     "@react-navigation/stack": "^6.3.12",
     "@reduxjs/toolkit": "^1.9.1",
     "@shopify/flash-list": "^1.6.4",
-    "@shopify/react-native-skia": "1.2.3",
+    "@shopify/react-native-skia": "1.3.10",
     "@walletconnect/core": "2.15.1",
     "@walletconnect/jsonrpc-types": "^1.0.4",
     "@walletconnect/keyvaluestorage": "1.1.1",

diff --git a/apps/mobile-wallet/src/components/headers/BaseHeader.tsx b/apps/mobile-wallet/src/components/headers/BaseHeader.tsx
@@ -19,7 +19,7 @@ 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, useState } from 'react'
-import { LayoutChangeEvent, Platform, Pressable, useWindowDimensions, ViewProps } from 'react-native'
+import { LayoutChangeEvent, Platform, useWindowDimensions, ViewProps } from 'react-native'
 import Animated, {
   Extrapolation,
   interpolate,
@@ -97,7 +97,7 @@ const BaseHeader = ({
 
   return (
     <BaseHeaderStyled ref={headerRef} onLayout={handleHeaderLayout} {...props}>
-      <HeaderGradientCanvas pointerEvents="none" height={gradientHeight}>
+      <HeaderGradientCanvas height={gradientHeight} pointerEvents="none">
         <Rect x={0} y={0} width={screenWidth} height={gradientHeight} opacity={animatedOpacity}>
           <LinearGradient
             start={vec(0, gradientHeight / 1.5)}
@@ -110,32 +110,30 @@ const BaseHeader = ({
           />
         </Rect>
       </HeaderGradientCanvas>
-      <Pressable>
-        <HeaderContainer>
-          <Header style={{ paddingTop }}>
-            {!CustomContent ? (
-              <>
-                {HeaderLeft}
-                {(headerTitleString || HeaderTitleComponent) && (
-                  <CenterContainer style={centerContainerAnimatedStyle}>
-                    {headerTitleString ? (
-                      <AppText semiBold size={17}>
-                        {headerTitleString}
-                      </AppText>
-                    ) : HeaderTitleComponent ? (
-                      HeaderTitleComponent
-                    ) : null}
-                    {HeaderTitleRight}
-                  </CenterContainer>
-                )}
-                {HeaderRight}
-              </>
-            ) : (
-              <CenterContainer>{CustomContent}</CenterContainer>
-            )}
-          </Header>
-        </HeaderContainer>
-      </Pressable>
+      <HeaderContainer>
+        <Header style={{ paddingTop }}>
+          {!CustomContent ? (
+            <>
+              {HeaderLeft}
+              {(headerTitleString || HeaderTitleComponent) && (
+                <CenterContainer style={centerContainerAnimatedStyle}>
+                  {headerTitleString ? (
+                    <AppText semiBold size={17}>
+                      {headerTitleString}
+                    </AppText>
+                  ) : HeaderTitleComponent ? (
+                    HeaderTitleComponent
+                  ) : null}
+                  {HeaderTitleRight}
+                </CenterContainer>
+              )}
+              {HeaderRight}
+            </>
+          ) : (
+            <CenterContainer>{CustomContent}</CenterContainer>
+          )}
+        </Header>
+      </HeaderContainer>
     </BaseHeaderStyled>
   )
 }

diff --git a/apps/mobile-wallet/src/screens/Dashboard/DashboardScreen.tsx b/apps/mobile-wallet/src/screens/Dashboard/DashboardScreen.tsx
@@ -18,10 +18,11 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { AddressHash, CURRENCIES } from '@alephium/shared'
 import { StackScreenProps } from '@react-navigation/stack'
+import { colord } from 'colord'
 import { BlurView } from 'expo-blur'
 import { useEffect, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet } from 'react-native'
 import { Portal } from 'react-native-portalize'
 import Animated from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -135,6 +136,15 @@ const DashboardScreen = ({ navigation, ...props }: ScreenProps) => {
     >
       <AnimatedCirclesBackground scrollY={screenScrollY} />
       <WalletCard style={{ marginTop: insets.top }}>
+        {Platform.OS === 'android' ? (
+          <TransparentCardBackground style={StyleSheet.absoluteFill} />
+        ) : (
+          <BlurView
+            style={StyleSheet.absoluteFill}
+            intensity={80}
+            tint={theme.name === 'dark' ? 'systemThickMaterialDark' : 'systemThickMaterialLight'}
+          />
+        )}
         <WalletCardHeader>
           <HeaderButtons />
         </WalletCardHeader>
@@ -143,25 +153,16 @@ const DashboardScreen = ({ navigation, ...props }: ScreenProps) => {
           <ButtonsRowContainer>
             <Button onPress={handleSendPress} iconProps={{ name: 'send' }} variant="contrast" round flex short />
             <Button onPress={handleReceivePress} iconProps={{ name: 'download' }} variant="contrast" round flex short />
-            {/*<Button
+            <Button
               onPress={() => setIsBuyModalOpen(true)}
               iconProps={{ name: 'credit-card' }}
               variant="contrast"
               round
               flex
               short
-            />*/}
+            />
           </ButtonsRowContainer>
         )}
-        {Platform.OS === 'android' ? (
-          <View style={StyleSheet.absoluteFill} />
-        ) : (
-          <BlurView
-            style={StyleSheet.absoluteFill}
-            intensity={80}
-            tint={theme.name === 'dark' ? 'systemThickMaterialDark' : 'systemThickMaterialLight'}
-          />
-        )}
       </WalletCard>
       <AddressesTokensList />
       {totalBalance === BigInt(0) && addressesStatus === 'initialized' && (
@@ -262,6 +263,10 @@ const WalletCardHeader = styled.View`
   padding: 20px 20px 0;
 `
 
+const TransparentCardBackground = styled.View`
+  background-color: ${({ theme }) => colord(theme.bg.primary).alpha(0.95).toHex()};
+`
+
 const ButtonsRowContainer = styled(Animated.View)`
   margin: 10px ${DEFAULT_MARGIN}px 20px;
   flex-direction: row;