58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { StatusBar } from "expo-status-bar";
|
|
import { StyleSheet, View } from "react-native";
|
|
import { BottomNav } from "./src/components/BottomNav";
|
|
import { NotFoundPage } from "./src/pages/NotFound";
|
|
import { DataCardsPage } from "./src/pages/datacards";
|
|
import { ImagePage } from "./src/pages/image";
|
|
import { IndexPage } from "./src/pages/index";
|
|
import { TextPage } from "./src/pages/text";
|
|
import { Route, RouterProvider, useRouter } from "./src/router";
|
|
interface Tab {
|
|
label: string;
|
|
route: Route;
|
|
page: React.ComponentType;
|
|
hideInNav?: boolean;
|
|
}
|
|
const TABS: Tab[] = [
|
|
{ label: "Home", route: "home", page: IndexPage },
|
|
{ label: "Text", route: "text", page: TextPage, hideInNav: true },
|
|
{ label: "Image", route: "image", page: ImagePage, hideInNav: true },
|
|
{ label: "Data Cards", route: "datacards", page: DataCardsPage, hideInNav: true },
|
|
];
|
|
export { TABS, type Tab };
|
|
|
|
function Screen() {
|
|
const { route } = useRouter();
|
|
return (
|
|
<>
|
|
{TABS.map((tab) => {
|
|
if (tab.route === route) {
|
|
const Page = tab.page;
|
|
return <Page key={tab.route} />;
|
|
}
|
|
return null;
|
|
})}
|
|
{!TABS.some((tab) => tab.route === route) && <NotFoundPage />}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<RouterProvider>
|
|
<View style={styles.container}>
|
|
<StatusBar style="auto" />
|
|
<Screen />
|
|
<BottomNav />
|
|
</View>
|
|
</RouterProvider>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#fff",
|
|
},
|
|
});
|