Merge pull request #17 from cnguyen812/refactor/un-nest-navigator

Refactor/un nest navigator
bitpay · Jul 11, 2023 · 7b1cd6b · 7b1cd6b
2 parents 2043097 + 8762e9d
commit 7b1cd6b
Show file tree

Hide file tree

Showing 30 changed files with 362 additions and 306 deletions.
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -79,7 +79,7 @@ import IntroStack, {IntroStackParamList} from './navigation/intro/IntroStack';
 import WalletConnectStack, {
   WalletConnectStackParamList,
 } from './navigation/wallet-connect/WalletConnectStack';
-import {ShopStackParamList} from './navigation/tabs/shop/ShopStack';
+import ShopStack, {ShopStackParamList} from './navigation/shop/ShopStack';
 import GiftCardStack, {
   GiftCardStackParamList,
 } from './navigation/tabs/shop/gift-card/GiftCardStack';
@@ -98,6 +98,7 @@ import BpDevtools from './components/bp-devtools/BpDevtools';
 import {APP_ANALYTICS_ENABLED, DEVTOOLS_ENABLED} from './constants/config';
 import {BlurContainer} from './components/blur/Blur';
 import DebugScreen, {DebugScreenParamList} from './navigation/Debug';
+import CardStack, {CardStackParamList} from './navigation/card/CardStack';
 import CardActivationStack, {
   CardActivationStackParamList,
 } from './navigation/card-activation/CardActivationStack';
