React-native-router-flux: Lightbox not rendered on top of initial scene (e.g not transparent)

[NathHorrigan]

Version

Tell us which versions you are using:

• react-native-router-flux: ^4.0.0-beta.21
• react-native: 0.48.3

Expected behaviour

Component to render on top of initial scene

Actual behaviour

Component renders like a normal scene on top of white view layer

Steps to reproduce

// index.js
<Router>
    <Lightbox>
        <Scene key="root" navBar={Navbar} setBarStyle={'blue'}>
            <Scene key="initial" initial={true} component={InitialPage} />
            // Rest of scenes
         </Scene>
         <Scene key="settings" hideNavBar={true} component={SettingsModal} />
    </Lightbox>
</Router>

// SettingsModal.js
<View style={{
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    width: '100%',
    height: '100%',
}}>  
    <Text>Hello, World</Text>   
</View>

[curliq]

Having the same issue. Have you found a solution?

[NathHorrigan]

Nope - No response from the Gitter either. Do update the issue if you find one :)

[curliq]

We have to wrap the Router with a View with flex 1, i.e.:

<View style={{flex:1}}>
<Router>
    <Lightbox>
        <Scene key="root" navBar={Navbar} setBarStyle={'blue'}>
            <Scene key="initial" initial={true} component={InitialPage} />
            // Rest of scenes
         </Scene>
         <Scene key="settings" hideNavBar={true} component={SettingsModal} />
    </Lightbox>
</Router>
</View>

[crazyhatfish]

That didn't work for me. I just had to set the lightbox view position to absolute:

      <View style={styles.container}>  
          <Text>Hello, World</Text>   
      </View>

  container: {
    backgroundColor: '#0000000A',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    justifyContent: 'center',
    alignItems: 'center',
  }

[NathHorrigan]

@crazyhatfish Yep - that worked!!

[afilp]

@crazyhatfish I use the "BaseLightbox" that the example has, which uses transparent but I only see a light gray as background. I do not see the contents of the previous screen behind the lightbox. Any ideas what should be changed? Thanks!

[diaraujo13]

@afilp Did you find a solution?

[rey-an-papa-ext]

@aksonov I have the same issue with @afilp. Please assist us.