Black background instead of transparent background

[v3yr0n]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.27
• react-native v0.50.0

Expected behaviour

Transparent scene background

Actual behaviour

Black background when set to 'transparent'

Steps to reproduce

<View style={styles.sceneStyle}>
  <Image
    style={{
      flex: 1,
      width: null,
      height: null,
      position: 'absolute',
      top: 0,
      bottom: 0,
      right: 0,
      left: 0
   }}
   source={require('./images/background.png')}
   />
   <Router sceneStyle={styles.sceneStyle} navigationBarStyle={{backgroundColor: 'transparent', borderBottomWidth: 0 }} getSceneStyle={()=>styles.sceneStyle}>
   <Scene sceneStyle={styles.sceneStyle} key="root">
     <Scene sceneStyle={styles.sceneStyle} key="scene1" component={Component1} initial />
     <Scene sceneStyle={styles.sceneStyle} key="scene2" component={Component2}/>
     <Scene sceneStyle={styles.sceneStyle} key="scene3" component={Component3} />
     <Scene sceneStyle={styles.sceneStyle} key="scene4" component={Component4} />
     </Scene>
 </Router>
</View>

const styles = StyleSheet.create({
  sceneStyle: {
    opacity: 1,
    flex: 1,
    backgroundColor: 'transparent',
    shadowColor: null,
    shadowOffset: null,
    shadowOpacity: null,
    shadowRadius: null,
    position: 'absolute',
    top: 0,
    width: '100%',
    height: '100%'
  },
  viewStyle: {
    alignItems: 'center',
    backgroundColor: 'transparent',
    width: '100%',
    height: '100%'
  }
});

All components have background: 'transparent'. Any idea?
A simular code works on version 3.38.0

Thanks!

[themakerman]

can you please try using the props getSceneStyle for setting the background? @v3yr0n

<Router getSceneStyle={() => ({ backgroundColor: 'transparent' })}>
   <Scene ...>
   <Scene ...>
.
.
.
</Router>

This is what you must do to keep all the components transparent and the image you have loaded before router will become the common background instead.

[v3yr0n]

@themakerman not sure what you mean, but I tried to add the setSceneStyle prop and nothing happened. BTW, sceneStyle or setSceneStyle should do the same, right?

[v3yr0n]

and I manage to solve the issue with

<View style={{ flex: 1, backgroundColor: 'white'}}>
        <Router getSceneStyle={()=>styles.sceneStyle} navigationBarStyle={{backgroundColor: 'transparent', borderBottomWidth: 0 }}>
          <Scene>
            <Scene sceneStyle={styles.sceneStyle} key="scene1" component={Component1} initial />
            <Scene sceneStyle={styles.sceneStyle} key="scene2" component={Component2}/>
            <Scene sceneStyle={styles.sceneStyle} key="scene3" component={Component3} />
            <Scene sceneStyle={styles.sceneStyle} key="scene4" component={Component4} />
          </Scene>
        </Router>
        <Image
    style={{
      zIndex: -1,
      resizeMode: 'cover',
      height: '100%',
      width: '100%'
   }}
   source={require('./images/background.png')}
   />
      </View>

The magic here is the zIndex: -1

Not sure if this is the best approach, but at least it works :)

[v3yr0n]

And now i'm having some other issue. I was using the animationStyle prop to set the horizontal animation to show and hide scenes, but on v4 this is now available.
This is what is happening:

As you can see the exit animation is a bit laggy. Any idea of how to solve this?

Thanks!

[Blapi]

Is it a debug or release version?

[v3yr0n]

Debug

[Blapi]

If this is on Android, you shouldn't have to worry, I'm developing on Android and the debug is way slower than the release version !
Don't know about iOS

[themakerman]

@v3yr0n setSceneStyle prop doesn't exists. Its getSceneStyle....i think you saw my older version of comment. Good to know you fixed it.

[v3yr0n]

@themakerman that's solved. What I need now is to solve the exit animation, when the scene exits (check the gif). Any idea of how to do that?
Should I use transitionConfig={() => ({ screenInterpolator: something})} ?

[themakerman]

@v3yr0n so far what i am aware of is rnrf does not supports custom animation. However if you want your scenes to show top-down animation while mounting you can use modal prop in your scene. Check the v4 docs.

also refer to #2629. I explain how to use light box component for kind off you would say custom animation.

[v3yr0n]

@themakerman thanks for answering. Well, i really need the animation like I demonstrated in the gif. I just want to make the exit of the scene more smooth. Any way I can do that @aksonov ? Thanks!

[themakerman]

@v3yr0n Try running in production or turning your debugger off. Lag should go

[v3yr0n]

No, same issue...

[themakerman]

@v3yr0n r u in simulator environment? cause i have never faced such problem. Maybe @aksonov could be of help.

[Blapi]

If you want to implement transitions in your navigation, have a look at #2628

[Blapi]

@v3yr0n what's the status there?

[aksonov]

Closed due inactivity