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.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';
@@ -65,28 +66,24 @@ export const ActivityGroupsList: FC<Props> = ({
     return result;
   }, [activityGroups]);
 
-  const Promotion = useMemo(
-    () => (
-      <View style={styles.promotionItemWrapper}>
-        <OptimalPromotionItem
-          style={styles.promotionItem}
-          testID={ActivityGroupsListSelectors.promotion}
-          onImageError={onOptimalPromotionError}
-          onEmptyPromotionReceived={onOptimalPromotionError}
-        />
-      </View>
-    ),
-    [onOptimalPromotionError]
-  );
-
   const renderItem: ListRenderItem<string | ActivityGroup> = useCallback(
     ({ item, index }) =>
       typeof item === 'string' ? (
         <Text style={styles.sectionHeaderText}>{item}</Text>
       ) : (
         <>
           <ActivityGroupItem group={item} />
-          {index === 1 && shouldShowPromotion && Promotion}
+          {index === 1 && shouldShowPromotion && (
+            <View style={styles.promotionItemWrapper}>
+              <OptimalPromotionItem
+                adType={OptimalPromotionAdType.TwMobile}
+                style={styles.promotionItem}
+                testID={ActivityGroupsListSelectors.promotion}
+                onImageError={onOptimalPromotionError}
+                onEmptyPromotionReceived={onOptimalPromotionError}
+              />
+            </View>
+          )}
         </>
       ),
     [onOptimalPromotionError, shouldShowPromotion]
@@ -102,7 +99,17 @@ export const ActivityGroupsList: FC<Props> = ({
 
   return (
     <>
-      {sections.length === 0 && shouldShowPromotion && Promotion}
+      {sections.length === 0 && shouldShowPromotion && (
+        <View style={styles.promotionItemWrapper}>
+          <OptimalPromotionItem
+            adType={OptimalPromotionAdType.TwMobile}
+            style={[styles.promotionItem, styles.centeredItem]}
+            testID={ActivityGroupsListSelectors.promotion}
+            onImageError={onOptimalPromotionError}
+            onEmptyPromotionReceived={onOptimalPromotionError}
+          />
+        </View>
+      )}
       <View style={styles.contentContainer}>
         <FlashList
           data={sections}

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

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { memo, useEffect } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 
 import { usePromotionAfterConfirmation } from 'src/hooks/use-disable-promotion-after-confirmation.hook';
@@ -8,73 +8,77 @@ 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;
   onImageError?: () => void;
   onEmptyPromotionReceived?: () => void;
 }
 
-export const OptimalPromotionItem: FC<Props> = ({
-  testID,
-  style,
-  shouldShowCloseButton = true,
-  variant = OptimalPromotionVariantEnum.Image,
-  onImageError,
-  onEmptyPromotionReceived
-}) => {
-  const partnersPromotion = usePartnersPromoSelector();
-  const partnersPromotionLoading = usePartnersPromoLoadingSelector();
-  const partnersPromotionEnabled = useIsPartnersPromoEnabledSelector();
-  const { disablePromotion } = usePromotionAfterConfirmation();
+export const OptimalPromotionItem = memo<Props>(
+  ({
+    adType,
+    testID,
+    style,
+    shouldShowCloseButton = true,
+    variant = OptimalPromotionVariantEnum.Image,
+    onImageError,
+    onEmptyPromotionReceived
+  }) => {
+    const partnersPromotion = usePartnersPromoSelector(adType);
+    const partnersPromotionLoading = usePartnersPromoLoadingSelector();
+    const partnersPromotionEnabled = useIsPartnersPromoEnabledSelector();
+    const { disablePromotion } = usePromotionAfterConfirmation();
 
-  const promotionIsEmpty = useIsEmptyPromotion(partnersPromotion);
+    const promotionIsEmpty = useIsEmptyPromotion(partnersPromotion);
 
-  useEffect(() => {
-    if (partnersPromotionEnabled && onEmptyPromotionReceived && promotionIsEmpty) {
-      onEmptyPromotionReceived();
+    useEffect(() => {
+      if (partnersPromotionEnabled && onEmptyPromotionReceived && promotionIsEmpty) {
+        onEmptyPromotionReceived();
+      }
+    }, [partnersPromotionEnabled, onEmptyPromotionReceived, promotionIsEmpty]);
+
+    if (!partnersPromotionEnabled || promotionIsEmpty) {
+      return null;
     }
-  }, [partnersPromotionEnabled, onEmptyPromotionReceived, promotionIsEmpty]);
 
-  if (!partnersPromotionEnabled || promotionIsEmpty) {
-    return null;
-  }
+    if (variant === OptimalPromotionVariantEnum.Text) {
+      return (
+        <TextPromotionItem
+          testID={testID}
+          content={partnersPromotion.copy.content}
+          headline={partnersPromotion.copy.headline}
+          imageUri={partnersPromotion.image}
+          link={partnersPromotion.link}
+          loading={partnersPromotionLoading}
+          shouldShowCloseButton={shouldShowCloseButton}
+          style={style}
+          onClose={disablePromotion}
+          onImageError={onImageError}
+        />
+      );
+    }
 
-  if (variant === OptimalPromotionVariantEnum.Text) {
     return (
-      <TextPromotionItem
+      <PromotionItem
         testID={testID}
-        content={partnersPromotion.copy.content}
-        headline={partnersPromotion.copy.headline}
-        imageUri={partnersPromotion.image}
+        source={{ uri: partnersPromotion.image }}
         link={partnersPromotion.link}
         loading={partnersPromotionLoading}
+        shouldShowAdBage
         shouldShowCloseButton={shouldShowCloseButton}
         style={style}
-        onClose={disablePromotion}
+        onCloseButtonClick={disablePromotion}
         onImageError={onImageError}
       />
     );
   }
-
-  return (
-    <PromotionItem
-      testID={testID}
-      source={{ uri: partnersPromotion.image }}
-      link={partnersPromotion.link}
-      loading={partnersPromotionLoading}
-      shouldShowAdBage
-      shouldShowCloseButton={shouldShowCloseButton}
-      style={style}
-      onCloseButtonClick={disablePromotion}
-      onImageError={onImageError}
-    />
-  );
-};
+);