Untitled

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