Untitled
unknown
plain_text
a year ago
7.6 kB
2
Indexable
Never
// Depedendencies import React, {useEffect, useState} from 'react' import { View, Image, Text, TouchableOpacity } from 'react-native' import AsyncStorage from '@react-native-async-storage/async-storage' // Components & Wrappers import BackgroundGeolocationWrapper from '../map_view/BackgroundGeolocationWrapper'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' import Button from '../button/Button' // Screens import Events from '../../sections/events/screens/Events'; import InterestsScreen from '../interest-screen/InterestsScreen'; import OnboardingPersonality from '../../screens/onboarding-personality/OnboardingPersonality' //Helpers import {getFromAsyncStorageIsUserOnboarded} from './TabNavigation_Helpers' import OneboardingScreen from '../home-page/OneboardingScreen'; import { NavigationContainer } from '@react-navigation/native'; //redux import {Provider} from 'react-redux' import store from '../../store' import { ErrorBoundary } from 'react-error-boundary'; import PositionedMapView from '../positioned-map-view/PositionedMapView'; const TabNavigation = () => { const [isUserAlreadyOnboarded, setIsUserAlreadyOnboarded] = useState(false) const [isLoading, setIsLoading] = useState(true) // Check if users is onboarded, show personality type on first launch of the app useEffect(() => { getFromAsyncStorageIsUserOnboarded(AsyncStorage, setIsUserAlreadyOnboarded, setIsLoading); },[]) const Tab = createBottomTabNavigator(); function fallbackRender({ error, resetErrorBoundary }) { // Call resetErrorBoundary() to reset the error boundary and retry the render. return ( <View style={{alignItems: 'center', flex: 1, gap: 10, justifyContent: 'center', backgroundColor: 'white'}}> <Text style={{color: 'black', fontSize: 14}}>Something went wrong:</Text> <Text style={{ color: "red", backgroundColor: 'lightgrey', padding: 5, borderRadius: 2 }}>{error.message}</Text> <TouchableOpacity style={{borderWidth: 1, borderColor: 'black', padding: 20, borderRadius: 9}} onPress={resetErrorBoundary}> <Text style={{color: 'black'}}>Try again</Text> </TouchableOpacity> </View> ); } return ( <Provider store={store} > <ErrorBoundary FallbackComponent={fallbackRender}> <BackgroundGeolocationWrapper children={ <NavigationContainer> {/* check isUserAlreadyOnboarded data loaded with isLoading, when loaded loading becomes false */} { !isLoading && <Tab.Navigator initialRouteName="BackgroundGeolocationWrapper" screenOptions={({route}) => ({ tabBarShowLabel: false, tabBarStyle: { paddingHorizontal: 0, paddingVertical: 10, paddingBottom: 1, }, headerShown: false, })}> {/* Screens in the navigation stack */} { isUserAlreadyOnboarded ? // If user is finished with onboarding then usual flow (<> <Tab.Screen name="Events" component={Events} options={{ headerShown: false, tabBarIcon: ({focused}) => ( <View pointerEvents="none"> <Button p={5} invert={focused ? true : false} children={ <Image style={{width: 25, height: 25,top:-2}} source={ !focused ? require('../../assets/icons/iconEvent.png') : require('../../assets/icons/iconEventInv.png') } /> } /> </View> ), }} /> <Tab.Screen name="BackgroundGeolocationWrapper" component={PositionedMapView} options={{ headerShown: false, tabBarIcon: ({focused}) => ( <View pointerEvents="none"> <Button p={5} invert={focused ? true : false} children={ <Image source={ !focused ? require('../../assets/images/Group.png') : require('../../assets/images/GroupSelected.png') } /> } /> </View> ), }} /> <Tab.Screen name="InterestsPage" component={InterestsScreen} options={{ tabBarIcon: ({focused}) => ( <View pointerEvents="none"> <Button p={5} invert={focused ? true : false} children={ <Image style={{width: 25, height: 25}} source={ !focused ? require('../../assets/icons/iconHeartBold.png') : require('../../assets/icons/iconHeartBoldSelected.png') } /> } /> </View> ), }} /> </>) // If the user isn't finished with onboarding then first ask for his personality : (<> <Tab.Screen name='PermissionsScreen' component={OneboardingScreen} options={{ tabBarStyle: { display: 'none' }, headerShown: false, }} /> <Tab.Screen name='OnboardingPersonality' children={() => <OnboardingPersonality setIsUserAlreadyOnboarded={setIsUserAlreadyOnboarded} />} options={{ tabBarStyle: { display: 'none' }, headerShown: false, }} /> </>) } </Tab.Navigator>} </NavigationContainer>}></BackgroundGeolocationWrapper> </ErrorBoundary> </Provider> ); }; export default TabNavigation;