'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:
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 thecomponentDidUpdate(). This turned true after the button press, the modal didn't slide insetTimeout()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
visibleto CreateAccount. Then I set the visibility to thevisible-prop. No success. - checked with
componentDidMount()andComponentWillIUnmount()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 |
|---|
