Fix home screen header padding (#38)

app/App.tsx

@@ -1,75 +1,19 @@
 import React, { useEffect } from 'react';
 import 'react-native-get-random-values';
 
-import { SEGMENT_KEY } from '@env';
-import '@ethersproject/shims';
-import {
-  EventPlugin,
-  PluginType,
-  SegmentEvent,
-  createClient,
-} from '@segment/analytics-react-native';
+import { createClient } from '@segment/analytics-react-native';
 import { Buffer } from 'buffer';
 import { YStack } from 'tamagui';
 
 // Adjust the import path as needed
 import AppNavigation from './src/Navigation';
+import { createSegmentClient } from './src/Segment';
 import useUserStore from './src/stores/userStore';
 import { bgWhite } from './src/utils/colors';
 import { setupUniversalLinkListener } from './src/utils/qrCode';
 
 global.Buffer = Buffer;
 
-// Adjust the import path as needed
-
-export class DisableTrackingPlugin extends EventPlugin {
-  type = PluginType.before;
-
-  execute(event: SegmentEvent): SegmentEvent {
-    // Ensure context exists
-    if (!event.context) {
-      event.context = {};
-    }
-
-    // Ensure device context exists
-    if (!event.context.device) {
-      event.context.device = {};
-    }
-
-    // Force tracking related fields to be disabled
-    event.context.device.adTrackingEnabled = false;
-    event.context.device.advertisingId = undefined;
-    event.context.device.trackingStatus = 'not-authorized';
-    event.context.device.id = undefined;
-
-    return event;
-  }
-}
-
-export const createSegmentClient = () => {
-  if (!SEGMENT_KEY) {
-    return null;
-  }
-
-  const client = createClient({
-    writeKey: SEGMENT_KEY,
-    trackAppLifecycleEvents: true,
-    debug: true,
-    collectDeviceId: false,
-    defaultSettings: {
-      integrations: {
-        'Segment.io': {
-          apiKey: SEGMENT_KEY,
-        },
-      },
-    },
-  });
-
-  client.add({ plugin: new DisableTrackingPlugin() });
-
-  return client;
-};
-
 // Export the client variable (will be initialized later)
 export let segmentClient: ReturnType<typeof createClient> | null = null;
 

app/src/Navigation.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import 'react-native-gesture-handler';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 import {
   StaticParamList,
@@ -62,12 +65,14 @@ const DefaultNavBar = (props: StackHeaderProps) => {
 };
 
 const HomeNavBar = (props: StackHeaderProps) => {
+  const insets = useSafeAreaInsets();
   return (
     <NavBar.Container
       backgroundColor={black}
       barStyle={'light-content'}
       padding={16}
       justifyContent="space-between"
+      paddingTop={Math.max(insets.top, 20)}
     >
       <NavBar.LeftAction
         component={

app/src/Segment.ts

@@ -0,0 +1,56 @@
+import { SEGMENT_KEY } from '@env';
+import '@ethersproject/shims';
+import {
+  EventPlugin,
+  PluginType,
+  SegmentEvent,
+  createClient,
+} from '@segment/analytics-react-native';
+
+class DisableTrackingPlugin extends EventPlugin {
+  type = PluginType.before;
+
+  execute(event: SegmentEvent): SegmentEvent {
+    // Ensure context exists
+    if (!event.context) {
+      event.context = {};
+    }
+
+    // Ensure device context exists
+    if (!event.context.device) {
+      event.context.device = {};
+    }
+
+    // Force tracking related fields to be disabled
+    event.context.device.adTrackingEnabled = false;
+    event.context.device.advertisingId = undefined;
+    event.context.device.trackingStatus = 'not-authorized';
+    event.context.device.id = undefined;
+
+    return event;
+  }
+}
+
+export const createSegmentClient = () => {
+  if (!SEGMENT_KEY) {
+    return null;
+  }
+
+  const client = createClient({
+    writeKey: SEGMENT_KEY,
+    trackAppLifecycleEvents: true,
+    debug: true,
+    collectDeviceId: false,
+    defaultSettings: {
+      integrations: {
+        'Segment.io': {
+          apiKey: SEGMENT_KEY,
+        },
+      },
+    },
+  });
+
+  client.add({ plugin: new DisableTrackingPlugin() });
+
+  return client;
+};

app/src/screens/HomeScreen.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { useNavigation } from '@react-navigation/native';
 import { Button, YStack, styled } from 'tamagui';
@@ -25,32 +24,25 @@ const ScanButton = styled(Button, {
 
 const HomeScreen: React.FC = () => {
   const navigation = useNavigation();
+
   return (
-    <SafeAreaView style={{ backgroundColor: black, flex: 1 }}>
-      <YStack
-        bg={black}
-        gap={20}
-        jc="space-between"
-        height={'100%'}
-        padding={20}
-      >
-        <YStack ai="center" gap={20} justifyContent="flex-start">
-          <SelfIdCard width="100%" />
-          <Caption color={amber500} opacity={0.3} textTransform="uppercase">
-            Only visible to you
-          </Caption>
-          <PrivacyNote />
-        </YStack>
-        <YStack ai="center" gap={20} justifyContent="center" paddingBottom={20}>
-          <ScanButton onPress={() => navigation.navigate('QRCodeViewFinder')}>
-            <ScanIcon color={amber500} />
-          </ScanButton>
-          <Caption color={amber500} textTransform="uppercase">
-            Prove your SELF ID
-          </Caption>
-        </YStack>
+    <YStack bg={black} gap={20} jc="space-between" height={'100%'} padding={20}>
+      <YStack ai="center" gap={20} justifyContent="flex-start">
+        <SelfIdCard width="100%" />
+        <Caption color={amber500} opacity={0.3} textTransform="uppercase">
+          Only visible to you
+        </Caption>
+        <PrivacyNote />
       </YStack>
-    </SafeAreaView>
+      <YStack ai="center" gap={20} justifyContent="center" paddingBottom={20}>
+        <ScanButton onPress={() => navigation.navigate('QRCodeViewFinder')}>
+          <ScanIcon color={amber500} />
+        </ScanButton>
+        <Caption color={amber500} textTransform="uppercase">
+          Prove your SELF ID
+        </Caption>
+      </YStack>
+    </YStack>
   );
 };
 

app/src/screens/SplashScreen.tsx

@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import LottieView from 'lottie-react-native';
 
-import { ExpandableBottomLayout } from '../layouts/ExpandableBottomLayout';
 import useUserStore from '../stores/userStore';
+import { black } from '../utils/colors';
 
 interface SplashScreenProps {}
 
@@ -21,20 +21,19 @@ const SplashScreen: React.FC<SplashScreenProps> = ({}) => {
   }, [passportData, userLoaded]);
 
   return (
-    <ExpandableBottomLayout.Layout>
-      <ExpandableBottomLayout.TopSection>
-        <LottieView
-          autoPlay
-          loop={false}
-          source={require('../assets/animations/splash.json')}
-          style={{
-            width: '115%',
-            height: '115%',
-          }}
-          onAnimationFinish={redirect}
-        />
-      </ExpandableBottomLayout.TopSection>
-    </ExpandableBottomLayout.Layout>
+    <LottieView
+      autoPlay
+      loop={false}
+      source={require('../assets/animations/splash.json')}
+      style={{
+        backgroundColor: black,
+        marginLeft: -5,
+        marginTop: -5,
+        width: '105%',
+        height: '105%',
+      }}
+      onAnimationFinish={redirect}
+    />
   );
 };