Prevent unmounting of react-navigation stacknavigator screen

5
votes

I have Screen A (Dashboard) and Screen B (Details).

When you click on a button in the dashboard you get navigated to details. This is done with a react-navigation (v1.5) stackrouter. When you navigate back the detail screen gets unmounted and you go back to the dashboard.

Is it possible to keep the details screen mounted when you navigate back?

1
react-nativereact-navigation
Did you find anything useful about it? - e4gle

1 Answers

0
votes

Try using the latest react-navigation v3. With that the stackNavigator will not unmount the component during navigations. Example

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}