soberhofer
/
GiftGenie
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Navigator.js and move Tab navigation there

This commit is contained in:
Samuel Oberhofer 2022-12-10 11:30:07 +01:00
parent 6d2ac8ac6b
commit abffee27c7
2 changed files with 62 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
App.js
View File

@ -1,58 +1,7 @@
import { StyleSheet, Text, View } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import Icon from "react-native-vector-icons/Ionicons";
import MainScreen from "./screens/MainScreen";
import Navigator from "./navigation/Navigator";
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#A587DD",
},
}}
>
<Tab.Screen
name="Home"
component={MainScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="md-person-circle-outline" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Gift"
component={MainScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="gift-outline" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Budget"
component={MainScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="logo-usd" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Calendar"
component={MainScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="calendar-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
return <Navigator />;
}

60
navigation/Navigator.js Normal file
View File

@ -0,0 +1,60 @@
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import Icon from "react-native-vector-icons/Ionicons";
import MainScreen from "../screens/MainScreen";
const Tab = createBottomTabNavigator();
function Navigator() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#A587DD",
},
}}
>
<Tab.Screen
name="Home"
component={MainScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="md-person-circle-outline" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Gift"
component={MainScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="gift-outline" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Budget"
component={MainScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="logo-usd" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Calendar"
component={MainScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="calendar-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
export default Navigator;