Prevent unmount when leaving scene inside lightbox

Author: bogdan-volCreated Sep 29, 2020Updated Sep 20, 2023

Version

  • react-native-router-flux v4.2.0
  • react v16.12.0
  • react-native v0.61.5

Expected behaviour

If I use Lightbox and navigate outside the root scene, to Scene A, then navigate to Scene B, Scene A does not unmount and pop()ing from Scene B, Scene A does not refresh.

Actual behaviour

Scene A unmounts and refreshes. If I use Modal instead of Lightbox everything is fine but I need the transparency.

Steps to reproduce

  1. you are in one of the Scenes inside the root Scene.
  2. you navigate to one of the Scenes (A) outside the root Scene, but inside the Lightbox.
  3. you navigate to another Scene (B) outside the root Scene, but inside the Lightbox. Scene A unmounts (which I like to prevent)
  4. pop()
  5. Scene A reloads (instead of just being there like if I used Modal instead of Lightbox)

Reproducible Demo

 <Router titleStyle={{ textAlign: 'center', flex: 1 }}>
    <Lightbox>
      <Stack
        lazy={true}
        key='root'
        hideNavBar
        drawerLockMode='locked-closed'
        gesturesEnabled={false}
      >
        <Scene
          initial
          lazy={true}
          key='home'
          component={Home}
          drawerLockMode='locked-closed'
          gesturesEnabled={false}
        />
      </Stack>
      <Scene
        key='a'
        component={A}
        lazy={true}
        drawerLockMode='locked-closed'
        gesturesEnabled={false}
      />
      <Scene
        lazy={true}
        key='b'
        component={B}
        hideNavBar
        drawerLockMode='locked-closed'
        gesturesEnabled={false}
      />
    </Lightbox>
  </Router>
...
Actions.a();
...
Actions.b();
...
Actions.pop();

Source: aksonov/react-native-router-flux