-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
112 lines (106 loc) · 3.5 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
105
106
107
108
109
110
111
112
import React, {Component, useEffect, useState, useCallback} from 'react';
import {Linking, AppRegistry, Dimensions, StatusBar} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
import * as COLORS from './src/constants/colors';
import HomeScreen from './src/pages/HomeScreen';
import BlabbedScreen from './src/pages/BlabbedScreen';
import ShareScreen from './src/pages/ShareScreen';
import LoginScreen from './src/pages/LoginScreen';
import ViewScreen from './src/pages/ViewScreen';
import BlabScreen from './src/pages/BlabScreen';
import ProfileScreen from './src/pages/ProfileScreen';
import WelcomeScreen from './src/pages/WelcomeScreen';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const {width, height} = Dimensions.get('window');
const HomeStackScreen = ({navigation}) => {
return (
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
options={{title: 'Blab for IG', headerShown: false}}
initialParams={{load: true}}
/>
</Stack.Navigator>
);
};
const MainScreen = ({navigation}) => {
return (
<Tab.Navigator
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
let iconName;
if (route.name === 'Home') {
iconName = 'home-sharp';
} else if (route.name === 'Posts') {
iconName = 'grid';
} else if (route.name === 'Account') {
iconName = 'person-sharp';
}
return <Icon name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: COLORS.PRIMARY_COLOR,
inactiveTintColor: 'gray',
keyboardHidesTabBar: true,
showLabel: false,
style: {
backgroundColor: 'rgba(30, 30, 30, 1)',
height: height / 12,
borderTopWidth: 0,
},
}}>
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Posts" component={BlabbedScreen} />
<Tab.Screen name="Account" component={ProfileScreen} />
</Tab.Navigator>
);
};
const App: () => React$Node = ({navigation}) => {
return (
<NavigationContainer>
<StatusBar barStyle="light-content" backgroundColor={COLORS.GRAY_15} />
<Stack.Navigator initialRouteName="MainScreen">
<Stack.Screen
name="MainScreen"
component={MainScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name="WelcomeScreen"
component={WelcomeScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name="ViewScreen"
component={ViewScreen}
options={{title: 'Blab for IG'}}
/>
<Stack.Screen
name="ShareScreen"
component={ShareScreen}
options={{
title: 'Share',
}}
/>
<Stack.Screen
name="LoginScreen"
component={LoginScreen}
options={{title: 'Instagram', headerShown: false}}
/>
<Stack.Screen
name="BlabScreen"
component={BlabScreen}
options={{title: 'Blab for IG'}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
AppRegistry.registerComponent('App', () => App);