React-native-router-flux: How to have a transparent background?

[alexmngn]

On the v2, I was able to have a transparent background on my scene, but now with the v3 I'm not able to do this anymore.
How can I set my Router/Scene to have a transparent background?
Thanks

[aksonov]

The problem in NavigationCard of React Native package:

      <Animated.View
        {...panHandlers}
        style={[styles.main, animatedStyle]}>
        {this.props.renderScene(sceneProps)}
      </Animated.View>

So the component can't pass own style to NavigationCard and it is weird. Please create issue there if you want it to be fixed:
https://github.com/ericvicenti/navigation-rfc

[alexmngn]

The NavigationCard in the last React Native 0.22rc-4 has the following:

     <Animated.View
        {...panHandlers}
        style={[styles.main, style]}>
        {this.props.renderScene(sceneProps)}
      </Animated.View>

style is a prop that I should be able to modify with whatever I need, but I'm not sure how to access it via Scene/Router @aksonov ?

[aksonov]

Looks like rc4 doesn't have this change, but master does. Anyway i've added this feature to the component (once NavigationCard will have style support, it should work), release 3.0.14

[zelphir]

@aksonov How to override this value here: https://github.com/aksonov/react-native-router-flux/blob/master/src/DefaultRenderer.js#L88

[aksonov]

Check code above:

             style={[styles.animatedView, navigationState.style]}
``

[zelphir]

@aksonov saw that, but where and how should I pass the style? in the Router? In each Scene? What if I want to set it globally? could you give me an example?

Thanks

[aksonov]

For each scene. If you want to set globally you can wrap View around Router, but current Navigation API doesn't support it, you have to wait until current master will be published as i said above.

[zelphir]

ok, which parameter should I use for each scene?

If I use the latest version 0.22.0-rc4 can I do:

<View style={{backgroundColor:'red'}}>
  <Router scenes={scenes} />
</View>

@aksonov just tried and it doesn't work :disappointed:

[aksonov]

Read my answer again. i said 'master', not rc-4...

[aksonov]

@zelphir You may use new feature #356 with 3.1.0 - you can pass some property to all scenes from Router. So you could pass sceneStyle, for example, and then use props.sceneStyle within your Scene...

[zelphir]

@aksonov thanks!

[ssomnoremac]

this works but the previous scene is visible underneath. Should be an easy fix to animate it further off screen. Is there an api for that?