fix:(web): headerRight button

crossplatformkorea · Dec 28, 2024 · 9d1bf5f · 9d1bf5f
1 parent 39ec3d0
commit 9d1bf5f
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 73 deletions.
diff --git a/app/(home)/post/[id]/update.tsx b/app/(home)/post/[id]/update.tsx
@@ -7,6 +7,7 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
+  Pressable,
   View,
 } from 'react-native';
 import ErrorFallback from '../../../../src/components/uis/FallbackComponent';
@@ -36,7 +37,6 @@ const Container = styled.SafeAreaView`
 `;
 
 const Content = styled.View`
-  flex: 1;
   gap: 16px;
 `;
 
@@ -303,32 +303,47 @@ export default function PostUpdate(): JSX.Element {
       <Stack.Screen
         options={{
           title: post?.title || t('common.post'),
-          headerRight: () => (
-            <RectButton
-              // @ts-ignore
-              onPress={handleSubmit(handleUpdatePost)}
-              hitSlop={{
-                bottom: 8,
-                left: 8,
-                right: 8,
-                top: 8,
-              }}
-              style={css`
-                margin-top: 4px;
-                margin-right: -4px;
-                border-radius: 99px;
+          headerRight: () =>
+            Platform.OS === 'web' ? (
+              <Pressable
+                onPress={handleSubmit(handleUpdatePost)}
+                style={css`
+                  margin: 0 12px;
+                  border-radius: 48px;
+                `}
+              >
+                {isSubmitting ? (
+                  <ActivityIndicator size="small" color={theme.text.label} />
+                ) : (
+                  <Typography.Body3>{t('common.update')}</Typography.Body3>
+                )}
+              </Pressable>
+            ) : (
+              <RectButton
+                // @ts-ignore
+                onPress={handleSubmit(handleUpdatePost)}
+                hitSlop={{
+                  bottom: 8,
+                  left: 8,
+                  right: 8,
+                  top: 8,
+                }}
+                style={css`
+                  margin-top: 4px;
+                  margin-right: -4px;
+                  border-radius: 99px;
 
-                align-items: center;
-                justify-content: center;
-              `}
-            >
-              {isSubmitting ? (
-                <ActivityIndicator size="small" color={theme.text.label} />
-              ) : (
-                <Typography.Body3>{t('common.update')}</Typography.Body3>
-              )}
-            </RectButton>
-          ),
+                  align-items: center;
+                  justify-content: center;
+                `}
+              >
+                {isSubmitting ? (
+                  <ActivityIndicator size="small" color={theme.text.label} />
+                ) : (
+                  <Typography.Body3>{t('common.update')}</Typography.Body3>
+                )}
+              </RectButton>
+            ),
         }}
       />
       <Container>{content}</Container>

diff --git a/app/(home)/post/write.tsx b/app/(home)/post/write.tsx
@@ -8,6 +8,7 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
+  Pressable,
   View,
 } from 'react-native';
 import {useRecoilValue, useSetRecoilState} from 'recoil';
@@ -29,7 +30,6 @@ const Container = styled.SafeAreaView`
 `;
 
 const Content = styled.View`
-  flex: 1;
   gap: 16px;
 `;
 
@@ -121,33 +121,52 @@ export default function PostWrite(): JSX.Element {
       <Stack.Screen
         options={{
           title: t('post.write.write'),
-          headerRight: () => (
-            <RectButton
-              // @ts-ignore
-              onPress={handleSubmit(handleWritePost)}
-              activeOpacity={0}
-              style={css`
-                margin-top: 4px;
-                margin-right: -4px;
-                border-radius: 99px;
+          headerRight: () =>
+            Platform.OS === 'web' ? (
+              <Pressable
+                onPress={handleSubmit(handleWritePost)}
+                style={css`
+                  margin: 0 12px;
+                  border-radius: 48px;
+                `}
+              >
+                {isSubmitting ? (
+                  <ActivityIndicator size="small" color={theme.text.label} />
+                ) : (
+                  <Typography.Body3>
+                    {t('post.write.register')}
+                  </Typography.Body3>
+                )}
+              </Pressable>
+            ) : (
+              <RectButton
+                // @ts-ignore
+                onPress={handleSubmit(handleWritePost)}
+                activeOpacity={0}
+                style={css`
+                  margin-top: 4px;
+                  margin-right: -4px;
+                  border-radius: 99px;
 
-                align-items: center;
-                justify-content: center;
-              `}
-              hitSlop={{
-                bottom: 8,
-                left: 8,
-                right: 8,
-                top: 8,
-              }}
-            >
-              {isSubmitting ? (
-                <ActivityIndicator size="small" color={theme.text.label} />
-              ) : (
-                <Typography.Body3>{t('post.write.register')}</Typography.Body3>
-              )}
-            </RectButton>
-          ),
+                  align-items: center;
+                  justify-content: center;
+                `}
+                hitSlop={{
+                  bottom: 8,
+                  left: 8,
+                  right: 8,
+                  top: 8,
+                }}
+              >
+                {isSubmitting ? (
+                  <ActivityIndicator size="small" color={theme.text.label} />
+                ) : (
+                  <Typography.Body3>
+                    {t('post.write.register')}
+                  </Typography.Body3>
+                )}
+              </RectButton>
+            ),
         }}
       />
       <KeyboardAvoidingView

diff --git a/app/(home)/settings/profile-update.tsx b/app/(home)/settings/profile-update.tsx
@@ -7,6 +7,7 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
+  Pressable,
   Text,
   View,
 } from 'react-native';
@@ -563,27 +564,42 @@ export default function ProfileUpdate(): JSX.Element {
       <Stack.Screen
         options={{
           title: t('profileUpdate.title'),
-          headerRight: () => (
-            <RectButton
-              // @ts-ignore
-              onPress={handleSubmit(handleProfileUpdate)}
-              hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
-              style={css`
-                margin-top: 4px;
-                margin-right: -4px;
-                border-radius: 99px;
+          headerRight: () =>
+            Platform.OS === 'web' ? (
+              <Pressable
+                onPress={handleSubmit(handleProfileUpdate)}
+                style={css`
+                  margin: 0 12px;
+                  border-radius: 48px;
+                `}
+              >
+                {isSubmitting ? (
+                  <ActivityIndicator size="small" color={theme.text.label} />
+                ) : (
+                  <Typography.Body3>{t('common.done')}</Typography.Body3>
+                )}
+              </Pressable>
+            ) : (
+              <RectButton
+                // @ts-ignore
+                onPress={handleSubmit(handleProfileUpdate)}
+                hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
+                style={css`
+                  margin-top: 4px;
+                  margin-right: -4px;
+                  border-radius: 99px;
 
-                align-items: center;
-                justify-content: center;
-              `}
-            >
-              {isSubmitting ? (
-                <ActivityIndicator size="small" color={theme.text.label} />
-              ) : (
-                <Typography.Body3>{t('common.done')}</Typography.Body3>
-              )}
-            </RectButton>
-          ),
+                  align-items: center;
+                  justify-content: center;
+                `}
+              >
+                {isSubmitting ? (
+                  <ActivityIndicator size="small" color={theme.text.label} />
+                ) : (
+                  <Typography.Body3>{t('common.done')}</Typography.Body3>
+                )}
+              </RectButton>
+            ),
         }}
       />
       {content}