From 87835f672d63080295df1e2c04b40e995b3defbf Mon Sep 17 00:00:00 2001
From: Nayif Noushad <nayifveliya99@gmail.com>
Date: Fri, 11 Apr 2025 22:42:41 +0530
Subject: [PATCH] s

---
 src/screens/AddonsScreen.tsx   | 40 ++++++++++++++++++++++++++++++++--
 src/screens/DiscoverScreen.tsx |  2 +-
 src/screens/LibraryScreen.tsx  |  2 +-
 src/screens/SettingsScreen.tsx |  2 +-
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/screens/AddonsScreen.tsx b/src/screens/AddonsScreen.tsx
index 8096aee..4d8e6d8 100644
--- a/src/screens/AddonsScreen.tsx
+++ b/src/screens/AddonsScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   View,
   Text,
@@ -23,6 +23,9 @@ import { MaterialIcons } from '@expo/vector-icons';
 import { colors } from '../styles';
 import { Image as ExpoImage } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import { NavigationProp } from '@react-navigation/native';
+import { RootStackParamList } from '../navigation/AppNavigator';
 
 // Extend Manifest type to include logo
 interface ExtendedManifest extends Manifest {
@@ -31,7 +34,10 @@ interface ExtendedManifest extends Manifest {
 
 const { width } = Dimensions.get('window');
 
+const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
+
 const AddonsScreen = () => {
+  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const [addons, setAddons] = useState<ExtendedManifest[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
@@ -177,8 +183,20 @@ const AddonsScreen = () => {
 
   return (
     <SafeAreaView style={styles.container}>
-      <StatusBar barStyle="light-content" backgroundColor={colors.darkBackground} />
+      <StatusBar
+        barStyle="light-content"
+        backgroundColor={colors.darkBackground}
+        translucent
+      />
       
+      <View style={styles.header}>
+        <View style={styles.headerContent}>
+          <Text style={styles.headerTitle}>
+            Addons
+          </Text>
+        </View>
+      </View>
+
       <View style={styles.searchContainer}>
         <MaterialIcons name="search" size={24} color={colors.mediumGray} />
         <TextInput
@@ -362,6 +380,24 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: colors.darkBackground,
   },
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 12 : 4,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255,255,255,0.1)',
+    backgroundColor: colors.darkBackground,
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerTitle: {
+    fontSize: 32,
+    fontWeight: '800',
+    letterSpacing: 0.5,
+    color: colors.white,
+  },
   searchContainer: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/src/screens/DiscoverScreen.tsx b/src/screens/DiscoverScreen.tsx
index 7b8c0c1..cfa7000 100644
--- a/src/screens/DiscoverScreen.tsx
+++ b/src/screens/DiscoverScreen.tsx
@@ -82,7 +82,7 @@ const DiscoverScreen = () => {
     header: {
       paddingHorizontal: 16,
       paddingVertical: 12,
-      paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 12 : 12,
+      paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 12 : 4,
       borderBottomWidth: 1,
       borderBottomColor: 'rgba(255,255,255,0.1)',
       backgroundColor: colors.darkBackground,
diff --git a/src/screens/LibraryScreen.tsx b/src/screens/LibraryScreen.tsx
index f146038..3721a27 100644
--- a/src/screens/LibraryScreen.tsx
+++ b/src/screens/LibraryScreen.tsx
@@ -272,7 +272,7 @@ const styles = StyleSheet.create({
   header: {
     paddingHorizontal: 16,
     paddingVertical: 12,
-    paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 12 : 12,
+    paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 12 : 4,
     borderBottomWidth: 1,
     borderBottomColor: 'rgba(255,255,255,0.1)',
     backgroundColor: colors.darkBackground,
diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx
index 3013385..056636a 100644
--- a/src/screens/SettingsScreen.tsx
+++ b/src/screens/SettingsScreen.tsx
@@ -258,7 +258,7 @@ const styles = StyleSheet.create({
   header: {
     paddingHorizontal: 16,
     paddingVertical: 12,
-    paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 12 : 12,
+    paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 12 : 4,
     borderBottomWidth: 1,
     borderBottomColor: 'rgba(255,255,255,0.1)',
     backgroundColor: colors.darkBackground,