From ddfd014f71560ba96c0dc8a5873107293e53edbe Mon Sep 17 00:00:00 2001
From: Robert Eggl <github@roberteggl.dev>
Date: Tue, 19 Nov 2024 18:11:31 +0100
Subject: [PATCH] fix(share): add placeholder button to prevent flicker on load

---
 src/app/_layout.tsx                           | 13 ++++++++
 .../Universal/ShareHeaderButton.tsx           | 33 ++++++++++++-------
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
index 27dcaded..c653899a 100644
--- 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
index afb25c3e..f9d4bd7a 100644
--- 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,