frostbyte-native/App.tsx

75 lines
2 KiB
TypeScript
Raw Permalink Normal View History

2023-12-14 20:21:57 +01:00
import { StatusBar } from "expo-status-bar";
import { style } from "./src/util/style";
2023-12-14 20:21:57 +01:00
import { PostsContainer } from "./src/components/PostsContainer";
2023-12-14 23:51:05 +01:00
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
2023-12-15 01:31:02 +01:00
import { NewPostContainer } from "./src/components/NewPostContainer";
2023-12-15 03:07:15 +01:00
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
2023-12-15 13:39:02 +01:00
/**
* RootStackParamList defines the possible screens in the app.
* @typedef {object} RootStackParamList
* @property {undefined} Home - Home screen.
* @property {undefined} New - New post screen.
*/
2023-12-15 03:07:15 +01:00
type RootStackParamList = {
Home: undefined;
New: undefined;
};
2023-12-15 13:39:02 +01:00
/**
* HomeScreenNavigationProp represents the navigation prop for the Home screen.
* @typedef {object} HomeScreenNavigationProp
* @property {Function} navigate - Function to navigate to a different screen.
*/
2023-12-15 03:07:15 +01:00
export type HomeScreenNavigationProp = NativeStackNavigationProp<
RootStackParamList,
"Home"
2023-12-15 13:39:02 +01:00
>;
2023-12-14 23:51:05 +01:00
const Stack = createNativeStackNavigator();
2023-12-15 13:39:02 +01:00
/**
* App function represents the main application component.
* @returns {JSX.Element} - The rendered App component.
*/
2023-12-14 20:09:12 +01:00
export default function App(): JSX.Element {
2023-12-14 23:51:05 +01:00
return (
2023-12-15 01:31:02 +01:00
<>
2023-12-15 13:39:02 +01:00
{/* Sets the status bar style */}
2023-12-15 01:31:02 +01:00
<StatusBar style="light" />
2023-12-15 13:39:02 +01:00
{/* Navigation container for the app */}
2023-12-15 01:31:02 +01:00
<NavigationContainer>
2023-12-15 13:39:02 +01:00
{/* Stack navigator for different screens */}
2023-12-15 01:31:02 +01:00
<Stack.Navigator>
2023-12-15 13:39:02 +01:00
{/* Home screen */}
2023-12-15 01:31:02 +01:00
<Stack.Screen
name="Home"
2023-12-15 02:08:29 +01:00
component={PostsContainer}
options={options}
/>
2023-12-15 13:39:02 +01:00
{/* New post screen */}
2023-12-15 02:08:29 +01:00
<Stack.Screen
name="New"
options={options}
component={NewPostContainer}
2023-12-15 01:31:02 +01:00
/>
</Stack.Navigator>
</NavigationContainer>
</>
2023-12-14 23:51:05 +01:00
);
}
2023-12-15 13:39:02 +01:00
// Header options for the screens
2023-12-15 02:08:29 +01:00
const options = {
2023-12-15 01:31:02 +01:00
headerStyle: style.header,
headerTitleStyle: style.headerTitle,
headerTintColor: "#fff",
};
2023-12-15 13:39:02 +01:00