News-Keeda/App.js at main · Soham2020/News-Keeda · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator } from '@react-navigation/stack';
import Bitcoin from './Screens/Bitcoin';
import Business from './Screens/Business';
import Tech from './Screens/Tech';
import Trending from './Screens/Trending';


const Stack = createStackNavigator();

function TrendingStack () {
  return(
    <Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
      <Stack.Screen name="Trending News" component={Trending} />
    </Stack.Navigator>
  )
}

function BitcoinStack () {
  return(
    <Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
      <Stack.Screen name="Bitcoin News" component={Bitcoin} />
    </Stack.Navigator>
  )
}

function BusinessStack () {
  return(
    <Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
      <Stack.Screen name="Business News" component={Business} />
    </Stack.Navigator>
  )
}

function TechStack () {
  return(
    <Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
      <Stack.Screen name="Tech News" component={Tech} />
    </Stack.Navigator>
  )
}

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return(
    <Tab.Navigator
      initialRouteName="Space"
      activeColor="black"
      inactiveColor="#f5fffa"
      labelStyle={{ fontSize: 15 }}
      barStyle={{ backgroundColor: 'skyblue' }}
    >
      <Tab.Screen
        name="Trending"
        component={TrendingStack}
        options={{
          tabBarLabel: 'Space',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="fire" color={ color } size={26} />
          ),
        }}
      />

      {/* <Tab.Screen
        name="Business"
        component={BusinessStack}
        options={{
          tabBarLabel: 'Business',
          tabBarIcon: ({ color }) => (
            <Ionicons name="ios-business" size={26} color={ color } />
          ),
        }}
      />

      <Tab.Screen
        name="Bitcoin"
        component={BitcoinStack}
        options={{
          tabBarLabel: 'Bitcoin',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="bitcoin" color={ color } size={26} />
          ),
        }}
      /> */}

      <Tab.Screen
        name="Tech"
        component={TechStack}
        options={{
          tabBarLabel: 'Tech',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="laptop-mac" color={ color } size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App () {
  return(
    <>
      <NavigationContainer>
        <MyTabs />
      </NavigationContainer>
      <StatusBar style='auto' />
    </>
  )
}