TW-1143: Migration to native stack

ios/Podfile.lock

@@ -751,9 +751,9 @@ PODS:
     - React-RCTText
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.18.2):
+  - RNScreens (3.27.0):
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core
-    - React-RCTImage
   - RNScrypt (1.2.1):
     - React
   - RNSentry (5.9.1):
@@ -1193,7 +1193,7 @@ SPEC CHECKSUMS:
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
   RNReanimated: 9f7068e43b9358a46a688d94a5a3adb258139457
-  RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
+  RNScreens: 3c2d122f5e08c192e254c510b212306da97d2581
   RNScrypt: 95fdef077b482e9fdf8a761120cb69d129ef4016
   RNSentry: 0a1daa8ee81e2776f977ae8c66e67c8d85587828
   RNSha256: 80bea5b2e7005f813f6438cb41e573b3d531146c

package.json

@@ -44,9 +44,8 @@
     "@react-native-firebase/app-check": "^17.5.0",
     "@react-native-firebase/messaging": "^17.5.0",
     "@react-native-google-signin/google-signin": "9.0.2",
-    "@react-navigation/bottom-tabs": "^6.4.0",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/stack": "^6.3.2",
+    "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native-stack": "^6.9.16",
     "@reduxjs/toolkit": "^1.8.5",
     "@sentry/react-native": "5.9.1",
     "@shopify/flash-list": "^1.6.1",
@@ -108,7 +107,7 @@
     "react-native-reanimated-carousel": "^3.5.1",
     "react-native-restart": "^0.0.24",
     "react-native-safe-area-context": "^4.4.1",
-    "react-native-screens": "^3.18.2",
+    "react-native-screens": "^3.27.0",
     "react-native-scrypt": "^1.2.1",
     "react-native-sha256": "^1.4.8",
     "react-native-svg": "madfish-solutions/react-native-svg#41c5c2b78a9fc86aa1b0e47761123068504d9298",

src/app/app.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { LogBox } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { enableScreens } from 'react-native-screens';
+import { enableScreens, enableFreeze } from 'react-native-screens';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 
@@ -20,6 +20,7 @@ import { AppStyles } from './app.styles';
 
 initSentry();
 enableScreens();
