Skip to content

Commit

Permalink
Tweaks for android + update Skia
Browse files Browse the repository at this point in the history
Issue: pointerEvents non not working on Android
cf: Shopify/react-native-skia#2551
  • Loading branch information
mvaivre committed Sep 5, 2024
1 parent 5f582d3 commit c687701
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 575 deletions.
4 changes: 2 additions & 2 deletions apps/mobile-wallet/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile-wallet/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
54 changes: 26 additions & 28 deletions apps/mobile-wallet/src/components/headers/BaseHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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)}
Expand All @@ -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>
)
}
Expand Down
29 changes: 17 additions & 12 deletions apps/mobile-wallet/src/screens/Dashboard/DashboardScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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>
Expand All @@ -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' && (
Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit c687701

Please sign in to comment.