Question 35269 in React native Question posted in
The official React Native documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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');
  };
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search