App.tsx

import React, { useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { ThemeProvider } from '@rneui/themed';
import { theme } from './src/config/theme';
import SplashScreen from 'react-native-splash-screen';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { persister, queryClient } from './src/services/queryClient';
import NetInfo from '@react-native-community/netinfo';
import { onlineManager, QueryErrorResetBoundary } from '@tanstack/react-query';
import ConnectionLostAlert from './src/components/Alerts/ConnectionLostAlert/ConnectionLostAlert';
import ErrorBoundary from './src/components/Alerts/ErrorBoundary/ErrorBoundary';
import { ActivityIndicator, Linking, View } from 'react-native';
import branch from 'react-native-branch';
import RootNavigator from './src/navigation/RootNavigator';
import CodePush from 'react-native-code-push';
import { nicelog } from './src/utils/nicelog';
import { navigationRef } from '.';
import EnvFlag from './src/components/Common/EnvFlag/EnvFlag';
import { DevToolProvider } from './src/hooks/useDev';

const codepushConfig = {
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
  mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE
};

const linking = {
  prefixes: ['native-contractor://'],
  subscribe(listener) {
    // First, you may want to do the default deep link handling
    const onReceiveURL = ({ url }: { url: string }) => listener(url);

    // Listen to incoming links from deep linking
    Linking.addEventListener('url', onReceiveURL);

    // Next, you would need to subscribe to incoming links from your third-party integration
    // For example, to get to subscribe to incoming links from branch.io:
    const branchUnsubscribe = branch.subscribe(({ error, params, uri }) => {
      nicelog('ON RECEIVE URL', { error, params, uri });

      if (error) {
        console.error('Error from Branch: ' + error);
        return;
      }

      if (params['+non_branch_link']) {
        const nonBranchUrl = params['+non_branch_link'];
        // Route non-Branch URL if appropriate.
        return;
      }

      if (!params['+clicked_branch_link']) {
        // Indicates initialization success and some other conditions.
        // No link was opened.
        return;
      }

      // A Branch link was opened
      // attach any query params to deeplink_path

      let url = params.$deeplink_path;

      if (params?.data && params?.projectJobId) {
        url = `${params.$deeplink_path}/${params.data}/${params.projectJobId}`;
      } else if (params?.data) {
        url = `${params.$deeplink_path}/${params.data}`;
      }

      console.log('DEEPLINK PATH', url);

      listener(url);
    });

    return () => {
      // Clean up the event listeners
      Linking.removeAllListeners('url');
      branchUnsubscribe();
    };
  },
  config: {
    screens: {
      // Authenticated Stack
      Authenticated: {
        screens: {
          'Home Navigator': {
            screens: {
              Projects: 'projects',
              Account: 'account'
            }
          },
          'Check Out': 'checkout/:projectId',
          'Crew Approval': 'approval/:projectId?',
          'Check In Out Photo': 'upload/:projectId/:projectJobId',
          Projects: 'jobs/:projectJobId',
          'Job Details': 'job/:projectJobId',
          'Open Jobs': 'bids/:projectJobId',
          'Job Description': 'bid/:projectJobId'
        }
      },
      // Un-authenticated Stacks
      Login: {
        screens: {
          'Register Number': 'register',
          'Register Code': 'code'
        }
      }
    }
  }
};

function App(): JSX.Element {
  useEffect(() => {
    SplashScreen.hide();

    onlineManager.setEventListener((setOnline) => {
      return NetInfo.addEventListener((state) => {
        setOnline(!!state.isConnected);
      });
    });
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <DevToolProvider>
        <QueryErrorResetBoundary>
          {({ reset }) => (
            <ErrorBoundary onReset={reset}>
              <PersistQueryClientProvider
                client={queryClient}
                persistOptions={{
                  persister,
                  maxAge: Infinity
                }}
                onSuccess={() => {
                  // resume mutations after initial restore from localStorage was successful
                  queryClient.resumePausedMutations().then(() => {
                    queryClient.invalidateQueries();
                  });
                }}>
                <NavigationContainer
                  ref={navigationRef}
                  linking={linking}
                  fallback={
                    <View
                      style={{
                        justifyContent: 'center',
                        alignItems: 'center'
                      }}>
                      <ActivityIndicator animating={true} />
                    </View>
                  }>
                  <RootNavigator />
                </NavigationContainer>
                <ConnectionLostAlert />
                <EnvFlag />
              </PersistQueryClientProvider>
            </ErrorBoundary>
          )}
        </QueryErrorResetBoundary>
      </DevToolProvider>
    </ThemeProvider>
  );
}

export default CodePush(codepushConfig)(App);