Skip to content

Commit 7b1cd6b

Browse files
gabrielbazan7gabrielbazan7
authored
Merge pull request #17 from cnguyen812/refactor/un-nest-navigator
Refactor/un nest navigator
2 parents 2043097 + 8762e9d commit 7b1cd6b

File tree

30 files changed

+362
-306
lines changed

30 files changed

+362
-306
lines changed

‎src/Root.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ import IntroStack, {IntroStackParamList} from './navigation/intro/IntroStack';
7979
import WalletConnectStack, {
8080
WalletConnectStackParamList,
8181
} from './navigation/wallet-connect/WalletConnectStack';
82-
import {ShopStackParamList} from './navigation/tabs/shop/ShopStack';
82+
import ShopStack, {ShopStackParamList} from './navigation/shop/ShopStack';
8383
import GiftCardStack, {
8484
GiftCardStackParamList,
8585
} from './navigation/tabs/shop/gift-card/GiftCardStack';
@@ -98,6 +98,7 @@ import BpDevtools from './components/bp-devtools/BpDevtools';
9898
import {APP_ANALYTICS_ENABLED, DEVTOOLS_ENABLED} from './constants/config';
9999
import {BlurContainer} from './components/blur/Blur';
100100
import DebugScreen, {DebugScreenParamList} from './navigation/Debug';
101+
import CardStack, {CardStackParamList} from './navigation/card/CardStack';
101102
import CardActivationStack, {
102103
CardActivationStackParamList,
103104
} from './navigation/card-activation/CardActivationStack';
@@ -129,6 +130,7 @@ export type RootStackParamList = {
129130
Tabs: NavigatorScreenParams<TabsStackParamList>;
130131
BitpayId: NavigatorScreenParams<BitpayIdStackParamList>;
131132
Wallet: NavigatorScreenParams<WalletStackParamList>;
133+
Card: NavigatorScreenParams<CardStackParamList>;
132134
CardActivation: NavigatorScreenParams<CardActivationStackParamList>;
133135
Scan: NavigatorScreenParams<ScanStackParamList>;
134136
Shop: NavigatorScreenParams<ShopStackParamList>;
@@ -155,8 +157,10 @@ export enum RootStacks {
155157
INTRO = 'Intro',
156158
ONBOARDING = 'Onboarding',
157159
TABS = 'Tabs',
160+
SHOP = 'Shop',
158161
BITPAY_ID = 'BitpayId',
159162
WALLET = 'Wallet',
163+
CARD = 'Card',
160164
CARD_ACTIVATION = 'CardActivation',
161165
SCAN = 'Scan',
162166
CONTACTS = 'Contacts',
@@ -183,6 +187,7 @@ export type NavScreenParams = NavigatorScreenParams<
183187
OnboardingStackParamList &
184188
BitpayIdStackParamList &
185189
WalletStackParamList &
190+
CardStackParamList &
186191
CardActivationStackParamList &
187192
GiftCardStackParamList &
188193
MerchantStackParamList &
@@ -194,6 +199,7 @@ export type NavScreenParams = NavigatorScreenParams<
194199
BuyCryptoStackParamList &
195200
SwapCryptoStackParamList &
196201
ScanStackParamList &
202+
ShopStackParamList &
197203
WalletConnectStackParamList &
198204
NotificationsSettingsStackParamsList &
199205
ZenLedgerStackParamsList
@@ -625,6 +631,10 @@ export default () => {
625631
gestureEnabled: false,
626632
}}
627633
/>
634+
<Root.Screen
635+
name={RootStacks.SHOP}
636+
component={ShopStack}
637+
/>
628638
<Root.Screen
629639
name={RootStacks.BITPAY_ID}
630640
component={BitpayIdStack}
@@ -636,6 +646,13 @@ export default () => {
636646
name={RootStacks.WALLET}
637647
component={WalletStack}
638648
/>
649+
<Root.Screen
650+
name={RootStacks.CARD}
651+
component={CardStack}
652+
options={{
653+
gestureEnabled: false,
654+
}}
655+
/>
639656
<Root.Screen
640657
name={RootStacks.CARD_ACTIVATION}
641658
component={CardActivationStack}

‎src/components/button/Button.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ interface ButtonProps extends BaseButtonProps {
5353
accessibilityLabel?: string;
5454
}
5555

56-
interface ButtonOptionProps {
56+
interface ButtonOptionProps extends React.PropsWithChildren {
5757
secondary?: boolean;
5858
outline?: boolean;
5959
cancel?: boolean;
@@ -319,7 +319,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = props => {
319319
cancel={cancel}
320320
disabled={disabled}
321321
action={action}>
322-
<Animated.View style={childrenStyle}>
322+
{/* <Animated.View style={childrenStyle}> */}
323323
<ButtonTypeText
324324
secondary={secondary}
325325
cancel={cancel}
@@ -328,7 +328,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = props => {
328328
action={action}>
329329
{children}
330330
</ButtonTypeText>
331-
</Animated.View>
331+
{/* </Animated.View> */}
332332
</ButtonTypeContainer>
333333

334334
<ButtonOverlay

‎src/components/button/ButtonOverlay.tsx‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import {ColorValue, StyleSheet} from 'react-native';
2+
import {ColorValue, StyleSheet, View} from 'react-native';
33
import Animated, {
44
Easing,
55
useAnimatedStyle,
@@ -16,7 +16,7 @@ import {
1616
PILL_RADIUS,
1717
} from './Button';
1818

19-
interface ButtonOverlayProps {
19+
interface ButtonOverlayProps extends React.PropsWithChildren {
2020
isVisible: boolean;
2121
animate?: boolean;
2222
buttonStyle: ButtonStyle;
@@ -68,6 +68,18 @@ const ButtonOverlay: React.FC<ButtonOverlayProps> = props => {
6868
})),
6969
];
7070

71+
const overlayStyleStatic = {
72+
...StyleSheet.absoluteFillObject,
73+
...{
74+
opacity: isVisible ? 1 : 0,
75+
borderWidth: 2,
76+
borderStyle: 'solid',
77+
borderRadius: buttonType === 'pill' ? PILL_RADIUS : BUTTON_RADIUS,
78+
borderColor: backgroundColor || 'transparent',
79+
backgroundColor: (isPrimary && backgroundColor) || 'transparent',
80+
}
81+
} as Record<string, any>;
82+
7183
const iconStyle = [
7284
useAnimatedStyle(() => ({
7385
alignItems: 'center',
@@ -79,11 +91,27 @@ const ButtonOverlay: React.FC<ButtonOverlayProps> = props => {
7991
})),
8092
];
8193

94+
const iconStyleStatic = {
95+
opacity: isVisible ? 1 : 0,
96+
alignItems: 'center',
97+
display: 'flex',
98+
flexGrow: 1,
99+
justifyContent: 'center',
100+
} as Record<string, any>;
101+
82102
return (
83-
<Animated.View style={overlayStyle}>
84-
<Animated.View style={iconStyle}>{children}</Animated.View>
85-
</Animated.View>
103+
<View style={overlayStyleStatic}>
104+
<View style={iconStyleStatic}>
105+
{children}
106+
</View>
107+
</View>
86108
);
109+
110+
// return (
111+
// <Animated.View style={overlayStyle}>
112+
// <Animated.View style={iconStyle}>{children}</Animated.View>
113+
// </Animated.View>
114+
// );
87115
};
88116

89117
export default ButtonOverlay;

‎src/components/list/WalletTransactionSkeletonRow.tsx‎

Lines changed: 77 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,88 @@
11
import React from 'react';
2-
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
32
import {View} from 'react-native';
3+
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
4+
import styled, {useTheme} from 'styled-components/native';
45
import {TRANSACTION_ICON_SIZE} from '../../constants/TransactionIcons';
5-
import {useTheme} from 'styled-components/native';
66
import {LightBlack} from '../../styles/colors';
77

8+
const USE_NEW_ARCH_WORKAROUND = true;
9+
10+
const WorkaroundSkeletonItem = styled.View`
11+
background: ${({theme}) => theme.dark ? LightBlack : '#E1E9EE'};
12+
`;
13+
14+
const WorkaroundHeader = styled(WorkaroundSkeletonItem)`
15+
border-radius: 0;
16+
height: 55px;
17+
width: 100%;
18+
`;
19+
20+
const WorkaroundRow = styled.View`
21+
align-items: center;
22+
display: flex;
23+
flex-direction: row;
24+
justify-content: space-between;
25+
padding: 15px;
26+
`;
27+
28+
const WorkaroundIcon = styled(WorkaroundSkeletonItem)`
29+
border-radius: 50px;
30+
height: ${TRANSACTION_ICON_SIZE}px;
31+
margin-right: 8px;
32+
width: ${TRANSACTION_ICON_SIZE}px;
33+
`;
34+
35+
const WorkaroundHeading = styled(WorkaroundSkeletonItem)`
36+
height: 18px;
37+
width: 150px;
38+
`;
39+
40+
const WorkaroundDetails = styled.View`
41+
align-items: flex-end;
42+
display: flex;
43+
flex-direction: column;
44+
flex-grow: 1;
45+
margin-left: auto;
46+
`;
47+
48+
const WorkaroundDetailsTop = styled(WorkaroundSkeletonItem)`
49+
height: 14px;
50+
margin-bottom: 5px;
51+
width: 80px;
52+
`;
53+
54+
const WorkaroundDetailsBottom = styled(WorkaroundSkeletonItem)`
55+
height: 12px;
56+
width: 70px;
57+
`;
58+
59+
const NonAnimatedNewArchWorkaround = () => {
60+
return (
61+
<>
62+
<WorkaroundHeader />
63+
64+
<WorkaroundRow>
65+
<WorkaroundIcon />
66+
67+
<WorkaroundHeading />
68+
69+
<WorkaroundDetails>
70+
<WorkaroundDetailsTop />
71+
72+
<WorkaroundDetailsBottom />
73+
</WorkaroundDetails>
74+
</WorkaroundRow>
75+
</>
76+
);
77+
};
78+
879
const WalletTransactionSkeletonRow = () => {
980
const theme = useTheme();
1081

82+
if (USE_NEW_ARCH_WORKAROUND) {
83+
return <NonAnimatedNewArchWorkaround />
84+
}
85+
1186
return (
1287
<SkeletonPlaceholder
1388
backgroundColor={theme.dark ? LightBlack : '#E1E9EE'}

‎src/navigation/bitpay-id/BitpayIdStack.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import EnableTwoFactor, {
3030
import TwoFactorEnabled, {
3131
TwoFactorEnabledScreenParamList,
3232
} from './screens/TwoFactorEnabled';
33+
import {RootStacks} from '../../Root';
34+
import {TabsScreens} from '../tabs/TabsStack';
3335

3436
export type BitpayIdStackParamList = {
3537
BitPayIdPairingScreen: BitPayIdPairingScreenParamList;
@@ -87,8 +89,8 @@ const BitpayIdStack = () => {
8789
haptic('impactLight');
8890

8991
if (user) {
90-
navigation.navigate('Tabs', {
91-
screen: 'Settings',
92+
navigation.navigate(RootStacks.TABS, {
93+
screen: TabsScreens.SETTINGS,
9294
});
9395

9496
dispatch(BitPayIdEffects.startDisconnectBitPayId());

‎src/navigation/card-activation/screens/CompleteScreen.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import styled from 'styled-components/native';
66
import Button from '../../../components/button/Button';
77
import {ScreenGutter} from '../../../components/styled/Containers';
88
import {H4, Paragraph} from '../../../components/styled/Text';
9-
import {navigationRef} from '../../../Root';
9+
import {RootStacks, navigationRef} from '../../../Root';
10+
import {TabsScreens} from '../../tabs/TabsStack';
1011
import OnTheMoonSvg from '../assets/on-the-moon.svg';
1112
import {CardActivationStackParamList} from '../CardActivationStack';
1213

@@ -41,11 +42,8 @@ const CompleteScreen: React.FC<
4142
> = () => {
4243
const {t} = useTranslation();
4344
const onViewCardPress = () => {
44-
navigationRef.navigate('Tabs', {
45-
screen: 'Card',
46-
params: {
47-
screen: 'Home',
48-
},
45+
navigationRef.navigate(RootStacks.TABS, {
46+
screen: TabsScreens.CARD,
4947
});
5048
};
5149

‎src/navigation/card/CardStack.tsx‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22
import {useTranslation} from 'react-i18next';
33
import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
4+
import {HeaderTitle} from '../../components/styled/Text';
45
import {
56
baseNavigatorOptions,
67
baseScreenOptions,
78
} from '../../constants/NavigationOptions';
8-
import CardHome, {CardHomeScreenParamList} from './screens/CardHome';
99
import CardPairingScreen, {
1010
CardPairingScreenParamList,
1111
} from './screens/CardPairingScreen';
@@ -17,13 +17,11 @@ import UpdateCardNameScreen, {
1717
UpdateCardNameScreenParamList,
1818
} from './screens/settings/UpdateCardName';
1919
import Referral, {ReferralParamList} from './screens/settings/Referral';
20-
import {HeaderTitle} from '../../components/styled/Text';
2120
import ResetPinScreen, {
2221
ResetPinScreenParamList,
2322
} from './screens/settings/ResetPinScreen';
2423

2524
export type CardStackParamList = {
26-
CardHome: CardHomeScreenParamList;
2725
CardPairingScreen: CardPairingScreenParamList;
2826
Settings: CardSettingsParamList;
2927
CustomizeVirtualCard: CustomizeVirtualCardParamList;
@@ -33,7 +31,6 @@ export type CardStackParamList = {
3331
};
3432

3533
export enum CardScreens {
36-
HOME = 'CardHome',
3734
PAIRING = 'CardPairingScreen',
3835
SETTINGS = 'Settings',
3936
CUSTOMIZE_VIRTUAL_CARD = 'CustomizeVirtualCard',
@@ -49,28 +46,11 @@ const CardStack = () => {
4946

5047
return (
5148
<Card.Navigator
52-
initialRouteName={CardScreens.HOME}
49+
initialRouteName={CardScreens.SETTINGS}
5350
screenOptions={{
5451
...baseNavigatorOptions,
5552
...baseScreenOptions,
5653
}}>
57-
<Card.Screen
58-
name={CardScreens.HOME}
59-
component={CardHome}
60-
options={{
61-
title: 'Card',
62-
headerLeft: () => null,
63-
headerTitle: () => <HeaderTitle>{t('Card')}</HeaderTitle>,
64-
}}
65-
sharedElements={route => {
66-
return [
67-
{
68-
id: 'card.dashboard.active-card.' + route.params.id,
69-
animation: 'fade',
70-
},
71-
];
72-
}}
73-
/>
7454
<Card.Screen
7555
name={CardScreens.PAIRING}
7656
component={CardPairingScreen}

0 commit comments

Comments
 (0)