-
Notifications
You must be signed in to change notification settings - Fork 4
/
App.js
104 lines (101 loc) · 3.02 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
//This is an example code for Bottom Navigation//
import React from 'react';
import { Button, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used
import Ionicons from 'react-native-vector-icons/Ionicons';
//import Ionicons to show the icon for bottom options
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';
import HomeScreen from './pages/HomeScreen';
import SettingsScreen from './pages/SettingsScreen';
import DetailsScreen from './pages/DetailsScreen';
import ProfileScreen from './pages/ProfileScreen';
import RecordScreen from './pages/RecordScreen';
import TrendScreen from './pages/TrendScreen';
const HomeStack = createStackNavigator(
{
//Defination of Navigaton from home screen
Home: { screen: HomeScreen },
// Record: { screen: RecordScreen },
// Details: { screen: DetailsScreen },
},
{
defaultNavigationOptions: {
//Header customization of the perticular Screen
headerStyle: {
backgroundColor: '#13103F',
},
headerTintColor: '#FFFFFF',
title: 'Home',
//Header title
},
}
);
const SettingsStack = createStackNavigator(
{
//Defination of Navigaton from setting screen
Settings: { screen: SettingsScreen },
Details: { screen: DetailsScreen },
Profile: { screen: ProfileScreen },
},
{
defaultNavigationOptions: {
//Header customization of the perticular Screen
headerStyle: {
backgroundColor: '#13103F',
},
headerTintColor: '#FFFFFF',
title: 'Settings',
//Header title
},
}
);
const TrendssStack = createStackNavigator(
{
//Defination of Navigaton from setting screen
Trends: { screen: TrendScreen },
},
{
defaultNavigationOptions: {
//Header customization of the perticular Screen
headerStyle: {
backgroundColor: '#13103F',
},
headerTintColor: '#FFFFFF',
title: 'Trends',
//Header title
},
}
);
const App = createBottomTabNavigator(
{
Home: { screen: HomeStack },
Record: { screen: RecordScreen },
Trends: { screen: TrendssStack },
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = `ios-home`;
} else if (routeName === 'Record') {
iconName = `ios-mic`;
} else if (routeName === 'Settings') {
iconName = `ios-checkmark-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Trends') {
iconName = `ios-stats`;
}
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#13103F',
inactiveTintColor: 'gray',
},
}
);
export default createAppContainer(App);