navigate service now use v6 navigation instead of compat

src/components/accountsBottomSheet/container/accountsBottomSheetContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { navigate } from '../../../navigation/service';
+import RootNavigation from '../../../navigation/rootNavigation';
 
 import { removeOtherAccount, updateCurrentAccount } from '../../../redux/actions/accountAction';
 import { isPinCodeOpen, isRenderRequired, login, logout, logoutDone } from '../../../redux/actions/applicationActions';
@@ -47,11 +47,11 @@ const AccountsBottomSheetContainer = ({ navigation }) => {
     }
   }, [isVisibleAccountsBottomSheet]);
 
-  const _navigateToRoute = (routeName = null) => {
+  const _navigateToRoute = (name = null) => {
     dispatch(toggleAccountsBottomSheet(false));
     accountsBottomSheetViewRef.current?.closeAccountsBottomSheet();
-    if (routeName) {
-      navigate({ routeName });
+    if (name) {
+      RootNavigation.navigate({ name });
     }
   };
 

src/components/foregroundNotification/foregroundNotification.tsx

@@ -10,7 +10,7 @@ import ROUTES from '../../constants/routeNames';
 
 // Styles
 import styles, { CONTAINER_HEIGHT } from './styles';
-import { navigate } from '../../navigation/service';
+import RootNavigation from '../../navigation/rootNavigation';
 import { useIntl } from 'react-intl';
 
 interface RemoteMessage {
@@ -111,10 +111,10 @@ const ForegroundNotification = ({ remoteMessage }: Props) => {
       permlink: fullPermlink,
     };
     let key = fullPermlink
-    let routeName = ROUTES.SCREENS.POST;
+    let name = ROUTES.SCREENS.POST;
 
-    navigate({
-      routeName,
+    RootNavigation.navigate({
+      name,
       params,
       key,
     });

src/components/organisms/quickProfileModal/children/quickProfileContent.tsx

@@ -15,16 +15,15 @@ import { getTimeFromNowNative } from '../../../../utils/time'
 import { useAppDispatch, useAppSelector } from '../../../../hooks'
 import { toastNotification } from '../../../../redux/actions/uiAction'
 import bugsnapInstance from '../../../../config/bugsnag'
+import RootNavigation from '../../../../navigation/rootNavigation'
 
 interface QuickProfileContentProps {
     username:string,
-    navigation:any;
     onClose:()=>void;
 }
 
 export const QuickProfileContent = ({
     username,
-    navigation,
     onClose
 }:QuickProfileContentProps) => {
     const intl = useIntl();
@@ -185,10 +184,10 @@ export const QuickProfileContent = ({
         };
   
         if (isOwnProfile) {
-          navigation.navigate(ROUTES.TABBAR.PROFILE);
+          RootNavigation.navigate(ROUTES.TABBAR.PROFILE);
         } else {
-          navigation.navigate({
-            routeName: ROUTES.SCREENS.PROFILE,
+            RootNavigation.navigate({
+            name: ROUTES.SCREENS.PROFILE,
             params,
             key: username,
           });

src/components/organisms/quickProfileModal/container/quickProfileModal.tsx

@@ -1,6 +1,4 @@
 import React, { useEffect, useRef } from 'react';
-import { AlertButton } from 'react-native';
-import { Source } from 'react-native-fast-image';
 import ActionSheet from 'react-native-actions-sheet';
 import { QuickProfileContent } from '../children/quickProfileContent';
 import EStyleSheet from 'react-native-extended-stylesheet';
@@ -10,12 +8,7 @@ import { hideProfileModal } from '../../../../redux/actions/uiAction';
 
 
 
-export interface ActionModalData {
-  navigation:any
-}
-
-
-export const QuickProfileModal = ({navigation}) => {
+export const QuickProfileModal = () => {
     const sheetModalRef = useRef<ActionSheet>();
     const dispatch = useAppDispatch();
 
@@ -45,7 +38,6 @@ export const QuickProfileModal = ({navigation}) => {
             indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}> 
             
             <QuickProfileContent
-                navigation={navigation}
                 username={profileModalUsername}
                 onClose={_onClose}
             />

src/components/postElements/body/view/commentBodyView.tsx

@@ -8,7 +8,7 @@ import ActionsSheetView from 'react-native-actions-sheet';
 
 // import AutoHeightWebView from 'react-native-autoheight-webview';
 import EStyleSheet from 'react-native-extended-stylesheet';
-import { navigate } from '../../../../navigation/service';
+import RootNavigation from '../../../../navigation/rootNavigation';
 
 // Constants
 import { default as ROUTES } from '../../../../constants/routeNames';
@@ -135,10 +135,10 @@ const CommentBody = ({
 
   const _handleTagPress = (tag:string, filter:string = GLOBAL_POST_FILTERS_VALUE[0]) => {
     if (tag) {
-      const routeName = isCommunity(tag) ? ROUTES.SCREENS.COMMUNITY : ROUTES.SCREENS.TAG_RESULT;
+      const name = isCommunity(tag) ? ROUTES.SCREENS.COMMUNITY : ROUTES.SCREENS.TAG_RESULT;
       const key = `${filter}/${tag}`;
-      navigate({
-        routeName,
+      RootNavigation.navigate({
+        name,
         params: {
           tag,
           filter,
@@ -167,8 +167,8 @@ const CommentBody = ({
       return;
     }
     if (permlink) {
-      navigate({
-        routeName: ROUTES.SCREENS.POST,
+      RootNavigation.navigate({
+        name: ROUTES.SCREENS.POST,
         params: {
           author,
           permlink,
@@ -184,8 +184,8 @@ const CommentBody = ({
       return;
     }
     if (username) {
-      navigate({
-        routeName: ROUTES.SCREENS.PROFILE,
+      RootNavigation.navigate({
+        name: ROUTES.SCREENS.PROFILE,
         params: {
           username,
         },

src/components/qrModal/qrModalView.tsx

@@ -8,7 +8,7 @@ import { toggleQRModal } from '../../redux/actions/uiAction';
 import QRCodeScanner from 'react-native-qrcode-scanner';
 import { deepLinkParser } from '../../utils/deepLinkParser';
 import { useIntl } from 'react-intl';
-import { navigate } from '../../navigation/service';
+import RootNavigation from '../../navigation/rootNavigation';
 import { check, request, PERMISSIONS, RESULTS, openSettings } from 'react-native-permissions';
 import getWindowDimensions from '../../utils/getWindowDimensions';
 
@@ -103,12 +103,12 @@ export const QRModal = ({}: QRModalProps) => {
   const _handleDeepLink = async (url) => {
     setIsProcessing(true);
     const deepLinkData = await deepLinkParser(url, currentAccount);
-    const { routeName, params, key } = deepLinkData || {};
+    const { name, params, key } = deepLinkData || {};
     setIsProcessing(false);
-    if (routeName && params && key) {
+    if (name && params && key) {
       setIsScannerActive(false);
       _onClose();
-      navigate(deepLinkData);
+      RootNavigation.navigate(deepLinkData);
     } else {
       Alert.alert(
         intl.formatMessage({ id: 'qr.unsupported_alert_title' }),

src/components/quickReplyModal/quickReplyModalContent.tsx

@@ -15,7 +15,7 @@ import {
 } from '../../redux/actions/cacheActions';
 import { default as ROUTES } from '../../constants/routeNames';
 import { get } from 'lodash';
-import { navigate } from '../../navigation/service';
+import RootNavigation from '../../navigation/rootNavigation';
 import { postBodySummary } from '@ecency/render-helper';
 import { Draft } from '../../redux/reducers/cacheReducer';
 import { RootState } from '../../redux/store/store';
@@ -104,8 +104,8 @@ export const QuickReplyModalContent = forwardRef(({
   const _handleOnSummaryPress = () => {
     Keyboard.dismiss();
     onClose();
-    navigate({
-      routeName: ROUTES.SCREENS.POST,
+    RootNavigation.navigate({
+      name: ROUTES.SCREENS.POST,
       params: {
         content: selectedPost,
       },
@@ -221,8 +221,8 @@ export const QuickReplyModalContent = forwardRef(({
       Keyboard.dismiss();
       onClose();
       await delay(50);
-      navigate({
-        routeName: ROUTES.SCREENS.EDITOR,
+      RootNavigation.navigate({
+        name: ROUTES.SCREENS.EDITOR,
         key: 'editor_replay',
         params: {
           isReply: true,

src/components/userAvatar/view/userAvatarView.tsx

@@ -4,7 +4,7 @@ import { ActivityIndicator, TouchableOpacity, ViewStyle } from 'react-native';
 
 import FastImage from 'react-native-fast-image';
 import styles from './userAvatarStyles';
-import { navigate } from '../../../navigation/service';
+import RootNavigation from '../../../navigation/rootNavigation';
 
 // Constants
 import ROUTES from '../../../constants/routeNames';
@@ -47,9 +47,9 @@ const UserAvatarView = ({
 
     // Component Functions
     const _handleOnAvatarPress = (username:string) => {
-      const routeName = curUsername === username ? ROUTES.TABBAR.PROFILE : ROUTES.SCREENS.PROFILE;
-      navigate({
-        routeName,
+      const name = curUsername === username ? ROUTES.TABBAR.PROFILE : ROUTES.SCREENS.PROFILE;
+      RootNavigation.navigate({
+        name,
         params: {
           username,
         },

src/containers/loggedInContainer.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import ROUTES from '../constants/routeNames';
-import { navigate } from '../navigation/service';
+import RootNavigation from '../navigation/rootNavigation';
 
 import { NoPost } from '../components';
 
@@ -18,7 +18,7 @@ const LoggedInContainer = ({ isLoggedIn, isLoginDone, children }) => {
         defaultText={intl.formatMessage({
           id: 'profile.login_to_see',
         })}
-        handleOnButtonPress={() => navigate({ routeName: ROUTES.SCREENS.LOGIN })}
+        handleOnButtonPress={() => RootNavigation.navigate({ name: ROUTES.SCREENS.LOGIN })}
       />
     );
   }

src/containers/walletContainer.js

@@ -12,7 +12,7 @@ import { getAccount, claimRewardBalance, getBtcAddress } from '../providers/hive
 import { groomingWalletData, groomingTransactionData, transferTypes } from '../utils/wallet';
 import parseToken from '../utils/parseToken';
 import { vestsToHp } from '../utils/conversions';
-import { navigate } from '../navigation/service';
+import RootNavigation from '../navigation/rootNavigation';
 import { getEstimatedAmount } from '../utils/vote';
 
 // Constants
@@ -252,16 +252,16 @@ const WalletContainer = ({
     }
 
     if (isPinCodeOpen) {
-      navigate({
-        routeName: ROUTES.SCREENS.PINCODE,
+      RootNavigation.navigate({
+        name: ROUTES.SCREENS.PINCODE,
         params: {
           navigateTo: ROUTES.SCREENS.TRANSFER,
           navigateParams: { transferType, fundType, balance, tokenAddress },
         },
       });
     } else {
-      navigate({
-        routeName: ROUTES.SCREENS.TRANSFER,
+      RootNavigation.navigate({
+        name: ROUTES.SCREENS.TRANSFER,
         params: { transferType, fundType, balance, tokenAddress },
       });
     }

src/navigation/appNavigator.tsx

@@ -6,7 +6,7 @@ import { useAppSelector } from '../hooks';
 
 // Screens
 import { StackNavigator } from './stackNavigator';
-import { setTopLevelNavigator } from './service';
+import { navigationRef } from './rootNavigation';
 import ROUTES from '../constants/routeNames';
 import parseVersionNumber from '../utils/parseVersionNumber';
 
@@ -23,7 +23,7 @@ export const AppNavigator = () => {
   
 
   return (
-    <NavigationContainer ref={ref=>setTopLevelNavigator(ref)}>
+    <NavigationContainer ref={navigationRef}>
       <StackNavigator initRoute={_initRoute} />
     </NavigationContainer>
   )

src/navigation/rootNavigation.tsx

@@ -0,0 +1,18 @@
+import { createNavigationContainerRef } from '@react-navigation/native';
+
+export const navigationRef = createNavigationContainerRef();
+
+
+const navigate = (navigationProps:any) => {
+  if (navigationRef.isReady()) {
+    navigationRef.navigate(navigationProps);
+  }
+};
+
+// add other navigation functions that you need and export them
+
+const RootNavigation = { 
+  navigate
+};
+
+export default RootNavigation

src/navigation/service.js

@@ -1,29 +0,0 @@
-import { NavigationActions } from '@react-navigation/compat';
-
-let _navigator;
-
-let navigationStack = [];
-
-const setTopLevelNavigator = (navigatorRef) => {
-  _navigator = navigatorRef;
-  if (navigationStack.length > 0) {
-    navigationStack.forEach((item) => navigate(item));
-    navigationStack = [];
-  }
-};
-
-const navigate = (navigationProps) => {
-  if (!_navigator) {
-    navigationStack.push(navigationProps);
-  } else {
-    _navigator.dispatch(
-      NavigationActions.navigate({
-        ...navigationProps,
-      }),
-    );
-  }
-};
-
-// add other navigation functions that you need and export them
-
-export { navigate, setTopLevelNavigator };

src/screens/application/children/applicationScreen.tsx

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { injectIntl } from 'react-intl';
 
 import { AppNavigator } from '../../../navigation';
-import { navigate } from '../../../navigation/service';
+import RootNavigation from '../../../navigation/rootNavigation';
 
 // Services
 import {
@@ -66,8 +66,8 @@ class ApplicationScreen extends Component {
             {
               text: 'OK',
               onPress: () => {
-                navigate({
-                  routeName: ROUTES.SCREENS.ACCOUNT_BOOST,
+                RootNavigation.navigate({
+                  name: ROUTES.SCREENS.ACCOUNT_BOOST,
                 });
                 dispatch(setRcOffer(false));
               },
@@ -135,7 +135,7 @@ class ApplicationScreen extends Component {
     return (
       <>
         <ForegroundNotification remoteMessage={foregroundNotificationData} />
-        <QuickProfileModal navigation={{ navigate }} />
+        <QuickProfileModal />
         <AccountsBottomSheet />
         <ActionModal />
         <QuickReplyModal />

src/screens/application/container/applicationContainer.tsx

@@ -45,7 +45,7 @@ import {
   getUnreadNotificationCount,
 } from '../../../providers/ecency/ecency';
 import { fetchLatestAppVersion } from '../../../providers/github/github';
-import { navigate } from '../../../navigation/service';
+import RootNavigation from '../../../navigation/rootNavigation';
 
 // Actions
 import {
@@ -128,8 +128,8 @@ class ApplicationContainer extends Component {
 
     ReceiveSharingIntent.getReceivedFiles(
       (files) => {
-        navigate({
-          routeName: ROUTES.SCREENS.EDITOR,
+        RootNavigation.navigate({
+          name: ROUTES.SCREENS.EDITOR,
           params: { hasSharedIntent: true, files },
         });
         // files returns as JSON Array example
@@ -223,11 +223,11 @@ class ApplicationContainer extends Component {
 
     try {
       const deepLinkData = await deepLinkParser(url, currentAccount);
-      const { routeName, params, key } = deepLinkData || {};
+      const { name, params, key } = deepLinkData || {};
 
-      if (routeName && key) {
-        navigate({
-          routeName,
+      if (name && key) {
+        RootNavigation.navigate({
+          name,
           params,
           key: key,
         });
@@ -336,8 +336,8 @@ class ApplicationContainer extends Component {
     const { isPinCodeOpen: _isPinCodeOpen } = this.props;
     if (_isPinCodeOpen) {
       this._pinCodeTimer = setTimeout(() => {
-        navigate({
-          routeName: ROUTES.SCREENS.PINCODE,
+        RootNavigation.navigate({
+          name: ROUTES.SCREENS.PINCODE,
         });
       }, 1 * 60 * 1000);
     }
@@ -425,8 +425,8 @@ class ApplicationContainer extends Component {
       });
 
       if (!some(params, isEmpty)) {
-        navigate({
-          routeName,
+        RootNavigation.navigate({
+          name:routeName,
           params,
           key,
         });
@@ -551,7 +551,7 @@ class ApplicationContainer extends Component {
       realmObject[0].name = currentUsername;
       // If in dev mode pin code does not show
       if (_isPinCodeOpen) {
-        navigate({ routeName: ROUTES.SCREENS.PINCODE });
+        RootNavigation.navigate({ name: ROUTES.SCREENS.PINCODE });
       } else if (!_isPinCodeOpen) {
         const encryptedPin = encryptKey(Config.DEFAULT_PIN, Config.PIN_KEY);
         dispatch(savePinCode(encryptedPin));

src/screens/coinDetails/screen/coinDetailsScreen.tsx

@@ -8,7 +8,7 @@ import { useAppDispatch, useAppSelector } from '../../../hooks'
 import { CoinActivitiesCollection, QuoteItem } from '../../../redux/reducers/walletReducer';
 import { fetchCoinActivities } from '../../../utils/wallet';
 import { fetchAndSetCoinsData, setCoinActivities } from '../../../redux/actions/walletActions';
-import { navigate } from '../../../navigation/service';
+import RootNavigation from '../../../navigation/rootNavigation';
 import ROUTES from '../../../constants/routeNames';
 import { COIN_IDS } from '../../../constants/defaultCoins';
 import { useIntl } from 'react-intl';
@@ -137,16 +137,16 @@ const CoinDetailsScreen = ({ navigation, route }: CoinDetailsScreenProps) => {
     }
 
     if (isPinCodeOpen) {
-      navigate({
-        routeName: ROUTES.SCREENS.PINCODE,
+      RootNavigation.navigate({
+        name: ROUTES.SCREENS.PINCODE,
         params:{
           navigateTo,
           navigateParams,
         }
       })
     } else {
-      navigate({
-        routeName: navigateTo,
+      RootNavigation.navigate({
+        name: navigateTo,
         params: navigateParams
       });
     }

src/screens/login/container/loginContainer.tsx

@@ -35,6 +35,7 @@ import { showActionModal } from '../../../redux/actions/uiAction';
 import { UserAvatar } from '../../../components';
 import { useUserActivityMutation } from '../../../providers/queries/pointQueries';
 import { PointActivityIds } from '../../../providers/ecency/ecency.types';
+import { useNavigation } from '@react-navigation/core';
 
 /*
  *            Props Name        Description                                     Value
@@ -134,7 +135,7 @@ class LoginContainer extends PureComponent {
             );
           } else {
             navigation.navigate({
-              routeName: ROUTES.DRAWER.MAIN,
+              name: ROUTES.DRAWER.MAIN,
               params: { accessToken: result.accessToken },
             });
           }
@@ -290,10 +291,11 @@ const mapStateToProps = (state) => ({
   isPinCodeOpen: state.application.isPinCodeOpen,
 });
 
-const mapQueriesToProps = () => ({
+const mapHooksToProps = () => ({
+  navigation:useNavigation(),
   userActivityMutation: useUserActivityMutation()
 })
 
 export default connect(mapStateToProps)(injectIntl((props) => (
-  <LoginContainer {...props} {...mapQueriesToProps()} />
+  <LoginContainer {...props} {...mapHooksToProps()} />
 )));

src/screens/pinCode/container/pinCodeContainer.tsx

@@ -8,7 +8,7 @@ import FingerprintScanner from 'react-native-fingerprint-scanner';
 
 
 // Actions & Services
-import { navigate } from '../../../navigation/service';
+import RootNavigation from '../../../navigation/rootNavigation';
 import {
   updatePinCode,
 } from '../../../providers/hive/auth';
@@ -160,8 +160,8 @@ class PinCodeContainer extends Component {
           }
 
           if (navigateTo) {
-            navigate({
-              routeName: navigateTo,
+            RootNavigation.navigate({
+              name: navigateTo,
               params: navigateParams,
             });
           } else {
@@ -280,8 +280,8 @@ class PinCodeContainer extends Component {
       }
 
       if (navigateTo) {
-        navigate({
-          routeName: navigateTo,
+        RootNavigation.navigate({
+          name: navigateTo,
           params: navigateParams,
         });
       } else {

src/screens/referScreen/referScreen.tsx

@@ -24,7 +24,7 @@ import ROUTES from '../../constants/routeNames';
 
 // Redux / Services
 import { showProfileModal } from '../../redux/actions/uiAction';
-import { navigate } from '../../navigation/service';
+import RootNavigation from '../../navigation/rootNavigation';
 import { useAppSelector } from '../../hooks';
 import { useDispatch } from 'react-redux';
 
@@ -84,8 +84,8 @@ const ReferScreen = () => {
 
   const _handleDelegateHP = (item: Referral) => {
     console.log('delegate HP!');
-    navigate({
-      routeName: ROUTES.SCREENS.TRANSFER,
+    RootNavigation.navigate({
+      name: ROUTES.SCREENS.TRANSFER,
       params: {
         transferType: 'delegate',
         fundType: 'HIVE_POWER',

src/utils/deepLinkParser.ts

@@ -122,7 +122,7 @@ export const deepLinkParser = async (url, currentAccount) => {
 
 
   return {
-    routeName: routeName,
+    name: routeName,
     params: params,
     key: keey,
   };

src/utils/showLoginAlert.ts

@@ -1,6 +1,6 @@
 import { Alert } from 'react-native';
 import ROUTES from '../../src/constants/routeNames';
-import { navigate } from '../navigation/service';
+import RootNavigation from '../navigation/rootNavigation';
 
 const showLoginAlert = ({ intl }) => {
   return Alert.alert(
@@ -15,7 +15,7 @@ const showLoginAlert = ({ intl }) => {
       {
         text: intl.formatMessage({ id: 'login.login' }),
         onPress: () => {
-          navigate({routeName:ROUTES.SCREENS.LOGIN});
+          RootNavigation.navigate({name:ROUTES.SCREENS.LOGIN});
         },
       },
     ],