railbird/railbird-gql
10
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Actually respect prettier configuration

Browse Source
This commit is contained in:
Ivan Malison
2024-02-03 20:23:31 -07:00
parent a6883a624a
commit 2276605e6d
37 changed files with 1629 additions and 1497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
navigation/app-navigator.tsx
View File

@@ -1,26 +1,30 @@
import { useColorScheme } from 'react-native';
import { NavigationContainer, DarkTheme, DefaultTheme } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { useColorScheme } from "react-native";
import {
NavigationContainer,
DarkTheme,
DefaultTheme,
} from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Tabs from './tab-navigator';
import Login from '../screens/login';
import Tabs from "./tab-navigator";
import Login from "../screens/login";
const Stack = createNativeStackNavigator()
const Stack = createNativeStackNavigator();
const ScreensStack = () => (
<Stack.Navigator>
<Stack.Screen
name="Tabs"
component={Tabs}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Login"
component={Login}
options={{ headerShown: false }}
/>
</Stack.Navigator>
)
<Stack.Navigator>
<Stack.Screen
name="Tabs"
component={Tabs}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Login"
component={Login}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
/**
* Functional component for app navigation. Configures a navigation container with a stack navigator.
* Dynamically selects between dark and light themes based on the device's color scheme.
@@ -29,15 +33,14 @@ const ScreensStack = () => (
* @returns {React.ComponentType} A NavigationContainer wrapping a Stack.Navigator for app screens.
*/
export default function AppNavigator(): React.JSX.Element {
// useColorScheme get's the theme from device settings
const scheme = useColorScheme();
// useColorScheme get's the theme from device settings
const scheme = useColorScheme();
return (
<NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="App" component={ScreensStack} />
</Stack.Navigator>
</NavigationContainer>
)
}
return (
<NavigationContainer theme={scheme === "dark" ? DarkTheme : DefaultTheme}>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="App" component={ScreensStack} />
</Stack.Navigator>
</NavigationContainer>
);
}

78
navigation/tab-navigator.tsx
View File

@@ -1,39 +1,33 @@
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Image } from 'react-native';
import CameraScreen from '../component/video/camera';
import Session from '../screens/session';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import RecordScreen from '../screens/video-stack/record';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Image } from "react-native";
import CameraScreen from "../component/video/camera";
import Session from "../screens/session";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import RecordScreen from "../screens/video-stack/record";
// TODO: add ts support for assets folder to use imports
const Icon = require('../assets/favicon.png')
const Icon = require("../assets/favicon.png");
const Tab = createBottomTabNavigator();
const RecordStack = createNativeStackNavigator();
// tabBarIcon configuration should live on separate file and contain all logic/icons/rendering for the Tabs
const tabIcons = {
'Session': <Image source={Icon} style={{ width: 20, height: 20 }} />,
'VideoStack': <Image source={Icon} style={{ width: 20, height: 20 }} />,
Session: <Image source={Icon} style={{ width: 20, height: 20 }} />,
VideoStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
};
function VideoTabStack() {
return (
<RecordStack.Navigator screenOptions={{ headerShown: false }}>
<RecordStack.Screen
name="Record"
component={RecordScreen}
/>
<RecordStack.Screen
name="Camera"
component={CameraScreen}
/>
</RecordStack.Navigator>
);
return (
<RecordStack.Navigator screenOptions={{ headerShown: false }}>
<RecordStack.Screen name="Record" component={RecordScreen} />
<RecordStack.Screen name="Camera" component={CameraScreen} />
</RecordStack.Navigator>
);
}
/**
* Functional component creating a tab navigator with called
* Functional component creating a tab navigator with called
* Uses React Navigation's Tab.Navigator. Customizes tab bar appearance and icons.
* Import screens and call them on component of Tab.Screen.
*
@@ -41,19 +35,27 @@ function VideoTabStack() {
*/
export default function Tabs(): React.JSX.Element {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarActiveTintColor: 'tomato',
tabBarInactiveTintColor: 'gray',
tabBarIcon: () => {
return tabIcons[route.name];
}
})}
>
<Tab.Screen name="Session" component={Session} options={{ tabBarLabel: 'Session' }} />
<Tab.Screen name="VideoStack" component={VideoTabStack} options={{ tabBarLabel: 'Record' }} />
</Tab.Navigator>
);
}
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarActiveTintColor: "tomato",
tabBarInactiveTintColor: "gray",
tabBarIcon: () => {
return tabIcons[route.name];
},
})}
>
<Tab.Screen
name="Session"
component={Session}
options={{ tabBarLabel: "Session" }}
/>
<Tab.Screen
name="VideoStack"
component={VideoTabStack}
options={{ tabBarLabel: "Record" }}
/>
</Tab.Navigator>
);
}