React-native-router-flux: RCTView has a shadow set but cannot calculate shadow efficiently

[giacomorebonato]

Version

• react-native-router-flux v3.2.6
• react-native v0.23.0-rc3
  

  Expected behaviour

Load my scenes without warning

Actual behaviour

Everything works, but I have this react-native yellow warning

View #8 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.

Steps to reproduce

This is my router configuration

export default class App extends Component {
  render () {
    return (
      <Router createReducer={reducerCreate}>
        <Scene key='root'>
          <Scene key='home' component={Home} title='Home' />
        </Scene>
      </Router>
    )
  }
}

If I remove the router and I render the Home component directly, I don't have the warning message anymore.
Do you have any clues about which component is the error referring?

[aksonov]

I think it is because transparent background for scenes. Anyway it is not this component issue but React Native one.

[ugputu18]

The problem with transparent background is described here: https://github.com/facebook/react-native/commit/e4c53c28aea7e067e48f5c8c0100c7cafc031b06. And there is such background in DefaultRenderer.js:

<NavigationCard
    {...props}
    key={"card_" + props.scene.navigationState.key}
    direction={props.scene.navigationState.direction || "horizontal"}
    panHandlers={props.scene.navigationState.panHandlers }
    renderScene={this._renderScene}
    style={{backgroundColor:"transparent"}}
/>

Maybe, we could remove that style property?

[aksonov]

If we will remove it, it will don't allow to set one background for all scenes....

[giacomorebonato]

We could encourage to re-use a container component for each scene

[cgreening]

If we will remove it, it will don't allow to set one background for all scenes....

I'm not completely sure I understand this - is there a way for setting the background on a scene?

Would it be possible to only have the transparent style if there is one background being used for all scenes.

[rturk]

I've manually removed 'transparent' form DefaultRenderer.js. I can't see any difference in my app

[giacomorebonato]

I have forked the repo and removed transparent from the DefaultRenderer.js . I don't get the error anymore.
I have a container component that I re-use in all my scenes (I would have it anyway) and it has the background.

[aksonov]

Great, please submit PR.

[harishbelamkar]

check you style type properties of View. If you are using any opacity/shadow/shadowOffset property ,remove those properties will work fine!