Hồng Phúc

54 bundles
1 file4 months ago
1

import React, { useEffect } from 'react';

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
import React, { useEffect } from 'react'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { AppearanceProvider, useColorScheme } from 'react-native-appearance'; import FontAweSome from 'react-native-vector-icons/FontAwesome'; import { createDrawerNavigator, DrawerContentComponentProps, DrawerContentOptions, DrawerContentScrollView, } from '@react-navigation/drawer'; import { Dimensions, ImageBackground, StyleSheet, View, Text, Image, TouchableOpacity, Button } from 'react-native'; import Animated from 'react-native-reanimated'; // import { Button } from 'expo-ui-kit'; // Theme // import {DefaultTheme, DarkTheme} from '../Themes'; import images from '../Themes/Images'; // Screens import SplashScreen from '../Containers/SplashScreen'; import { SignInScreen } from '../Containers/SignInScreen'; import ForgotPasswordScreen from '../Containers/ForgotPasswordScreen'; import { NewsFeedScreen } from '../Containers/NewsFeedScreen'; import { TernPolicyScreen } from '../Containers/TernPolicyScreen'; import NotificationScreen from '../Containers/NotificationScreen'; import ResultPageScreen from '../Containers/ResultPageScreen/ResultPageScreen'; import { setAppNavigator } from './AppNavigator'; import ChangePasswordScreen from '../Containers/ProfileScreen/ChangePasswordScreen'; import CreateExamScreen from '../Containers/CreateExamScreen'; import EditScreen from '../Containers/ProfileScreen/EditScreen'; import MainScreen from '../Containers/ProfileScreen/MainScreen'; import HomeScreen from '../Containers/HomeScreen/HomeScreen'; import { Colors } from '../Themes'; import { TestScreen } from '../Containers/TestScreen'; export type ProfileParams = { MainScreen: object; EditScreen: object; ChangePasswordScreen: object; }; const ProfileStack = createStackNavigator<ProfileParams>(); const ProfileStacks = ({ navigation }: { navigation: any }) => { return ( <ImageBackground resizeMode="stretch" source={images.page_background} style={{ flex: 1, width: Dimensions.get('window').width, height: Dimensions.get('window').height, }} > <ProfileStack.Navigator initialRouteName="MainScreen" headerMode="none" screenOptions={{ cardStyle: { backgroundColor: 'transparent' }, headerTransparent: true, }} > <ProfileStack.Screen name="MainScreen" component={MainScreen} /> <ProfileStack.Screen name="EditScreen" component={EditScreen} /> <ProfileStack.Screen name="ChangePasswordScreen" component={ChangePasswordScreen} /> </ProfileStack.Navigator> </ImageBackground> ); }; // createHomeTabNavigation export type HomeTabParams = { TestScreen: undefined; NewsFeedScreen: undefined; ProfileStack: undefined; CreateExamScreen: undefined; HomeScreen: undefined; }; const Tab = createBottomTabNavigator<HomeTabParams>(); function HomeTabs() { return ( <Tab.Navigator > <Tab.Screen name={'CreateExamScreen'} component={CreateExamScreen} /> <Tab.Screen name={'ProfileStack'} component={ProfileStacks} /> <Tab.Screen name={'HomeScreen'} component={HomeScreen} /> <Tab.Screen name={'NewsFeedScreen'} component={NewsFeedScreen} /> </Tab.Navigator> ); } // createAuthStackNavigation export type AuthStackParams = { StartUpScreen: undefined; SignUpScreen: undefined; SignInScreen: undefined; ForgotPasswordScreen: undefined; }; const AuthStack = createStackNavigator<AuthStackParams>(); function AuthStacks({ navigation }: { navigation: any }) { return ( <ImageBackground resizeMode="stretch" source={images.auth_background} style={{ flex: 1, width: Dimensions.get('window').width, height: Dimensions.get('window').height, }} > <AuthStack.Navigator initialRouteName={'SignInScreen'} headerMode={'none'} screenOptions={{ gestureEnabled: false, cardStyle: { backgroundColor: 'transparent' }, }} > <AuthStack.Screen name={'SignInScreen'} component={SignInScreen} /> <AuthStack.Screen name={'ForgotPasswordScreen'} component={ForgotPasswordScreen} /> </AuthStack.Navigator> </ImageBackground> ); } // We gather all the app's screens here export type AppStackParams = { HomeTab: undefined; }; const AppStack = createStackNavigator<AppStackParams>(); type AppStacksProps = { style?: { borderRadius: Animated.Node<number>; transform: { scale: Animated.Node<number>; }[]; }; }; function AppStacks({ style }: AppStacksProps) { return ( <Animated.View style={StyleSheet.flatten([styles.stack, style])}> <AppStack.Navigator initialRouteName={'HomeTab'} headerMode={'none'}> <AppStack.Screen name={'HomeTab'} component={HomeTabs} /> </AppStack.Navigator> </Animated.View> ); } type DrawerContentProps = DrawerContentComponentProps<DrawerContentOptions>; function DrawerContent(props: DrawerContentProps) { const routeIndex = props.state.index; const isActiveStyle = (routeIndex: number, index: number) => { return routeIndex === index ? { focusedViewStyle: styles.focusMenuItem, focusedLabelStyle: styles.focusedMenuLabel } : {}; }; return ( <DrawerContentScrollView {...props} scrollEnabled={false} contentContainerStyle={{ flex: 1 }}> <View style={styles.drawerContent}> <View style={styles.profile}> <Image style={styles.profileImage} source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} /> <Text style={styles.profileName}>{'Liên Hoa'}</Text> </View> <View style={styles.dividerContainer}> <View style={styles.divider} /> </View> <View> <TouchableOpacity style={[styles.menuItem, isActiveStyle(routeIndex, 0).focusedViewStyle]} onPress={() => { props.navigation.navigate('AppStacks'); }} > <FontAweSome name="user" size={24} color={routeIndex === 0 ? 'white' : 'black'} /> <Text style={[styles.menuLabel, isActiveStyle(routeIndex, 0).focusedLabelStyle]}> {'Hồ sơ cá nhân'} </Text> </TouchableOpacity> <TouchableOpacity style={[styles.menuItem, isActiveStyle(routeIndex, 1).focusedViewStyle]} onPress={() => { props.navigation.navigate('Test'); }} > <FontAweSome name="user" size={24} color={routeIndex === 1 ? 'white' : 'black'} /> <Text style={[styles.menuLabel, isActiveStyle(routeIndex, 1).focusedLabelStyle]}> {'Lịch sử làm bài'} </Text> </TouchableOpacity> <TouchableOpacity style={[styles.menuItem, isActiveStyle(routeIndex, 2).focusedViewStyle]} onPress={() => { props.navigation.navigate('NewsFeedScreen'); }} > <FontAweSome name="user" size={24} color={routeIndex === 2 ? 'white' : 'black'} /> <Text style={[styles.menuLabel, isActiveStyle(routeIndex, 2).focusedLabelStyle]}> {'Thay đổi ngôn ngữ'} </Text> </TouchableOpacity> <TouchableOpacity style={[styles.menuItem, isActiveStyle(routeIndex, 1).focusedViewStyle]} onPress={() => { props.navigation.navigate(''); }} > <FontAweSome name="user" size={24} color={routeIndex === 1 ? 'white' : 'black'} /> <Text style={[styles.menuLabel, isActiveStyle(routeIndex, 1).focusedLabelStyle]}> {'Điều khoản quy định'} </Text> </TouchableOpacity> <View style={styles.dividerContainer}> <View style={styles.divider} /> </View> <TouchableOpacity style={[styles.menuItem, isActiveStyle(routeIndex, 1).focusedViewStyle]} onPress={() => { props.navigation.navigate(''); }} > <FontAweSome name="user" size={24} color={routeIndex === 1 ? 'white' : 'black'} /> <Text style={[styles.menuLabel, isActiveStyle(routeIndex, 1).focusedLabelStyle]}> {'Đăng xuất'} </Text> </TouchableOpacity> </View> </View> </DrawerContentScrollView> ); } const DrawerStacks = createDrawerNavigator(); function DrawerAppStacks() { const [progress, setProgress] = React.useState<Animated.Node<number>>(new Animated.Value(0)); const scale = Animated.interpolate(progress, { inputRange: [0, 1], outputRange: [1, 0.8], }); const borderRadius = Animated.interpolate(progress, { inputRange: [0, 1], outputRange: [0, 16], }); const animatedStyle = { borderRadius, transform: [{ scale }] }; return ( <DrawerStacks.Navigator drawerType="slide" overlayColor="transparent" drawerStyle={styles.drawerStyles} drawerContent={(props) => { // eslint-disable-next-line react/prop-types setProgress(props.progress); return <DrawerContent {...props} />; }} > <DrawerStacks.Screen name="AppStacks"> {(props) => <AppStacks {...props} style={animatedStyle} />} </DrawerStacks.Screen> <DrawerStacks.Screen name="Test" component={TestScreen} /> <DrawerStacks.Screen name="NewsFeedScreen" component={NewsFeedScreen} /> </DrawerStacks.Navigator> ); } export type RootStackParams = { SplashScreen: undefined; AuthStack: undefined; AppStack: undefined; TernPolicyScreen: undefined; NotificationScreen: undefined; ResultPageScreen: undefined; DrawerAppStack: string; }; const Stack = createStackNavigator<RootStackParams>(); const AppNavigation = () => { const scheme = useColorScheme(); return ( <SafeAreaProvider> <AppearanceProvider> <NavigationContainer ref={setAppNavigator}> <Stack.Navigator initialRouteName={'AuthStack'} headerMode={'none'}> <Stack.Screen name={'SplashScreen'} component={SplashScreen} /> <Stack.Screen name={'AuthStack'} component={AuthStacks} /> <Stack.Screen name={'DrawerAppStack'} component={DrawerAppStacks} /> <Stack.Screen name={'TernPolicyScreen'} component={TernPolicyScreen} /> <Stack.Screen name={'NotificationScreen'} component={NotificationScreen} /> <Stack.Screen name={'ResultPageScreen'} component={ResultPageScreen} /> </Stack.Navigator> </NavigationContainer> </AppearanceProvider> </SafeAreaProvider> ); }; const styles = StyleSheet.create({ drawerStyles: { flex: 1, backgroundColor: 'transparent' }, stack: { flex: 1, shadowColor: '#FFF', shadowOffset: { width: 0, height: 8, }, shadowOpacity: 0.44, shadowRadius: 10.32, elevation: 5, // overflow: 'scroll', // borderWidth: 1, }, drawerContent: { flex: 1, paddingVertical: 16, }, profile: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, profileImage: { width: 44, height: 44, borderRadius: 44 / 2, marginHorizontal: 4, }, profileName: { fontSize: 22, fontWeight: '500', marginHorizontal: 4, }, dividerContainer: { paddingHorizontal: 8, justifyContent: 'center', alignItems: 'center', }, divider: { height: 1, width: '80%', backgroundColor: Colors.black, marginTop: 16, }, menuItem: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 32, padding: 8, marginRight: 16, }, focusMenuItem: { borderTopRightRadius: 16, borderBottomRightRadius: 16, backgroundColor: Colors.redDrawer, }, focusedMenuLabel: { marginHorizontal: 8, fontSize: 14, color: Colors.white, }, menuLabel: { marginHorizontal: 8, fontSize: 14, color: Colors.black, }, }); export default AppNavigation;