How to open the modal of next screen while navigating in react native?-CodePudding

I wanted to open the modal of the another screen (lets say B) from my current screen(lets say A) by passing the props as { showModal: true }.

In my screen A, I have passed the props from A to B like:

Navigation.push(componentId,'B',null,{showModal: true});

In my screen B, I got props showModal and open the modal of screen B like:

 useEffect(() => {
  // some async API calls

 },[]);

 useEffect(() => {
    if (showModal) {
      setTimeout(() => modalRef.current?.setModal(true), 4000); // inside the async function call
    }
  }, []);

Here you can see i have shown the modal using the ref, but not state because there was other neighbour states which caused re-rendering issue and the modal was not opening. In this case, the modal opens up as i have delayed the opening of the modal since there are some other async API calls as well.

So my question is that is there other alternative solution than this?

CodePudding user response：

You can use AppNavigator to go to the next screen.

import {NativeStackNavigationProp} from '@react-navigation/native-stack';     
import {AppNavigator} from '@navigators';
 
const goToFinanceScreen = () => {
    navigation.navigate('test');
  };

CodePudding user response：

I think setTimeout is the wrong approach because anyone does not know about time for APIs fetching so, You can open the model after all APIs successfully fetched.