+enableFreeze();
 LogBox.ignoreAllLogs();
 
 export const App = () => (

src/components/activity-groups-list/activity-groups-list.styles.ts

@@ -17,7 +17,8 @@ export const useActivityGroupsListStyles = createUseStyles(({ colors, typography
   promotionItemWrapper: {
     paddingVertical: formatSize(12),
     borderBottomWidth: formatSize(0.5),
-    borderBottomColor: colors.lines
+    borderBottomColor: colors.lines,
+    alignSelf: 'center'
   },
   centeredItem: {
     alignSelf: 'center'

src/components/activity-groups-list/activity-groups-list.tsx

@@ -9,6 +9,7 @@ import { emptyFn } from 'src/config/general';
 import { useFakeRefreshControlProps } from 'src/hooks/use-fake-refresh-control-props.hook';
 import { ActivityGroup, emptyActivity } from 'src/interfaces/activity.interface';
 import { isTheSameDay, isToday, isYesterday } from 'src/utils/date.utils';
+import { OptimalPromotionAdType } from 'src/utils/optimal.utils';
 
 import { ActivityGroupItem } from './activity-group-item/activity-group-item';
 import { ActivityGroupsListSelectors } from './activity-groups-list.selectors';
@@ -69,6 +70,7 @@ export const ActivityGroupsList: FC<Props> = ({
     () => (
       <View style={styles.promotionItemWrapper}>
         <OptimalPromotionItem
+          adType={OptimalPromotionAdType.TwMobile}
           style={styles.promotionItem}
           testID={ActivityGroupsListSelectors.promotion}
           onImageError={onOptimalPromotionError}

src/components/header-card/header-card.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 import { InsetSubstitute } from '../inset-substitute/inset-substitute';
@@ -9,7 +9,7 @@ interface Props {
   style?: StyleProp<ViewStyle>;
 }
 
-export const HeaderCard: FC<Props> = ({ hasInsetTop = false, style, children }) => {
+export const HeaderCard: FC<Props> = memo(({ hasInsetTop = false, style, children }) => {
   const styles = useHeaderCardStyles();
 
   return (
@@ -18,4 +18,4 @@ export const HeaderCard: FC<Props> = ({ hasInsetTop = false, style, children })
       {children}
     </View>
   );
-};
+});

src/components/header/exolix-screen-options.tsx

@@ -1,9 +1,10 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import React, { FC, useMemo } from 'react';
 
-import { useNavigation } from '../../navigator/hooks/use-navigation.hook';
-import { useExolixStep } from '../../store/exolix/exolix-selectors';
-import { IconNameEnum } from '../icon/icon-name.enum';
+import { IconNameEnum } from 'src/components/icon/icon-name.enum';
+import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
+import { useExolixStep } from 'src/store/exolix/exolix-selectors';
+
 import { HeaderButton } from './header-button/header-button';
 import { HeaderProgress } from './header-progress/header-progress';
 import { HeaderTitle } from './header-title/header-title';
@@ -18,7 +19,7 @@ const BackButton: FC = () => {
   return <HeaderButton iconName={IconNameEnum.ArrowLeft} onPress={handleOnPress} />;
 };
 
-export const exolixScreenOptions = (): StackNavigationOptions => ({
+export const exolixScreenOptions = (): NativeStackNavigationOptions => ({
   headerTitleAlign: 'center',
   headerLeft: () => <BackButton />,
   headerTitle: () => <TitleComponent />,

src/components/header/generate-screen-options.util.tsx

@@ -1,4 +1,4 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import React, { FC } from 'react';
 
 import { HeaderBackButton } from './header-back-button/header-back-button';
@@ -7,7 +7,7 @@ export const generateScreenOptions = (
   headerTitleElement: ReturnType<FC>,
   headerRightElement: ReturnType<FC> = null,
   headerLeft = true
-): StackNavigationOptions => ({
+): NativeStackNavigationOptions => ({
   headerTitleAlign: 'center',
   headerLeft: () => headerLeft && <HeaderBackButton />,
   headerTitle: () => headerTitleElement,

src/components/header/header-action/header-actions.styles.ts

@@ -6,7 +6,8 @@ export const useHeaderTitleStyles = createUseStyles(() => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginRight: formatSize(18)
+    marginTop: formatSize(4),
+    marginRight: formatSize(4)
   },
   icons: {
     marginLeft: formatSize(18)

src/components/header/header-button/header-button.styles.ts

@@ -4,6 +4,6 @@ import { formatSize } from 'src/styles/format-size';
 
 export const HeaderButtonStyles = StyleSheet.create({
   icon: {
-    marginHorizontal: formatSize(16)
+    marginTop: formatSize(4)
   }
 });

src/components/header/header-progress/header-progress.styles.ts

@@ -5,8 +5,7 @@ import { formatSize } from '../../../styles/format-size';
 
 export const useHeaderProgressStyles = createUseStyles(({ colors, typography }) => ({
   container: {
-    alignItems: 'center',
-    marginHorizontal: formatSize(16)
+    alignItems: 'center'
   },
   text: {
     ...typography.caption13Semibold,

src/components/header/use-modal-options.util.tsx

@@ -1,27 +1,22 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import React from 'react';
 
-import { isIOS } from '../../config/system';
-import { formatSize } from '../../styles/format-size';
-import { useColors } from '../../styles/use-colors';
+import { isIOS } from 'src/config/system';
+import { useColors } from 'src/styles/use-colors';
+
 import { HeaderCloseButton } from './header-close-button/header-close-button';
 import { HeaderTitle } from './header-title/header-title';
 
-export const useModalOptions = (title: string, disableAndroidGestures = false): StackNavigationOptions => {
+export const useModalOptions = (title: string, disableAndroidGestures = false): NativeStackNavigationOptions => {
   const colors = useColors();
 
   return {
     headerTitleAlign: 'center',
-    headerStatusBarHeight: 0,
+    headerBackVisible: false,
     headerStyle: {
-      height: formatSize(60),
-      backgroundColor: colors.navigation,
-      borderBottomWidth: formatSize(0.5),
-      borderBottomColor: colors.lines,
-      shadowOpacity: 0
+      backgroundColor: colors.navigation
     },
     gestureEnabled: disableAndroidGestures ? isIOS : undefined,
-    gestureResponseDistance: isIOS ? undefined : 30,
     headerLeft: () => null,
     headerTitle: () => <HeaderTitle title={title} />,
     headerRight: () => <HeaderCloseButton />

src/components/header/use-navigation-set-options.hook.ts

@@ -1,9 +1,9 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import { DependencyList, useEffect } from 'react';
 
 import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
 
-export const useNavigationSetOptions = (options: Partial<StackNavigationOptions>, deps: DependencyList) => {
+export const useNavigationSetOptions = (options: Partial<NativeStackNavigationOptions>, deps: DependencyList) => {
   const { setOptions } = useNavigation();
 
   useEffect(() => setOptions(options), deps);

src/components/optimal-promotion-item/optimal-promotion-item.tsx

@@ -8,13 +8,14 @@ import {
   usePartnersPromoLoadingSelector,
   usePartnersPromoSelector
 } from 'src/store/partners-promotion/partners-promotion-selectors';
-import { useIsEmptyPromotion } from 'src/utils/optimal.utils';
+import { OptimalPromotionAdType, useIsEmptyPromotion } from 'src/utils/optimal.utils';
 
 import { PromotionItem } from '../promotion-item/promotion-item';
 import { TextPromotionItem } from '../text-promotion-item/text-promotion-item';
 import { OptimalPromotionVariantEnum } from './optimal-promotion-variant.enum';
 
 interface Props extends TestIdProps {
+  adType: OptimalPromotionAdType;
   style?: StyleProp<ViewStyle>;
   shouldShowCloseButton?: boolean;
   variant?: OptimalPromotionVariantEnum;
@@ -23,14 +24,15 @@ interface Props extends TestIdProps {
 }
 
 export const OptimalPromotionItem: FC<Props> = ({
+  adType,
   testID,
   style,
   shouldShowCloseButton = true,
   variant = OptimalPromotionVariantEnum.Image,
   onImageError,
   onEmptyPromotionReceived
 }) => {
-  const partnersPromotion = usePartnersPromoSelector();
+  const partnersPromotion = usePartnersPromoSelector(adType);
   const partnersPromotionLoading = usePartnersPromoLoadingSelector();
   const partnersPromotionEnabled = useIsPartnersPromoEnabledSelector();
   const { disablePromotion } = usePromotionAfterConfirmation();

src/config/fixed-times.ts

@@ -6,6 +6,8 @@ const METADATA_SYNC_INTERVAL = 4 * BLOCK_DURATION;
 
 export const TOKENS_SYNC_INTERVAL = METADATA_SYNC_INTERVAL;
 
+export const SWAP_SYNC_INTERVAL = METADATA_SYNC_INTERVAL;
+
 export const BALANCES_SYNC_INTERVAL = BLOCK_DURATION;
 
 export const MARKET_SYNC_INTERVAL = 4 * BLOCK_DURATION;
@@ -22,4 +24,6 @@ export const RATES_SYNC_INTERVAL = LONG_INTERVAL;
 
 export const NOTIFICATIONS_SYNC_INTERVAL = LONG_INTERVAL;
 
+export const DAPPS_SYNC_INTERVAL = LONG_INTERVAL;
+
 export const APR_REFRESH_INTERVAL = 30 * ONE_MINUTE;

src/hooks/use-partners-promo.ts

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { PROMO_SYNC_INTERVAL } from 'src/config/fixed-times';
@@ -16,18 +15,6 @@ export const useIsPartnersPromoShown = () => {
   return isEnabled && !areAdsNotEnabled;
 };
 
-export const usePartnersPromoLoad = () => {
-  const promoIsShown = useIsPartnersPromoShown();
-
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (promoIsShown) {
-      dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwMobile));
-    }
-  }, [promoIsShown]);
-};
-
 export const usePartnersPromoSync = () => {
   const promoIsShown = useIsPartnersPromoShown();
 
@@ -36,6 +23,7 @@ export const usePartnersPromoSync = () => {
   useAuthorisedInterval(
     () => {
       if (promoIsShown) {
+        dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwToken));
         dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwMobile));
       }
     },

src/modals/manage-earn-opportunity-modal/details-card/stats-item/styles.ts

@@ -8,7 +8,6 @@ export const useStatsItemStyles = createUseStylesMemoized(({ colors, typography
   title: {
     ...typography.caption11Regular,
     letterSpacing: formatSize(0.07),
-    textIndent: formatSize(1),
     marginBottom: formatSize(2),
     color: colors.gray1
   },

src/navigator/hooks/use-stack-navigation-options.hook.ts

@@ -1,17 +1,17 @@
-import { StackNavigationOptions, TransitionPresets } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import { useMemo } from 'react';
 
-import { useColors } from '../../styles/use-colors';
+import { useColors } from 'src/styles/use-colors';
 
 export const useStackNavigationOptions = () => {
   const colors = useColors();
 
-  return useMemo<StackNavigationOptions>(
+  return useMemo<NativeStackNavigationOptions>(
     () => ({
+      headerBackVisible: false,
       presentation: 'modal',
       cardOverlayEnabled: true,
       gestureEnabled: true,
-      ...TransitionPresets.ModalPresentationIOS,
       cardStyle: {
         backgroundColor: colors.pageBG
       }

src/navigator/hooks/use-stack-navigator-style-options.hook.ts

@@ -1,20 +1,15 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 
-import { formatSize } from 'src/styles/format-size';
-import { generateShadow } from 'src/styles/generate-shadow';
 import { useColors } from 'src/styles/use-colors';
 
-export const useStackNavigatorStyleOptions = (): StackNavigationOptions => {
+export const useStackNavigatorStyleOptions = (): NativeStackNavigationOptions => {
   const colors = useColors();
 
   return {
+    headerBackVisible: false,
     headerStyle: {
-      ...generateShadow(1, colors.lines),
-      backgroundColor: colors.navigation,
-      borderBottomWidth: formatSize(0.5),
-      borderBottomColor: colors.lines
+      backgroundColor: colors.navigation
     },
-    headerTitleStyle: { color: colors.black },
-    cardStyle: { backgroundColor: colors.pageBG }
+    headerTitleStyle: { color: colors.black }
   };
 };