BlogApp/App.js at main · alihaxan020/BlogApp · GitHub

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
import React from 'react';
import {StyleSheet, Button, TouchableOpacity} from 'react-native';
import Feather from 'react-native-vector-icons/Feather';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import IndexScreen from './src/screens/IndexScreen';
import ShowScreen from './src/screens/ShowScreen';
import CreateScreen from './src/screens/CreateScreen';
import EditScreen from './src/screens/EditScreen';
import {Provider} from './src/context/BlogContext';

const Stack = createNativeStackNavigator();
const App = () => {
  return (
    <Provider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="IndexScreen">
          <Stack.Screen
            name="IndexScreen"
            component={IndexScreen}
            options={({navigation}) => ({
              title: 'Blogs List',
              headerTitleAlign: 'center',
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 25,
              },
              headerStyle: {backgroundColor: '#fccabe'},
              headerRight: () => (
                <TouchableOpacity
                  onPress={() => navigation.navigate('CreateScreen')}>
                  <Feather name="plus" size={30} />
                </TouchableOpacity>
              ),
            })}
          />
          <Stack.Screen
            name="ShowScreen"
            component={ShowScreen}
            options={({navigation, route}) => ({
              title: 'Show Blog',
              headerStyle: {backgroundColor: '#C8EDE8'},
              headerRight: () => (
                <TouchableOpacity
                  onPress={() =>
                    navigation.navigate('EditScreen', {id: route.params.id})
                  }>
                  <FontAwesome name="pencil-square-o" size={30} color="green" />
                </TouchableOpacity>
              ),
              headerTitleAlign: 'center',
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 25,
              },
            })}
          />

          <Stack.Screen
            name="CreateScreen"
            component={CreateScreen}
            options={{
              title: 'Create Blog',
              headerTitleAlign: 'center',
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 25,
              },
              headerStyle: {
                backgroundColor: '#7EF482',
              },
            }}
          />
          <Stack.Screen
            name="EditScreen"
            component={EditScreen}
            options={{
              title: 'Edit Blog',
              headerStyle: {
                backgroundColor: '#F5D6D7',
              },
              headerTitleAlign: 'center',
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 25,
              },
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
};
export default App;

const styles = StyleSheet.create({});