React Native elevation StyleSheet not working in FlatList

All we need is an easy explanation of the problem, so here it is.

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" />

What I excepted
What I see

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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

Method 2

there is a margin property that creates problem for me so changed the property and put this into last.

first code

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',}, 
content:{
flex:1,
padding: 40,
backgroundColor:'pink',
},
list: {
marginTop: 20,
flex:1,
backgroundColor:'yellow',
},});

New code

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',}, 
content:{
flex:1,
padding: 40,
backgroundColor:'pink',
},
list: {

flex:1,
backgroundColor:'yellow',
marginTop: 20,
},});

if anyone can clarify it why it is happening.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply