fix(adhoc): new-arch back button

https://github.com/software-mansion/react-native-screens/issues/1975\#issuecomment-1819084348
crossplatformkorea · Aug 9, 2024 · 01b01e4 · 01b01e4
1 parent 25e90f5
commit 01b01e4
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 43 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -40,8 +40,8 @@ export default ({config}: ConfigContext): ExpoConfig => ({
       'expo-build-properties',
       {
         // https://github.com/software-mansion/react-native-screens/issues/2219
-        // ios: {newArchEnabled: true},
-        // android: {newArchEnabled: true},
+        ios: {newArchEnabled: true},
+        android: {newArchEnabled: true},
       },
     ],
     // @ts-ignore

diff --git a/app/(app)/(tabs)/_layout.tsx b/app/(app)/(tabs)/_layout.tsx
@@ -1,30 +1,27 @@
-import {Pressable, View} from 'react-native';
+import {View} from 'react-native';
 import {Icon, useDooboo} from 'dooboo-ui';
-import {Link, Redirect, Tabs, useRouter} from 'expo-router';
+import {Redirect, Tabs, useRouter} from 'expo-router';
 import {useRecoilState} from 'recoil';
 
 import {authRecoilState} from '../../../src/recoil/atoms';
 import {t} from '../../../src/STRINGS';
 import {useEffect, useRef} from 'react';
 import * as Notifications from 'expo-notifications';
+import {RectButton} from 'react-native-gesture-handler';
 
 function SettingsMenu(): JSX.Element {
   const {theme} = useDooboo();
   const {push} = useRouter();
 
   return (
-    <Link asChild href="/settings">
-      <Pressable onPress={() => push('/settings')}>
-        {({pressed}) => (
-          <Icon
-            color={theme.text.basic}
-            name="List"
-            size={22}
-            style={{marginRight: 15, opacity: pressed ? 0.5 : 1}}
-          />
-        )}
-      </Pressable>
-    </Link>
+    <RectButton onPress={() => push('/settings')}>
+      <Icon
+        color={theme.text.basic}
+        name="List"
+        size={22}
+        style={{marginRight: 15}}
+      />
+    </RectButton>
   );
 }
 

diff --git a/app/(app)/onboarding.tsx b/app/(app)/onboarding.tsx
@@ -8,7 +8,6 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
-  Pressable,
   Text,
   View,
 } from 'react-native';
@@ -30,6 +29,7 @@ import {authRecoilState} from '../../src/recoil/atoms';
 import {ImageInsertArgs} from '../../src/types';
 import FallbackComponent from '../../src/components/uis/FallbackComponent';
 import {showAlert} from '../../src/utils/alert';
+import {RectButton} from 'react-native-gesture-handler';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -196,8 +196,8 @@ export default function Onboarding(): JSX.Element {
         options={{
           title: t('onboarding.title'),
           headerRight: () => (
-            <Pressable
-              onPress={handleSubmit(handleFinishOnboarding)}
+            <RectButton
+              onPress={() => handleSubmit(handleFinishOnboarding)}
               hitSlop={{
                 bottom: 8,
                 left: 8,
@@ -210,7 +210,7 @@ export default function Onboarding(): JSX.Element {
               ) : (
                 <Typography.Body3>{t('common.done')}</Typography.Body3>
               )}
-            </Pressable>
+            </RectButton>
           ),
         }}
       />

diff --git a/app/(app)/post/[id]/index.tsx b/app/(app)/post/[id]/index.tsx
@@ -13,8 +13,6 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Replies from './replies';
 import {useCallback, useRef, useEffect, useState} from 'react';
 import {FlashList} from '@shopify/flash-list';
-import CustomPressable from 'dooboo-ui/uis/CustomPressable';
-import {delayPressIn} from '../../../../src/utils/constants';
 import {useRecoilState} from 'recoil';
 import YoutubePlayer from '@dooboo/react-native-youtube-iframe';
 import {authRecoilState, postsRecoilState} from '../../../../src/recoil/atoms';
@@ -30,6 +28,7 @@ import {
   getYoutubeIdFromURL,
   isYoutubeURL,
 } from '../../../../src/utils/urlParser';
+import {RectButton} from 'react-native-gesture-handler';
 
 const Container = styled.View`
   background-color: ${({theme}) => theme.bg.basic};
@@ -323,8 +322,7 @@ export default function PostDetails(): JSX.Element {
                   gap: 4px;
                 `}
               >
-                <CustomPressable
-                  delayHoverIn={delayPressIn}
+                <RectButton
                   hitSlop={{top: 20, left: 20, right: 20, bottom: 20}}
                   onPress={handlePressMore}
                   style={css`
@@ -334,7 +332,7 @@ export default function PostDetails(): JSX.Element {
                   `}
                 >
                   <Icon name="DotsThreeOutlineVertical" size={18} />
-                </CustomPressable>
+                </RectButton>
               </View>
             ) : null,
         }}

diff --git a/app/(app)/post/[id]/update.tsx b/app/(app)/post/[id]/update.tsx
@@ -8,7 +8,6 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
-  Pressable,
   View,
 } from 'react-native';
 import ErrorFallback from '../../../../src/components/uis/FallbackComponent';
@@ -26,6 +25,7 @@ import MultiUploadImageInput from '../../../../src/components/uis/MultiUploadIma
 import {MAX_IMAGES_UPLOAD_LENGTH} from '../../../../src/utils/constants';
 import CustomScrollView from '../../../../src/components/uis/CustomScrollView';
 import {filterUploadableAssets} from '../../../../src/utils/common';
+import {RectButton} from 'react-native-gesture-handler';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -288,8 +288,8 @@ export default function PostUpdate(): JSX.Element {
         options={{
           title: post?.title || t('common.post'),
           headerRight: () => (
-            <Pressable
-              onPress={handleSubmit(handleUpdatePost)}
+            <RectButton
+              onPress={() => handleSubmit(handleUpdatePost)}
               hitSlop={{
                 bottom: 8,
                 left: 8,
@@ -302,7 +302,7 @@ export default function PostUpdate(): JSX.Element {
               ) : (
                 <Typography.Body3>{t('common.update')}</Typography.Body3>
               )}
-            </Pressable>
+            </RectButton>
           ),
         }}
       />

diff --git a/app/(app)/post/write.tsx b/app/(app)/post/write.tsx
@@ -9,7 +9,6 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
-  Pressable,
   View,
 } from 'react-native';
 import {useRecoilValue, useSetRecoilState} from 'recoil';
@@ -21,6 +20,7 @@ import {ImagePickerAsset} from 'expo-image-picker';
 import {MAX_IMAGES_UPLOAD_LENGTH} from '../../../src/utils/constants';
 import CustomScrollView from '../../../src/components/uis/CustomScrollView';
 import {uploadFileToSupabase} from '../../../src/supabase';
+import { RectButton } from 'react-native-gesture-handler';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -114,8 +114,8 @@ export default function PostWrite(): JSX.Element {
         options={{
           title: t('post.write.write'),
           headerRight: () => (
-            <Pressable
-              onPress={handleSubmit(handleWritePost)}
+            <RectButton
+              onPress={() => handleSubmit(handleWritePost)}
               hitSlop={{
                 bottom: 8,
                 left: 8,
@@ -128,7 +128,7 @@ export default function PostWrite(): JSX.Element {
               ) : (
                 <Typography.Body3>{t('post.write.register')}</Typography.Body3>
               )}
-            </Pressable>
+            </RectButton>
           ),
         }}
       />

diff --git a/app/(app)/settings/profile-update.tsx b/app/(app)/settings/profile-update.tsx
@@ -8,7 +8,6 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
-  Pressable,
   Text,
   View,
 } from 'react-native';
@@ -30,6 +29,7 @@ import {
 import FallbackComponent from '../../../src/components/uis/FallbackComponent';
 import CustomLoadingIndicator from '../../../src/components/uis/CustomLoadingIndicator';
 import {showAlert} from '../../../src/utils/alert';
+import {RectButton} from 'react-native-gesture-handler';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -193,8 +193,8 @@ export default function ProfileUpdate(): JSX.Element {
         options={{
           title: t('profileUpdate.title'),
           headerRight: () => (
-            <Pressable
-              onPress={handleSubmit(handleProfileUpdate)}
+            <RectButton
+              onPress={() => handleSubmit(handleProfileUpdate)}
               hitSlop={{
                 bottom: 8,
                 left: 8,
@@ -207,7 +207,7 @@ export default function ProfileUpdate(): JSX.Element {
               ) : (
                 <Typography.Body3>{t('common.done')}</Typography.Body3>
               )}
-            </Pressable>
+            </RectButton>
           ),
         }}
       />

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -1,13 +1,12 @@
 import {useEffect, useState} from 'react';
 import type {ColorSchemeName} from 'react-native';
 import {Platform, useColorScheme} from 'react-native';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {GestureHandlerRootView, RectButton} from 'react-native-gesture-handler';
 import {dark, light} from '@dooboo-ui/theme';
 import styled, {css} from '@emotion/native';
 import * as Notifications from 'expo-notifications';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Icon, useDooboo} from 'dooboo-ui';
-import CustomPressable from 'dooboo-ui/uis/CustomPressable';
 import StatusBarBrightness from 'dooboo-ui/uis/StatusbarBrightness';
 import {Stack, useRouter} from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
@@ -21,7 +20,6 @@ import {supabase} from '../src/supabase';
 import {
   AsyncStorageKey,
   COMPONENT_WIDTH,
-  delayPressIn,
   WEB_URL,
 } from '../src/utils/constants';
 import ReportModal from '../src/components/modals/ReportModal';
@@ -204,8 +202,7 @@ function App(): JSX.Element | null {
             },
             headerLeft: ({canGoBack}) =>
               canGoBack && (
-                <CustomPressable
-                  delayHoverIn={delayPressIn}
+                <RectButton
                   hitSlop={{top: 8, left: 8, right: 8, bottom: 8}}
                   onPress={() =>
                     canGoBack
@@ -228,7 +225,7 @@ function App(): JSX.Element | null {
                   }
                 >
                   <Icon name="CaretLeft" size={24} />
-                </CustomPressable>
+                </RectButton>
               ),
           }}
         >