'Calling a Modal of parent component in navigation stack

In my app I have a LoadingScreen at the start of the app. In this LoadingScreen I mount a React.Component (inside the render() method) to be able to show this Component from everywhere (It's a Modal to create an account to block/access specific features only for users with an account):

<CreateAccount/>

CreateAccount.js (part of it):

render () {
    return (
      <Modal
        animationType="slide"
        transparent={false}
        visible={this.props.state.settings.showUpgradeModal}
        onRequestClose={() => {
          console.log("Modal has been closed.");
        }}
      >
      {...}
      </Modal>);
}
{...}
export default function (props) {
  let navigation = useNavigation();
  let route = useRoute();
  let dispatch = useDispatch();
  let store = useStore();
  let state = useSelector(state => state);

  return <CreateAccount {...props} navigation={navigation} route={route} dispatch={dispatch} store={store} state={state}/>;
}

For State-management I use react-Redux. To access it, I have an export function for my Class-Component. Trough the props, I then get the state, navigation, dispatch and so on.

Now to my problem: visualisation of component tree The navigation container tree:

<NavigationContainer independent={true}>
    <Stack.Navigator>
         <Stack.Screen
                    name={"LoadingScreen"}
                    component={LoadingScreen}
         />
         {...}
         <Stack.Screen
                    name='MainMenu' //This is pushing to the TabNavigator in MainMenu
                    component={MainMenu}
         />
    </Stack.Navigator>
</NavigationContainer>


{other file (in MainMenu)}

<NavigationContainer independent={true} >
        <Tab.Navigator {...}>
          <Tab.Screen {...}/>
          {...}
        </Tab.Navigator>
</NavigationContainer>

I push to the MainMenu function with navigation.push("MaiMenu") after 3 seconds (after everything loaded). There I have functions only available to users with an account. If the user doesn't have an account I show a button with "create Account to use this function". With onPress I dispatch the change to the Redux-state:

onPress={() => dispatch(updateShowUpgradeModal(true))}

This alters the variable showUpgradeModal in the settings reducer.

The expected behaviour would be to show the modal (which worked a couple months ago, I changed nothing but it doesn't seem to work now). I tried:

  • console.log() the state (this.props.state.settings.showUpgradeModal) in the componentDidUpdate(). This turned true after the button press, the modal didn't slide in
  • setTimeout() with a local state in the component (CreateAccount), to change to true after 5 seconds. This changes the state (checked with console.log()) to true, but the modal doesn't show
  • passed the prop visible to CreateAccount. Then I set the visibility to the visible-prop. No success.
  • checked with componentDidMount() and ComponentWillIUnmount() if the Component is mounted. Turns out it is mounted the whole time.

I don't really know why it is not working anymore. I used to work for months...



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source