From c687701cb376080929859b368fe1e64276e6fa9f Mon Sep 17 00:00:00 2001 From: mvaivre Date: Mon, 19 Aug 2024 16:32:02 +0200 Subject: [PATCH] Tweaks for android + update Skia Issue: pointerEvents non not working on Android cf: https://github.com/Shopify/react-native-skia/issues/2551 --- apps/mobile-wallet/ios/Podfile.lock | 4 +- apps/mobile-wallet/package.json | 2 +- .../src/components/headers/BaseHeader.tsx | 54 +- .../src/screens/Dashboard/DashboardScreen.tsx | 29 +- pnpm-lock.yaml | 610 +++--------------- 5 files changed, 124 insertions(+), 575 deletions(-) diff --git a/apps/mobile-wallet/ios/Podfile.lock b/apps/mobile-wallet/ios/Podfile.lock index ca7c385b8d..842dceeb47 100644 --- 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 index 0a99aebb1c..ce044a1741 100644 --- 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 index 2618124ec5..7002ec9d3f 100644 --- 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 . 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 ( - + - - -
- {!CustomContent ? ( - <> - {HeaderLeft} - {(headerTitleString || HeaderTitleComponent) && ( - - {headerTitleString ? ( - - {headerTitleString} - - ) : HeaderTitleComponent ? ( - HeaderTitleComponent - ) : null} - {HeaderTitleRight} - - )} - {HeaderRight} - - ) : ( - {CustomContent} - )} -
-
-
+ +
+ {!CustomContent ? ( + <> + {HeaderLeft} + {(headerTitleString || HeaderTitleComponent) && ( + + {headerTitleString ? ( + + {headerTitleString} + + ) : HeaderTitleComponent ? ( + HeaderTitleComponent + ) : null} + {HeaderTitleRight} + + )} + {HeaderRight} + + ) : ( + {CustomContent} + )} +
+
) } diff --git a/apps/mobile-wallet/src/screens/Dashboard/DashboardScreen.tsx b/apps/mobile-wallet/src/screens/Dashboard/DashboardScreen.tsx index d02db45b6f..d001f6f309 100644 --- 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 . 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) => { > + {Platform.OS === 'android' ? ( + + ) : ( + + )} @@ -143,25 +153,16 @@ const DashboardScreen = ({ navigation, ...props }: ScreenProps) => {