@@ -129,6 +130,7 @@ export type RootStackParamList = {
   Tabs: NavigatorScreenParams<TabsStackParamList>;
   BitpayId: NavigatorScreenParams<BitpayIdStackParamList>;
   Wallet: NavigatorScreenParams<WalletStackParamList>;
+  Card: NavigatorScreenParams<CardStackParamList>;
   CardActivation: NavigatorScreenParams<CardActivationStackParamList>;
   Scan: NavigatorScreenParams<ScanStackParamList>;
   Shop: NavigatorScreenParams<ShopStackParamList>;
@@ -155,8 +157,10 @@ export enum RootStacks {
   INTRO = 'Intro',
   ONBOARDING = 'Onboarding',
   TABS = 'Tabs',
+  SHOP = 'Shop',
   BITPAY_ID = 'BitpayId',
   WALLET = 'Wallet',
+  CARD = 'Card',
   CARD_ACTIVATION = 'CardActivation',
   SCAN = 'Scan',
   CONTACTS = 'Contacts',
@@ -183,6 +187,7 @@ export type NavScreenParams = NavigatorScreenParams<
     OnboardingStackParamList &
     BitpayIdStackParamList &
     WalletStackParamList &
+    CardStackParamList &
     CardActivationStackParamList &
     GiftCardStackParamList &
     MerchantStackParamList &
@@ -194,6 +199,7 @@ export type NavScreenParams = NavigatorScreenParams<
     BuyCryptoStackParamList &
     SwapCryptoStackParamList &
     ScanStackParamList &
+    ShopStackParamList &
     WalletConnectStackParamList &
     NotificationsSettingsStackParamsList &
     ZenLedgerStackParamsList
@@ -625,6 +631,10 @@ export default () => {
                 gestureEnabled: false,
               }}
             />
+            <Root.Screen
+              name={RootStacks.SHOP}
+              component={ShopStack}
+            />
             <Root.Screen
               name={RootStacks.BITPAY_ID}
               component={BitpayIdStack}
@@ -636,6 +646,13 @@ export default () => {
               name={RootStacks.WALLET}
               component={WalletStack}
             />
+            <Root.Screen
+              name={RootStacks.CARD}
+              component={CardStack}
+              options={{
+                gestureEnabled: false,
+              }}
+            />
             <Root.Screen
               name={RootStacks.CARD_ACTIVATION}
               component={CardActivationStack}

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -53,7 +53,7 @@ interface ButtonProps extends BaseButtonProps {
   accessibilityLabel?: string;
 }
 
-interface ButtonOptionProps {
+interface ButtonOptionProps extends React.PropsWithChildren {
   secondary?: boolean;
   outline?: boolean;
   cancel?: boolean;
@@ -319,7 +319,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = props => {
         cancel={cancel}
         disabled={disabled}
         action={action}>
-        <Animated.View style={childrenStyle}>
+        {/* <Animated.View style={childrenStyle}> */}
           <ButtonTypeText
             secondary={secondary}
             cancel={cancel}
@@ -328,7 +328,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = props => {
             action={action}>
             {children}
           </ButtonTypeText>
-        </Animated.View>
+        {/* </Animated.View> */}
       </ButtonTypeContainer>
 
       <ButtonOverlay

diff --git a/src/components/button/ButtonOverlay.tsx b/src/components/button/ButtonOverlay.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {ColorValue, StyleSheet} from 'react-native';
+import {ColorValue, StyleSheet, View} from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -16,7 +16,7 @@ import {
   PILL_RADIUS,
 } from './Button';
 
-interface ButtonOverlayProps {
+interface ButtonOverlayProps extends React.PropsWithChildren {
   isVisible: boolean;
   animate?: boolean;
   buttonStyle: ButtonStyle;
@@ -68,6 +68,18 @@ const ButtonOverlay: React.FC<ButtonOverlayProps> = props => {
     })),
   ];
 
+  const overlayStyleStatic = {
+    ...StyleSheet.absoluteFillObject,
+    ...{
+      opacity: isVisible ? 1 : 0,
+      borderWidth: 2,
+      borderStyle: 'solid',
+      borderRadius: buttonType === 'pill' ? PILL_RADIUS : BUTTON_RADIUS,
+      borderColor: backgroundColor || 'transparent',
+      backgroundColor: (isPrimary && backgroundColor) || 'transparent',
+    }
+  } as Record<string, any>;
+
   const iconStyle = [
     useAnimatedStyle(() => ({
       alignItems: 'center',
@@ -79,11 +91,27 @@ const ButtonOverlay: React.FC<ButtonOverlayProps> = props => {
     })),
   ];
 
+  const iconStyleStatic = {
+    opacity: isVisible ? 1 : 0,
+    alignItems: 'center',
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'center',
+  } as Record<string, any>;
+
   return (
-    <Animated.View style={overlayStyle}>
-      <Animated.View style={iconStyle}>{children}</Animated.View>
-    </Animated.View>
+    <View style={overlayStyleStatic}>
+      <View style={iconStyleStatic}>
+        {children}
+      </View>
+    </View>
   );
+
+  // return (
+  //   <Animated.View style={overlayStyle}>
+  //     <Animated.View style={iconStyle}>{children}</Animated.View>
+  //   </Animated.View>
+  // );
 };
 
 export default ButtonOverlay;
diff --git a/src/components/list/WalletTransactionSkeletonRow.tsx b/src/components/list/WalletTransactionSkeletonRow.tsx
@@ -1,13 +1,88 @@
 import React from 'react';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import {View} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import styled, {useTheme} from 'styled-components/native';
 import {TRANSACTION_ICON_SIZE} from '../../constants/TransactionIcons';
-import {useTheme} from 'styled-components/native';
 import {LightBlack} from '../../styles/colors';
 
+const USE_NEW_ARCH_WORKAROUND = true;
+
+const WorkaroundSkeletonItem = styled.View`
+  background: ${({theme}) => theme.dark ? LightBlack : '#E1E9EE'};
+`;
+
+const WorkaroundHeader = styled(WorkaroundSkeletonItem)`
+  border-radius: 0;
+  height: 55px;
+  width: 100%;
+`;
+
+const WorkaroundRow = styled.View`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 15px;
+`;
+
+const WorkaroundIcon = styled(WorkaroundSkeletonItem)`
+  border-radius: 50px;
+  height: ${TRANSACTION_ICON_SIZE}px;
+  margin-right: 8px;
+  width: ${TRANSACTION_ICON_SIZE}px;
+`;
+
+const WorkaroundHeading = styled(WorkaroundSkeletonItem)`
+  height: 18px;
+  width: 150px;
+`;
+
+const WorkaroundDetails = styled.View`
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin-left: auto;
+`;
+
+const WorkaroundDetailsTop = styled(WorkaroundSkeletonItem)`
+  height: 14px;
+  margin-bottom: 5px;
+  width: 80px;
+`;
+
+const WorkaroundDetailsBottom = styled(WorkaroundSkeletonItem)`
+  height: 12px;
+  width: 70px;
+`;
+
+const NonAnimatedNewArchWorkaround = () => {
+  return (
+    <>
+      <WorkaroundHeader />
+
+      <WorkaroundRow>
+        <WorkaroundIcon />
+
+        <WorkaroundHeading />
+
+        <WorkaroundDetails>
+          <WorkaroundDetailsTop />
+
+          <WorkaroundDetailsBottom />
+        </WorkaroundDetails>
+      </WorkaroundRow>
+    </>
+  );
+};
+
 const WalletTransactionSkeletonRow = () => {
   const theme = useTheme();
 
+  if (USE_NEW_ARCH_WORKAROUND) {
+    return <NonAnimatedNewArchWorkaround />
+  }
+
   return (
     <SkeletonPlaceholder
       backgroundColor={theme.dark ? LightBlack : '#E1E9EE'}

diff --git a/src/navigation/bitpay-id/BitpayIdStack.tsx b/src/navigation/bitpay-id/BitpayIdStack.tsx
@@ -30,6 +30,8 @@ import EnableTwoFactor, {
 import TwoFactorEnabled, {
   TwoFactorEnabledScreenParamList,
 } from './screens/TwoFactorEnabled';
+import {RootStacks} from '../../Root';
+import {TabsScreens} from '../tabs/TabsStack';
 
 export type BitpayIdStackParamList = {
   BitPayIdPairingScreen: BitPayIdPairingScreenParamList;
@@ -87,8 +89,8 @@ const BitpayIdStack = () => {
                     haptic('impactLight');
 
                     if (user) {
-                      navigation.navigate('Tabs', {
-                        screen: 'Settings',
+                      navigation.navigate(RootStacks.TABS, {
+                        screen: TabsScreens.SETTINGS,
                       });
 
                       dispatch(BitPayIdEffects.startDisconnectBitPayId());

diff --git a/src/navigation/card-activation/screens/CompleteScreen.tsx b/src/navigation/card-activation/screens/CompleteScreen.tsx
@@ -6,7 +6,8 @@ import styled from 'styled-components/native';
 import Button from '../../../components/button/Button';
 import {ScreenGutter} from '../../../components/styled/Containers';
 import {H4, Paragraph} from '../../../components/styled/Text';
-import {navigationRef} from '../../../Root';
+import {RootStacks, navigationRef} from '../../../Root';
+import {TabsScreens} from '../../tabs/TabsStack';
 import OnTheMoonSvg from '../assets/on-the-moon.svg';
 import {CardActivationStackParamList} from '../CardActivationStack';
 
@@ -41,11 +42,8 @@ const CompleteScreen: React.FC<
 > = () => {
   const {t} = useTranslation();
   const onViewCardPress = () => {
-    navigationRef.navigate('Tabs', {
-      screen: 'Card',
-      params: {
-        screen: 'Home',
-      },
+    navigationRef.navigate(RootStacks.TABS, {
+      screen: TabsScreens.CARD,
     });
   };
 

diff --git a/src/navigation/card/CardStack.tsx b/src/navigation/card/CardStack.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import {useTranslation} from 'react-i18next';
 import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
+import {HeaderTitle} from '../../components/styled/Text';
 import {
   baseNavigatorOptions,
   baseScreenOptions,
 } from '../../constants/NavigationOptions';
-import CardHome, {CardHomeScreenParamList} from './screens/CardHome';
 import CardPairingScreen, {
   CardPairingScreenParamList,
 } from './screens/CardPairingScreen';
@@ -17,13 +17,11 @@ import UpdateCardNameScreen, {
   UpdateCardNameScreenParamList,
 } from './screens/settings/UpdateCardName';
 import Referral, {ReferralParamList} from './screens/settings/Referral';
-import {HeaderTitle} from '../../components/styled/Text';
 import ResetPinScreen, {
   ResetPinScreenParamList,
 } from './screens/settings/ResetPinScreen';
 
 export type CardStackParamList = {
-  CardHome: CardHomeScreenParamList;
   CardPairingScreen: CardPairingScreenParamList;
   Settings: CardSettingsParamList;
   CustomizeVirtualCard: CustomizeVirtualCardParamList;
@@ -33,7 +31,6 @@ export type CardStackParamList = {
 };
 
 export enum CardScreens {
-  HOME = 'CardHome',
   PAIRING = 'CardPairingScreen',
   SETTINGS = 'Settings',
   CUSTOMIZE_VIRTUAL_CARD = 'CustomizeVirtualCard',
@@ -49,28 +46,11 @@ const CardStack = () => {
 
   return (
     <Card.Navigator
-      initialRouteName={CardScreens.HOME}
+      initialRouteName={CardScreens.SETTINGS}
       screenOptions={{
         ...baseNavigatorOptions,
         ...baseScreenOptions,
       }}>
-      <Card.Screen
-        name={CardScreens.HOME}
-        component={CardHome}
-        options={{
-          title: 'Card',
-          headerLeft: () => null,
-          headerTitle: () => <HeaderTitle>{t('Card')}</HeaderTitle>,
-        }}
-        sharedElements={route => {
-          return [
-            {
-              id: 'card.dashboard.active-card.' + route.params.id,
-              animation: 'fade',
-            },
-          ];
-        }}
-      />
       <Card.Screen
         name={CardScreens.PAIRING}
         component={CardPairingScreen}