update home screen styling 😍🐤

Author: abdenassar01

App.tsx

@@ -49,7 +49,7 @@ export default function App() {
    <NavigationContainer>
     <QueryClientProvider client={ client }>
       <Stack.Navigator>
-        <Stack.Screen name='Home' component={ Home } />
+        <Stack.Screen name='Home' component={ Home } options={{ headerShown: false }} />
         <Stack.Screen name='Quran' component={ Quran } />
         <Stack.Screen name='Dua' component={ Doa } />
         <Stack.Screen name='DuaDetal' component={ DoaDetails } />

components/screens/home/Home.tsx

@@ -1,11 +1,11 @@
 import Slider from '@react-native-community/slider';
-import { useEffect } from 'react'
 import { View, Text, StyleSheet, Pressable, ScrollView } from 'react-native'
 import { useRootStore } from '../../../model/root';
 import { observer } from 'mobx-react-lite';
 import { AZKARSALAT } from '../../../assets/AzkarSalat';
 import RandomZekr from './randomZekr/RandomZekr';
 import {  StatusBar } from 'expo-status-bar';
+import Header from "./header/Header";
 
 const Home = observer(({ navigation }: any) => {
 
@@ -15,23 +15,10 @@ const Home = observer(({ navigation }: any) => {
     root.setFontSize(Math.floor(value))
   }
 
-  useEffect(()=> {
-    navigation.setOptions({
-      title: "Muslim", 
-      headerStyle: styles.header, 
-      headerTitleStyle:{
-        color: '#fff',
-        fontFamily: 'Amiri',
-        fontSize: 24,
-        fontWeight: '200',
-      },
-      headerTintColor: '#0B2239',
-    });
-  }, [ root ])
-
   return (
     <ScrollView contentContainerStyle={{ alignItems: "center", justifyContent: "center", minHeight: "100%" }} style={ styles.container }>
-      <StatusBar style="light" />
+      {/* <StatusBar style="light"  /> */}
+      <Header />
       <Text style={ styles.heading }>بِسْمِ اللَّـهِ الرَّحْمَـٰنِ الرَّحِيمِ</Text>
       <Text style={{ color: "#0B2239" }}>what would you like to see?</Text>
       <View style={ styles.butons }>
@@ -81,7 +68,7 @@ const styles = StyleSheet.create({
     marginVertical: 20,
     minWidth: 150,
     backgroundColor: '#0B2239',
-    borderRadius: 50,
+    borderRadius: 5,
     paddingHorizontal: 20,
     marginHorizontal: 5,
   },

components/screens/home/header/Header.tsx

@@ -0,0 +1,36 @@
+import { View, Text, StyleSheet, Image } from 'react-native'
+
+const Header = () => {
+  return (
+    <View style={ styles.wrapper }>
+      <Text style={ styles.text }>Muslim</Text>
+      <Image style={ styles.icon } source={require('../../../../assets/icon.png')} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        position: 'absolute',
+        top: 5,
+        backgroundColor: '#0B2239',
+        height: 40,
+        borderRadius: 5,
+        width: "98%",
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingHorizontal: 10
+    },
+    icon: {
+        width: 30,
+        height: 30,
+        borderRadius: 50
+    },
+    text: {
+        color: '#fff',
+        fontWeight: 'bold'
+    }
+})
+
+export default Header

components/screens/home/randomZekr/RandomZekr.tsx

@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
         width: 350,
         backgroundColor: '#0B2239',
         marginVertical: 2,
-        borderRadius: 10
+        borderRadius: 5
     },
     text: {
         color: '#fff',