Invariant Violation: "elevation" is not a valid style property - react-native

Question

Iam trying to put some shadow and elevation to my card, but it show an error which is "elevation" is not a valid style property...... When i added the style elevation this error will appear insead of the elevation
/**
* Created by Yasi Ahmed on 05-12-2015.
*/
'use strict';
var React = require('react-native');
var BloggerApi = require('./BloggerApi');
var HTMLView = require('react-native-htmlview');
var striptags = require('striptags');
var moment = require('moment');
var {
ListView,
StyleSheet,
Text,
View,
TouchableOpacity,
} = React;
var PostListView = React.createClass({
getInitialState: function () {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
},
fetchData: function () {
var items = require("./dummy/posts.json");
this.setState({
dataSource: this.state.dataSource.cloneWithRows(items.items),
loaded: true
});
/*
BloggerApi.fetchPosts()
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.items),
loaded: true
});
})
.done();
*/
},
componentDidMount: function () {
this.fetchData();
},
render: function () {
if (!this.state.loaded) {
return this.renderLoadingView();
} else {
console.log(this.state)
}
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderPostItem}
style={styles.listView}
/>
);
},
/*
<CoreShadowView cornerRadius={4} shadowRadius={4} style={[{backgroundColor: '#FFFFFF'}]}>
<Text>D. 完全知道</Text>
</CoreShadowView>
*/
renderPostItem: function (post) {
return (
<TouchableOpacity>
<View style={styles.rightContainer}>
<Text style={styles.title}>{post.title}</Text>
<View style={styles.content}>
<Text>
{striptags(post.content).substring(0, 100)}........
</Text>
</View>
<View style={styles.bottomContainer}>
<Text style={styles.date}>{moment(post.published).format("MMM Do YY, h:mm a")}</Text>
<Text style ={styles.read_more}>Read more...</Text>
</View>
</View>
</TouchableOpacity>
);
},
renderLoadingView: function () {
return (
<View style={styles.container}>
<Text>
Loading posts...
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
rightContainer: {
borderWidth: .5,
borderColor: '#000',
paddingLeft: 15,
paddingRight: 15,
flex: 1,
marginBottom:5,
marginLeft:5,
marginRight:5,
borderRadius: 4,
borderTopLeftRadius: 3,
borderTopRightRadius: 3,
borderBottomLeftRadius: 3,
borderBottomRightRadius: 3,
shadowColor: '#000',
shadowOffset: {width: 2, height: 2},
shadowOpacity: 1,
shadowRadius: 5,
elevation: 10
},
bottomContainer: {
flexDirection: 'row',
paddingLeft: 15
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center'
},
date: {
paddingLeft: 25,
fontSize: 14,
color: '#2196f3',
marginBottom: 8
},
read_more: {
paddingRight: 50,
textAlign: 'right',
fontSize: 14,
color: '#2196f3'
},
content: {
paddingLeft: 25,
height: 100,
paddingRight: 25
},
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF'
}
});
module.exports = PostListView;

Answer 1

I'm guessing that #HarryMoreno believed that it wasn't a supported property because at the time it hadn't made it into the documentation. However, it is a supported property as of 0.16 for Views, as can be seen here: https://facebook.github.io/react-native/docs/view.html#style.
Don't know of course if you're still running into this error after updating to the latest build (currently 0.17) but if so might it be because you're building for iOS? The documentation doesn't say this is an Android-only property (in fact it hardly says anything at all :P ) but I believe the original intent was to implement shadows on Android as per this discussion: https://github.com/facebook/react-native/pull/4180

Answer 2

elevation is not a supported css style in React Native. For a list of supported properties see https://facebook.github.io/react-native/docs/style.html#supported-properties