code refactor

app/(auth)/_layout.tsx

@@ -1,7 +1,6 @@
 import { Stack } from 'expo-router'
 
-import Locales from '@/lib/locales'
-import { StackHeader } from '@/lib/ui'
+import { Locales, StackHeader } from '@/lib'
 
 const Layout = () => (
   <Stack

app/(auth)/login.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-native-paper'
 import * as Yup from 'yup'
 
-import { styles } from '@/lib/ui'
+import { styles } from '@/lib'
 
 const Login = () => (
   <Surface style={{ ...styles.screen, alignItems: undefined }}>

app/(auth)/signup.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native-paper'
 import * as Yup from 'yup'
 
-import { styles } from '@/lib/ui'
+import { styles } from '@/lib'
 
 const SignUp = () => (
   <ScrollView style={{ flex: 1 }}>

app/(tabs)/_layout.tsx

@@ -3,8 +3,7 @@ import { Tabs, router } from 'expo-router'
 import React from 'react'
 import { Appbar, Menu, Tooltip } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { TabBar, TabsHeader } from '@/lib/ui'
+import { Locales, TabBar, TabsHeader } from '@/lib'
 
 const TabLayout = () => {
   const [visible, setVisible] = React.useState(false)

app/(tabs)/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { Surface } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { ScreenInfo, styles } from '@/lib/ui'
+import { Locales, ScreenInfo, styles } from '@/lib'
 
 const TabsHome = () => (
   <Surface style={styles.screen}>

app/(tabs)/profile.tsx

@@ -2,8 +2,7 @@ import { router } from 'expo-router'
 import React from 'react'
 import { Button, Surface } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { ScreenInfo, styles } from '@/lib/ui'
+import { Locales, ScreenInfo, styles } from '@/lib'
 
 const Profile = () => (
   <Surface style={styles.screen}>

app/(tabs)/settings.tsx

@@ -11,10 +11,17 @@ import {
   Icon,
 } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { Color, Language, Setting } from '@/lib/types'
-import { Colors, LoadingIndicator, ScreenInfo, styles } from '@/lib/ui'
-import { Languages } from '@/lib/utils'
+import {
+  Color,
+  Colors,
+  Language,
+  Languages,
+  LoadingIndicator,
+  Locales,
+  ScreenInfo,
+  Setting,
+  styles,
+} from '@/lib'
 
 const Settings = () => {
   const colorScheme = useColorScheme()

app/+not-found.tsx

@@ -2,8 +2,7 @@ import { Link, Stack } from 'expo-router'
 import React from 'react'
 import { Surface, Text } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { styles } from '@/lib/ui'
+import { Locales, styles } from '@/lib'
 
 const NotFound = () => (
   <Surface style={styles.screen}>

app/_layout.tsx

@@ -10,13 +10,12 @@ import { useFonts } from 'expo-font'
 import * as Localization from 'expo-localization'
 import { SplashScreen, Stack } from 'expo-router'
 import * as SecureStore from 'expo-secure-store'
+import { StatusBar } from 'expo-status-bar'
 import React from 'react'
 import { Platform, useColorScheme } from 'react-native'
 import { adaptNavigationTheme, PaperProvider } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { Setting } from '@/lib/types'
-import { StackHeader, Themes } from '@/lib/ui'
+import { Locales, Setting, StackHeader, Themes } from '@/lib'
 
 // Catch any errors thrown by the Layout component.
 export { ErrorBoundary } from 'expo-router'
@@ -131,6 +130,8 @@ const RootLayoutNav = () => {
           />
         </Stack>
       </PaperProvider>
+
+      <StatusBar style="auto" />
     </ThemeProvider>
   )
 }

app/drawer/_layout.tsx

@@ -4,8 +4,7 @@ import React from 'react'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { Appbar, Menu, Tooltip, useTheme } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { DrawerContent, DrawerHeader } from '@/lib/ui'
+import { DrawerContent, DrawerHeader, Locales } from '@/lib'
 
 const DrawerLayout = () => {
   const theme = useTheme()

app/drawer/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { Surface } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { ScreenInfo, styles } from '@/lib/ui'
+import { Locales, ScreenInfo, styles } from '@/lib'
 
 const DrawerHome = () => (
   <Surface style={styles.screen}>

app/drawer/profile.tsx

@@ -2,8 +2,7 @@ import { router } from 'expo-router'
 import React from 'react'
 import { Button, Surface } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { ScreenInfo, styles } from '@/lib/ui'
+import { Locales, ScreenInfo, styles } from '@/lib'
 
 const Profile = () => (
   <Surface style={styles.screen}>

app/drawer/settings.tsx

@@ -11,10 +11,17 @@ import {
   Icon,
 } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { Color, Language, Setting } from '@/lib/types'
-import { Colors, LoadingIndicator, ScreenInfo, styles } from '@/lib/ui'
-import { Languages } from '@/lib/utils'
+import {
+  Color,
+  Colors,
+  Language,
+  Languages,
+  LoadingIndicator,
+  Locales,
+  ScreenInfo,
+  Setting,
+  styles,
+} from '@/lib'
 
 const Settings = () => {
   const colorScheme = useColorScheme()

app/modal.tsx

@@ -3,8 +3,7 @@ import React from 'react'
 import { Platform } from 'react-native'
 import { Surface } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { ScreenInfo, styles } from '@/lib/ui'
+import { Locales, ScreenInfo, styles } from '@/lib'
 
 const Modal = () => (
   <Surface style={styles.screen}>

app/search.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { Searchbar, Surface } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import { ScreenInfo, styles } from '@/lib/ui'
+import { Locales, ScreenInfo, styles } from '@/lib'
 
 const Search = () => {
   const [query, setQuery] = React.useState('')

lib/index.ts

@@ -0,0 +1,8 @@
+/**
+ * App lib
+ */
+
+export * from '@/lib/locales'
+export * from '@/lib/types'
+export * from '@/lib/ui'
+export * from '@/lib/utils'

lib/locales/index.ts

@@ -16,4 +16,4 @@ const Locales = new I18n({
 
 Locales.enableFallback = true
 
-export default Locales
+export { Locales }

lib/types/Color.ts

@@ -1,4 +1,4 @@
-import { Colors } from '@/lib/ui'
+import { Colors } from '@/lib'
 
 type Color = keyof typeof Colors.light
 

lib/ui/components/DrawerContent.tsx

@@ -3,7 +3,7 @@ import { router } from 'expo-router'
 import React from 'react'
 import { Drawer, DrawerSectionProps } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
+import { Locales } from '@/lib/locales'
 
 interface DrawerContentProps extends DrawerSectionProps {
   navProps: DrawerContentComponentProps

lib/ui/components/DrawerHeader.tsx

@@ -1,62 +1,71 @@
 import { DrawerHeaderProps as BaseProps } from '@react-navigation/drawer'
 import { getHeaderTitle } from '@react-navigation/elements'
-import { router } from 'expo-router'
 import React from 'react'
 import {
   Appbar,
   AppbarProps,
   IconButton,
   Searchbar,
+  SearchbarProps,
   Tooltip,
 } from 'react-native-paper'
 
 interface DrawerHeaderProps extends AppbarProps {
   navProps: BaseProps
   withSearchBar?: boolean
+  searchBarProps?: SearchbarProps
 }
 
-const DrawerHeader = (props: DrawerHeaderProps) => (
-  <Appbar.Header {...props}>
-    {props.withSearchBar ? (
+const DrawerHeader = (props: DrawerHeaderProps) => {
+  const [query, setQuery] = React.useState('')
+
+  return props.withSearchBar ? (
+    <Appbar.Header {...props}>
       <Searchbar
-        value=""
+        {...props.searchBarProps}
         icon="menu"
-        onPress={() => router.push('/search')}
-        placeholder="Search Al-Quran"
+        value={query}
+        onChangeText={setQuery}
         style={{ margin: 8, marginBottom: 16 }}
         onIconPress={() => props.navProps.navigation.openDrawer()}
-        right={(props) => (
-          <IconButton
-            {...props}
-            icon="cog"
-            onPress={() => router.push('/settings')}
-          />
+        right={(p) => (
+          <Tooltip title="Perform search">
+            <IconButton
+              {...p}
+              icon="book-search"
+              onPress={() =>
+                props.searchBarProps?.onChangeText
+                  ? props.searchBarProps.onChangeText(query)
+                  : undefined
+              }
+            />
+          </Tooltip>
         )}
       />
-    ) : (
-      <>
-        <Tooltip title="Open drawer">
-          <Appbar.Action
-            icon="menu"
-            onPress={() => props.navProps.navigation.openDrawer()}
-          />
-        </Tooltip>
-
-        <Appbar.Content
-          title={getHeaderTitle(
-            props.navProps.options,
-            props.navProps.route.name,
-          )}
+    </Appbar.Header>
+  ) : (
+    <Appbar.Header {...props}>
+      <Tooltip title="Open drawer">
+        <Appbar.Action
+          icon="menu"
+          onPress={() => props.navProps.navigation.openDrawer()}
         />
+      </Tooltip>
+
+      <Appbar.Content
+        title={getHeaderTitle(
+          props.navProps.options,
+          props.navProps.route.name,
+        )}
+      />
 
-        {props.navProps.options.headerRight
-          ? props.navProps.options.headerRight({
-              canGoBack: props.navProps.navigation.canGoBack(),
-            })
-          : undefined}
-      </>
-    )}
-  </Appbar.Header>
-)
+      {props.navProps.options.headerRight
+        ? props.navProps.options.headerRight({
+            canGoBack: props.navProps.navigation.canGoBack(),
+          })
+        : undefined}
+    </Appbar.Header>
+  )
+}
 
 export default DrawerHeader

lib/ui/components/ScreenInfo.tsx

@@ -1,7 +1,8 @@
 import { Chip, Text } from 'react-native-paper'
 
-import Locales from '@/lib/locales'
-import GradientBackground from '@/lib/ui/components/GradientBackground'
+import { Locales } from '@/lib/locales'
+
+import GradientBackground from './GradientBackground'
 
 const ScreenInfo = (props: { title: string; path: string }) => (
   <>