fix(share): add placeholder button to prevent flicker on load

neuland-ingolstadt · Nov 19, 2024 · ddfd014 · ddfd014
1 parent 3fa68d0
commit ddfd014
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -1,5 +1,6 @@
 import CrashView from '@/components/Error/CrashView'
 import PlatformIcon from '@/components/Universal/Icon'
+import ShareHeaderButton from '@/components/Universal/ShareHeaderButton'
 import Provider from '@/components/provider'
 import i18n from '@/localization/i18n'
 import '@/styles/unistyles'
@@ -182,6 +183,9 @@ function RootLayout(): JSX.Element {
                                 presentation: 'modal',
                             },
                         }),
+                        headerRight: () => (
+                            <ShareHeaderButton onPress={() => {}} />
+                        ),
                     }}
                 />
                 <Stack.Screen
@@ -193,6 +197,9 @@ function RootLayout(): JSX.Element {
                                 presentation: 'modal',
                             },
                         }),
+                        headerRight: () => (
+                            <ShareHeaderButton onPress={() => {}} />
+                        ),
                     }}
                 />
                 <Stack.Screen
@@ -292,6 +299,9 @@ function RootLayout(): JSX.Element {
                                 presentation: 'modal',
                             },
                         }),
+                        headerRight: () => (
+                            <ShareHeaderButton onPress={() => {}} />
+                        ),
                     }}
                 />
                 <Stack.Screen
@@ -303,6 +313,9 @@ function RootLayout(): JSX.Element {
                                 presentation: 'modal',
                             },
                         }),
+                        headerRight: () => (
+                            <ShareHeaderButton onPress={() => {}} />
+                        ),
                     }}
                 />
                 <Stack.Screen

diff --git a/src/components/Universal/ShareHeaderButton.tsx b/src/components/Universal/ShareHeaderButton.tsx
@@ -28,26 +28,37 @@ export default function ShareHeaderButton({
                 }}
                 android={{
                     name: 'share',
-                    size: 18,
+                    size: 20,
                 }}
-                style={Platform.select({
-                    android: {
-                        marginRight: 2,
-                    },
-                    ios: {
-                        marginBottom: 3,
-                    },
-                })}
+                style={styles.icon}
             />
         </Pressable>
     )
 }
 
 const stylesheet = createStyleSheet((theme) => ({
+    icon: {
+        ...Platform.select({
+            android: {
+                marginRight: 2,
+                color: theme.colors.text,
+            },
+            ios: {
+                marginBottom: 3,
+                color: theme.colors.primary,
+            },
+        }),
+    },
     shareButton: {
         alignItems: 'center',
-        backgroundColor: theme.colors.background,
-        borderRadius: 25,
+        backgroundColor: Platform.select({
+            android: undefined,
+            ios: theme.colors.background,
+        }),
+        borderRadius: Platform.select({
+            android: undefined,
+            ios: theme.radius.infinite,
+        }),
         height: 34,
         justifyContent: 'center',
         marginRight: -5,