Layer

[satya164]

To have consistent styling on Android and iOS we need Layer component (have a better name?) which takes an elevation prop and renders a View with correct shadows on both Android and iOS.

We'll need this before working on any component with shadows.

[ahmedlhanafy]

@satya164 i think this can be a function that takes an elevation value and returns the correct shadow, doing a component here is overkill

[satya164]

@ahmedlhanafy I don't think so. I'd rather do
<Layer {...this.props} elevation={2} /> than doing
<View {...this.props} style={[ this.props.style, { elevation: elevationToShadow(2) } ]} /> to avoid unnecessary boilerplate everywhere.

[himanshusoni]

We can take inspiration from the paper from material-ui.

I second satya, on creating a component over here. It may have a certain padding and transition. Also, since elevation is android only, i'd suggest something like below for styles

// Layer component definition
render() {
    <View style=[theme.prepareElevation(this.props.elevation), { otherStyles }] >
     {this.props.children}
    </View>
}