diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx index f038d7f..3aa28e9 100644 --- a/app/(auth)/_layout.tsx +++ b/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 = () => ( ( diff --git a/app/(auth)/signup.tsx b/app/(auth)/signup.tsx index a6a7f66..5691a49 100644 --- a/app/(auth)/signup.tsx +++ b/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 = () => ( diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 760dd58..e3672e5 100644 --- a/app/(tabs)/_layout.tsx +++ b/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) diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 74042d9..8a70d4c 100644 --- a/app/(tabs)/index.tsx +++ b/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 = () => ( diff --git a/app/(tabs)/profile.tsx b/app/(tabs)/profile.tsx index bf89a9d..87e92e7 100644 --- a/app/(tabs)/profile.tsx +++ b/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 = () => ( diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx index 9acfd02..aebce2b 100644 --- a/app/(tabs)/settings.tsx +++ b/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() diff --git a/app/+not-found.tsx b/app/+not-found.tsx index 7f8eac0..20e1a14 100644 --- a/app/+not-found.tsx +++ b/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 = () => ( diff --git a/app/_layout.tsx b/app/_layout.tsx index ee8116f..c175298 100644 --- a/app/_layout.tsx +++ b/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 = () => { /> + + ) } diff --git a/app/drawer/_layout.tsx b/app/drawer/_layout.tsx index 85ee08f..c543989 100644 --- a/app/drawer/_layout.tsx +++ b/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() diff --git a/app/drawer/index.tsx b/app/drawer/index.tsx index eb5ef99..d086142 100644 --- a/app/drawer/index.tsx +++ b/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 = () => ( diff --git a/app/drawer/profile.tsx b/app/drawer/profile.tsx index bf89a9d..87e92e7 100644 --- a/app/drawer/profile.tsx +++ b/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 = () => ( diff --git a/app/drawer/settings.tsx b/app/drawer/settings.tsx index 9acfd02..aebce2b 100644 --- a/app/drawer/settings.tsx +++ b/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() diff --git a/app/modal.tsx b/app/modal.tsx index ac7ef77..241caa2 100644 --- a/app/modal.tsx +++ b/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 = () => ( diff --git a/app/search.tsx b/app/search.tsx index aa337dc..a65d9f4 100644 --- a/app/search.tsx +++ b/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('') diff --git a/lib/index.ts b/lib/index.ts new file mode 100644 index 0000000..0c90e1b --- /dev/null +++ b/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' diff --git a/lib/locales/index.ts b/lib/locales/index.ts index 8387869..3045130 100644 --- a/lib/locales/index.ts +++ b/lib/locales/index.ts @@ -16,4 +16,4 @@ const Locales = new I18n({ Locales.enableFallback = true -export default Locales +export { Locales } diff --git a/lib/types/Color.ts b/lib/types/Color.ts index c58d2be..94f5274 100644 --- a/lib/types/Color.ts +++ b/lib/types/Color.ts @@ -1,4 +1,4 @@ -import { Colors } from '@/lib/ui' +import { Colors } from '@/lib' type Color = keyof typeof Colors.light diff --git a/lib/ui/components/DrawerContent.tsx b/lib/ui/components/DrawerContent.tsx index ca95b6d..bbaf4ff 100644 --- a/lib/ui/components/DrawerContent.tsx +++ b/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 diff --git a/lib/ui/components/DrawerHeader.tsx b/lib/ui/components/DrawerHeader.tsx index 9e9aa59..d2404b2 100644 --- a/lib/ui/components/DrawerHeader.tsx +++ b/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) => ( - - {props.withSearchBar ? ( +const DrawerHeader = (props: DrawerHeaderProps) => { + const [query, setQuery] = React.useState('') + + return props.withSearchBar ? ( + router.push('/search')} - placeholder="Search Al-Quran" + value={query} + onChangeText={setQuery} style={{ margin: 8, marginBottom: 16 }} onIconPress={() => props.navProps.navigation.openDrawer()} - right={(props) => ( - router.push('/settings')} - /> + right={(p) => ( + + + props.searchBarProps?.onChangeText + ? props.searchBarProps.onChangeText(query) + : undefined + } + /> + )} /> - ) : ( - <> - - props.navProps.navigation.openDrawer()} - /> - - - + ) : ( + + + props.navProps.navigation.openDrawer()} /> + + + - {props.navProps.options.headerRight - ? props.navProps.options.headerRight({ - canGoBack: props.navProps.navigation.canGoBack(), - }) - : undefined} - - )} - -) + {props.navProps.options.headerRight + ? props.navProps.options.headerRight({ + canGoBack: props.navProps.navigation.canGoBack(), + }) + : undefined} + + ) +} export default DrawerHeader diff --git a/lib/ui/components/ScreenInfo.tsx b/lib/ui/components/ScreenInfo.tsx index f8690c8..542e1a7 100644 --- a/lib/ui/components/ScreenInfo.tsx +++ b/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 }) => ( <> diff --git a/lib/ui/components/StackHeader.tsx b/lib/ui/components/StackHeader.tsx index 7f4b2c5..4b3223c 100644 --- a/lib/ui/components/StackHeader.tsx +++ b/lib/ui/components/StackHeader.tsx @@ -1,55 +1,71 @@ import { getHeaderTitle } from '@react-navigation/elements' import { NativeStackHeaderProps } from '@react-navigation/native-stack' -import { router } from 'expo-router' import React from 'react' -import { Appbar, AppbarProps, Searchbar } from 'react-native-paper' +import { + Appbar, + AppbarProps, + IconButton, + Searchbar, + SearchbarProps, +} from 'react-native-paper' interface StackHeaderProps extends AppbarProps { navProps: NativeStackHeaderProps withSearchbar?: boolean + searchBarProps?: SearchbarProps } -const StackHeader = (props: StackHeaderProps) => ( - - {props.withSearchbar ? ( +const StackHeader = (props: StackHeaderProps) => { + const [query, setQuery] = React.useState('') + + return props.withSearchbar ? ( + router.push('/search')} - placeholder={ - 'Search ' + - getHeaderTitle(props.navProps.options, props.navProps.route.name) - } + value={query} + onChangeText={setQuery} style={{ margin: 8, marginBottom: 16 }} onIconPress={() => props.navProps.navigation.goBack()} + right={(p) => ( + + props.searchBarProps?.onChangeText + ? props.searchBarProps.onChangeText(query) + : undefined + } + /> + )} /> - ) : ( - <> - {props.navProps.options.headerLeft - ? props.navProps.options.headerLeft({ - canGoBack: props.navProps.navigation.canGoBack(), - }) - : undefined} + + ) : ( + + {props.navProps.options.headerLeft + ? props.navProps.options.headerLeft({ + canGoBack: props.navProps.navigation.canGoBack(), + }) + : undefined} - {props.navProps.back ? ( - - ) : null} + {props.navProps.back ? ( + + ) : null} - + - {props.navProps.options.headerRight - ? props.navProps.options.headerRight({ - canGoBack: props.navProps.navigation.canGoBack(), - }) - : undefined} - - )} - -) + {props.navProps.options.headerRight + ? props.navProps.options.headerRight({ + canGoBack: props.navProps.navigation.canGoBack(), + }) + : undefined} + + ) +} export default StackHeader diff --git a/lib/ui/components/TabsHeader.tsx b/lib/ui/components/TabsHeader.tsx index d197f17..3c1507c 100644 --- a/lib/ui/components/TabsHeader.tsx +++ b/lib/ui/components/TabsHeader.tsx @@ -1,28 +1,66 @@ import { BottomTabHeaderProps } from '@react-navigation/bottom-tabs' import { getHeaderTitle } from '@react-navigation/elements' import React from 'react' -import { Appbar, AppbarProps } from 'react-native-paper' +import { + Appbar, + AppbarProps, + IconButton, + Searchbar, + SearchbarProps, + Tooltip, +} from 'react-native-paper' interface TabsHeaderProps extends AppbarProps { navProps: BottomTabHeaderProps + withSearchBar?: boolean + searchBarProps?: SearchbarProps } -const TabsHeader = (props: TabsHeaderProps) => ( - - {props.navProps.options.headerLeft - ? props.navProps.options.headerLeft({}) - : undefined} +const TabsHeader = (props: TabsHeaderProps) => { + const [query, setQuery] = React.useState('') - + return props.withSearchBar ? ( + + ( + + + props.searchBarProps?.onChangeText + ? props.searchBarProps.onChangeText(query) + : undefined + } + /> + + )} + /> + + ) : ( + + {props.navProps.options.headerLeft + ? props.navProps.options.headerLeft({}) + : undefined} - {props.navProps.options.headerRight - ? props.navProps.options.headerRight({ - canGoBack: props.navProps.navigation.canGoBack(), - }) - : undefined} - -) + + + {props.navProps.options.headerRight + ? props.navProps.options.headerRight({ + canGoBack: props.navProps.navigation.canGoBack(), + }) + : undefined} + + ) +} export default TabsHeader