[FIX] remove use useLayoutEffect - replace fast image plugin

Author: gabrielbazan7

ios/Podfile.lock

@@ -894,7 +894,13 @@ PODS:
   - RNDeviceInfo (8.4.7):
     - React-Core
   - RNFastImage (8.6.3):
-    - React-Core
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - React-Codegen
+    - React-RCTFabric
+    - ReactCommon/turbomodule/core
     - SDWebImage (~> 5.11.1)
     - SDWebImageWebPCoder (~> 0.8.4)
   - RNFS (2.20.0):
@@ -1045,7 +1051,7 @@ DEPENDENCIES:
   - libevent (~> 2.1.12)
   - OpenSSL-Universal (= 1.1.1100)
   - Permission-Notifications (from `../node_modules/react-native-permissions/ios/Notifications/Permission-Notifications.podspec`)
-  - PoweredByDosh
+  - PoweredByDosh (= 2.8.0)
   - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCT-Folly/Fabric (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
@@ -1393,7 +1399,7 @@ SPEC CHECKSUMS:
   RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495
   RNCMaskedView: c298b644a10c0c142055b3ae24d83879ecb13ccd
   RNDeviceInfo: b32d24c84e40d54b736e62a7d2abd15e1225258d
-  RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
+  RNFastImage: fdf8c03d43026a4af81e15e483e457d8b60067c6
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 9d2ebd17a9fef618d9720e3d95ff5e6607acf8d4
   RNInAppBrowser: e36d6935517101ccba0e875bac8ad7b0cb655364
@@ -1418,6 +1424,6 @@ SPEC CHECKSUMS:
   Yoga: 065f0b74dba4832d6e328238de46eb72c5de9556
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: fe2ed3756c1d0a13e122332e57fd8bb6d6538bab
+PODFILE CHECKSUM: 284dfb8a2d77e871b858cb28fee6a828879f146d
 
 COCOAPODS: 1.12.1

package.json

@@ -104,7 +104,7 @@
     "react-native-device-info": "8.4.7",
     "react-native-draggable-flatlist": "4.0.1",
     "react-native-error-boundary": "1.2.1",
-    "react-native-fast-image": "8.6.3",
+    "react-native-fast-image": "https://github.com/numandev1/react-native-fast-image#feat/fabric-wolewicki",
     "react-native-fs": "2.20.0",
     "react-native-gesture-handler": "2.9.0",
     "react-native-get-random-values": "1.8.0",

src/navigation/tabs/shop/ShopHome.tsx

@@ -2,7 +2,6 @@ import debounce from 'lodash.debounce';
 import React, {
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -33,7 +32,6 @@ import {
 import {APP_NETWORK} from '../../../constants/config';
 import {useAppDispatch, useAppSelector} from '../../../utils/hooks';
 import {StackScreenProps} from '@react-navigation/stack';
-import {ShopScreens, ShopStackParamList} from './ShopStack';
 import {useTranslation} from 'react-i18next';
 import {
   useFocusEffect,
@@ -45,9 +43,12 @@ import {useTheme} from 'styled-components/native';
 import {SlateDark, White} from '../../../styles/colors';
 import {sleep} from '../../../utils/helper-methods';
 import {Analytics} from '../../../store/analytics/analytics.effects';
+import {TabsScreens, TabsStackParamList} from '../TabsStack';
 import {Bills} from './components/Bills';
 import {HEIGHT} from '../../../components/styled/Containers';
 
+export type ShopStackScreenProps = StackScreenProps<TabsStackParamList, TabsScreens.SHOP>;
+
 export enum ShopTabs {
   GIFT_CARDS = 'Gift Cards',
   SHOP_ONLINE = 'Shop Online',
@@ -122,9 +123,7 @@ const getScrollViewHeight = (
     : getShopOnlineScrollViewHeight(integrationsCategories);
 };
 
-const ShopHome: React.FC<
-  StackScreenProps<ShopStackParamList, ShopScreens.HOME>
-> = ({route}) => {
+const ShopHomeScreen: React.FC<ShopStackScreenProps> = ({route}) => {
   const {t} = useTranslation();
   const theme = useTheme();
   const availableCardMap = useAppSelector(({SHOP}) => SHOP.availableCardMap);
@@ -170,7 +169,7 @@ const ShopHome: React.FC<
     [availableGiftCards, categoriesAndCurations, purchasedGiftCards],
   );
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     navigation.setOptions({
       headerLeft: () => null,
       headerTitle: () => <HeaderTitle>{t('Pay with Crypto')}</HeaderTitle>,
@@ -366,4 +365,4 @@ const ShopHome: React.FC<
   );
 };
 
-export default ShopHome;
+export default ShopHomeScreen;

src/navigation/tabs/shop/bill/screens/ConnectBills.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useLayoutEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StackScreenProps} from '@react-navigation/stack';
 import WebView from 'react-native-webview';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
@@ -26,7 +26,7 @@ const ConnectBills = ({
     ({BITPAY_ID}) => BITPAY_ID.apiToken[APP_NETWORK],
   );
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     dispatch(startOnGoingProcessModal('GENERAL_AWAITING'));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

src/navigation/tabs/shop/bill/screens/PayAllBills.tsx

@@ -1,4 +1,4 @@
-import React, {useLayoutEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StackScreenProps} from '@react-navigation/stack';
 import {useTranslation} from 'react-i18next';
 import {BillScreens, BillStackParamList} from '../BillStack';
@@ -203,7 +203,7 @@ const PayAllBills = ({
     });
   };
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     navigation.setOptions({
       headerTransparent: false,
       headerTitle: () => {

src/navigation/tabs/shop/bill/screens/PayBill.tsx

@@ -1,4 +1,4 @@
-import React, {useLayoutEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StackScreenProps} from '@react-navigation/stack';
 import {useTranslation} from 'react-i18next';
 import {BillScreens, BillStackParamList} from '../BillStack';
@@ -251,7 +251,7 @@ const PayBill = ({
     );
   };
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     navigation.setOptions({
       headerTransparent: false,
       headerTitle,

src/navigation/tabs/shop/bill/screens/Payment.tsx

@@ -1,4 +1,4 @@
-import React, {useLayoutEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StackScreenProps} from '@react-navigation/stack';
 import {useTranslation} from 'react-i18next';
 import {BillStackParamList} from '../BillStack';
@@ -102,7 +102,7 @@ const Payment = ({
     },
   ];
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     navigation.setOptions({
       headerTransparent: true,
       headerTitle: () => {

src/navigation/tabs/shop/bill/screens/Payments.tsx

@@ -1,4 +1,4 @@
-import React, {useLayoutEffect} from 'react';
+import React, {useEffect} from 'react';
 import {StackScreenProps} from '@react-navigation/stack';
 import {useTranslation} from 'react-i18next';
 import {BillScreens, BillStackParamList} from '../BillStack';
@@ -26,7 +26,7 @@ const Payments = ({
     ({SHOP}) => SHOP.billPayAccounts[APP_NETWORK],
   ) as BillPayAccount[];
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     navigation.setOptions({
       headerTitle: () => {
         return (

src/navigation/wallet-connect/screens/WalletConnectConnections.tsx

@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useCallback, useLayoutEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {useAppDispatch, useAppSelector} from '../../../utils/hooks';
 import styled from 'styled-components/native';
 import {BaseText, H5} from '../../../components/styled/Text';

src/navigation/wallet/screens/UpdateKeyOrWalletName.tsx

@@ -48,7 +48,7 @@ const UpdateKeyOrWalletName: React.FC<UpdateKeyOrWalletNameScreenProps> = ({
   const dispatch = useAppDispatch();
   const {key, wallet, context} = route.params;
   const {walletName, walletId} = wallet || {};
-  useLayoutEffect(() => {
+  useEffect(() => {
     navigation.setOptions({
       headerTitle: () => (
         <HeaderTitle>