-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
115 lines (105 loc) · 3.43 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
113
114
115
import React from 'react';
import {
Button,
DefaultTheme,
Provider as PaperProvider,
} from 'react-native-paper';
import Icon from 'react-native-vector-icons/FontAwesome';
import {NavigationContainer, DrawerActions} from '@react-navigation/native';
import {createStackNavigator, useHeaderHeight} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import ReduxThunk from 'redux-thunk';
import {Provider} from 'react-redux';
import colors from './constants/colors';
import BlogsListScreen from './screens/BlogsListScreen';
import BlogScreen from './screens/BlogScreen';
import CreateBlogScreen from './screens/CreateBlogScreen';
import FavoritesScreen from './screens/FavoritesScreen';
import blogReducer from './store/reducers/blogReducer';
import {StatusBar} from 'react-native';
const rootReducer = combineReducers({
blogs: blogReducer,
});
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: colors.MetallicSeaweed,
accent: colors.MidBlueGreen,
},
};
const store = createStore(rootReducer, applyMiddleware(ReduxThunk));
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
// nested drawer navigator config
function DrawerOverview({navigation}) {
const headerHeight = useHeaderHeight();
return (
<Drawer.Navigator
initialRouteName="Blogs"
drawerStyle={{
paddingTop: headerHeight,
}}
drawerContentOptions={{
activeTintColor: colors.MetallicSeaweed,
activeBackgroundColor: colors.BeauBlue,
}}>
<Drawer.Screen name="Blogs" component={BlogsListScreen} />
<Drawer.Screen
name="Favorites"
component={FavoritesScreen}
options={{title: 'My Favorites'}}
/>
</Drawer.Navigator>
);
}
const App = () => {
return (
<>
<PaperProvider theme={theme}>
<Provider store={store}>
<StatusBar
backgroundColor={colors.MetallicSeaweed}
barStyle="light-content"
/>
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerTransparent: true,
headerTintColor: colors.MetallicSeaweed,
headerTitleAlign: 'center',
}}>
<Stack.Screen
name="Home"
component={DrawerOverview}
options={({navigation}) => ({
headerLeft: () => (
<Button
color={colors.MetallicSeaweed}
onPress={() =>
navigation.dispatch(DrawerActions.toggleDrawer())
}>
<Icon name="bars" size={20} />
</Button>
),
headerRight: () => (
<Button
color={colors.MetallicSeaweed}
onPress={() => navigation.navigate('Create')}>
<Icon name="pencil-square-o" size={20} />
</Button>
),
})}
/>
<Stack.Screen name="Blog" component={BlogScreen} />
<Stack.Screen name="Create" component={CreateBlogScreen} />
</Stack.Navigator>
</NavigationContainer>
</Provider>
</PaperProvider>
</>
);
};
export default App;