CODEWITHSUNDEEP
androidreact-nativeandroid-layoutandroid-elevation
Squeaky
Squeaky

Reputation: 838

React-native <View> component's "elevation" style is causing ugly shadows

The elevation style attribute enables box-shadows for Android 5.0+.

Am I doing something unusual with 'elevation' here to cause the ugliness that can be seen in the screenshot below? Also, is there any way to define a shadow-offset?

The emulator is running 6.0 (> 5.0), so that's not the problem. I'm running react-native 25.1.

  "dependencies": {
    "react": "^0.14.8",
    "react-native": "^0.25.1",
    "react-native-gcm-android": "^0.2.0",
    "react-native-material-design": "^0.3.5",
    "react-native-system-notification": "^0.1.10",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  }

Here's react-native's documentation for View component styling

Here's my render method:

  render() {
    return (
      <ListView
        dataSource={alertData}
        renderRow={(rowData) =>
          <View style={style.cardContainer}>
            <Text>{rowData.blah}</Text>
            <Text>{"#" + rowData.foo}</Text>
            <Text>{rowData.blah}</Text>
            <Text>{rowData.foo}</Text>
            <Text>{rowData.baz}</Text>
          </View>
        }
      />
    );
  }

And the style declaration:

var style = StyleSheet.create({
  cardContainer : {
    elevation   : 3,
    flex        : 1,
    margin      : 10,
    padding     : 10,
    borderWidth : 2,
    borderColor : beeStyles.colors.lightGray
  }
});

Which somehow it results in this ...

enter image description here

Upvotes: 14

Views: 26416

Answers (2)

Gammer
Gammer

Reputation: 5608

You can add background color: backgroundColor : '#000';

A nice handy component :

import React from 'react'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'


const SingleSidedShadowCard = ({ children, style }) => (
    <View style={[ styles.container, style ]}>
        { children }
    </View>
);

const styles = StyleSheet.create({
    container:{
        overflow: 'hidden',
        paddingBottom: 5,
    }
});

SingleSidedShadowCard.propTypes = {
    children: PropTypes.element,
    style: ViewPropTypes.style,
};

export default SingleSidedShadowCard;

Upvotes: 0

Squeaky
Squeaky

Reputation: 838

The missing piece is backgroundColor. Adding backgroundColor : '<anything>' style to the View container makes those weird inner shadows disappear.

Upvotes: 46

Related Questions