-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
133 lines (117 loc) · 3.19 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import Home from './src/screen/home'
import {NavigationContainer, StackActions,DefaultTheme, DarkTheme,useTheme } from '@react-navigation/native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {createStackNavigator} from '@react-navigation/stack'
import videoPlayer from './src/screen/videoPlayer';
import explore from './src/screen/explore';
import subscribe from './src/screen/subscribe';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import search from './src/screen/search';
//redux import
import {Provider,useSelector} from 'react-redux'
import {createStore,combineReducers} from 'redux'
//importing reducer
import {reducer} from './src/reducer/redux'
import {themeReducer} from './src/reducer/themeReducer'
// adding redux in theme
const rootReducer = combineReducers({
cardData:reducer, //[],
myDarkMode:themeReducer //flase
})
// adding redux
const store = createStore(rootReducer)
const stack=createStackNavigator()
const tabs=createBottomTabNavigator()
// adding dark them
const defaultBlack= {
...DarkTheme,
colors: {
...DarkTheme.colors,
HeaderColor: '#403f3f',
iconColor:"white",
tabColor:"white",
textColor:"white"
},
};
const defaultWhite= {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
HeaderColor: '#f2eeed',
iconColor:"black",
tabColor:"black",
textColor:"black"
},
};
const RootHome=()=>{
const {colors} = useTheme()
return(
<tabs.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({color}) => {
let iconName;
if (route.name === 'Home') {
iconName ="home"
} else if (route.name === 'Explore') {
iconName ="explore"
} else if(route.name === 'Subscribe'){
iconName ="subscriptions"
}
// You can return any component that you like here!
return <MaterialIcons name={iconName} size={25} color={colors.tabColor} />;
},
})}
tabBarOptions={{
activeTintColor: 'red',
inactiveTintColor: 'white',
}}
>
<tabs.Screen name="Home" component={Home} />
<tabs.Screen name="Explore" component={explore}/>
<tabs.Screen name="Subscribe" component={subscribe}/>
</tabs.Navigator>
)
}
export default App = ()=>{
return(
<Provider store={store}>
<Navigation />
</Provider>
)
}
export function Navigation () {
let CurrentTheme = useSelector(state=>{
return state.myDarkMode
})
return (
<>
{/* <StatusBar barStyle="dark-content" /> */}
<Provider store={store}>
<NavigationContainer theme={CurrentTheme ? defaultBlack : defaultWhite}>
<stack.Navigator headerMode="none">
<stack.Screen name="RootHome" component={RootHome}/>
<stack.Screen name="search" component={search}/>
<stack.Screen name="VideoPlay" component={videoPlayer}/>
</stack.Navigator>
</NavigationContainer>
</Provider>
</>
);
};
//export default App;