I'm trying to style my renderItem in FlatList but elevation not working properly. Is there anything I'm wrong or this is a React Native issue?
I tested ListView too but it still not working properly
This is TodoItem component
import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
const styles = StyleSheet.create({
container: {
height: 60,
backgroundColor: 'white',
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 2, height: 2 },
shadowOpacity: 0.4,
shadowRadius: 2,
elevation: 3,
justifyContent: 'center',
paddingHorizontal: 30,
marginBottom: 12
},
text: {
fontSize: 18,
fontWeight: '400',
color: '#080808'
}
})
export default class TodoItem extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}> {this.props.text} </Text>
</View>
)
}
}
And this is where I call it in FlatList
<FlatList
data={this.props.items}
renderItem={(item) => <TodoItem key={item.index} text={item.item} />}
/>
The point is that elevation works properly if I don't use FlatList like this
<TodoItem text="Hello world" />
Most issues like this are caused by styling that is applied to your surrounding view or the row that you are trying to render.
If you add a marginHorizontal: 10
to the styles.container
for the row that should probably do it for you.
Here is a simplified example where the edges of the row are not cut off. It has a couple of tweaks to make it work, using state.items
instead of props.items
and changing the style name for the TodoItem to itemContainer
. It should give you an idea of how to implement it.
import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
state = {
items: [
'Hello'
]
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.items}
renderItem={(item) => <TodoItem key={item.index} text={item.item} />}
/>
</View>
);
}
}
class TodoItem extends React.Component {
render() {
return (
<View style={styles.itemContainer}>
<Text style={styles.text}> {this.props.text} </Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight + 10,
backgroundColor: '#ecf0f1',
},
itemContainer: {
marginHorizontal: 10,
height: 60,
backgroundColor: 'white',
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 2, height: 2 },
shadowOpacity: 0.4,
shadowRadius: 2,
elevation: 3,
justifyContent: 'center',
paddingHorizontal: 30,
marginBottom: 12
},
text: {
fontSize: 18,
fontWeight: '400',
color: '#080808'
}
});
Here is a snack showing it working https://snack.expo.io/@andypandy/flatlist-with-elevation-on-rows