NavigationCard doesn't allow custom styles

[alexmngn]

trafficstars

The NavigationCard doesn't allow custom style. I'm trying to have a transparent background for my navigation but I can't pass any style to do that

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

So I can't pass own style to NavigationCard

[ericvicenti]

Can you make a pull request that adds a prop for this? Please cc me or @hedgerwang and we will review and merge it.

Or, you can copy NavigationCard into your own project and customize as you'd wish.

[hedgerwang]

NavigationCardStack is just a NavigationAnimatedView that uses NavigationCard to wrap its scenes, and it also comes with few built-in canned animation and gesture.

Adding one prop to toggle the gesture seems tempting, but people will keep adding more props to allow "customization", and we still won't have a card stack that fits everyone's need.

Alternatively, you should build your own card stack, then you'd be able to choose whatever gesture of style that you like.

[zackify]

All I want to do is set the background to white. When I do that, the gestures do not work correctly.

[hedgerwang]

@zackify :

Would it work if you apply the style to the scene that covers the card?

Otherwise, you'd have to manually provide the animation style.

renderScene(props) {
  return (
    <NavigationCard 
      {...props}
      style={[
        yourStyle,  
        NavigationCardStackStyleInterpolator.forHorizontal(props)
      ]}
    />
  );
}

[zackify]

I ended up applying it to the view itself and setting the height equal to the device height. It's not really an issue now. On Fri, Apr 22, 2016 at 16:53 Hedger Wang [email protected] wrote:

@zackify https://github.com/zackify :

Would it work if you apply the style to the scene that covers the card?

Otherwise, you'd have to manually provide the animation style.

renderScene(props) { return ( <NavigationCard {...props} style={[ yourStyle, NavigationCardStackStyleInterpolator.forHorizontal(props) ]} /> ); }

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/ericvicenti/navigation-rfc/issues/54#issuecomment-213585093