// 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;