FlatListにshadowがつかない時

はじめに

過去に自分がハマってしまったところの解決策をメモとして残しておきます。
結論から言うとFlatListにshadowをつけるにはbackgroundColorが必要です

ベースとするコード

FlatListであればなんでもOKです

import React from 'react';
import {StyleSheet, View, FlatList, Text} from 'react-native';

const DATA = [
  {id: 1, name: 'Michel'},
  {id: 2, name: 'Mike'},
  {id: 3, name: 'Kevin'},
  {id: 4, name: 'John'},
  {id: 5, name: 'Jessica'},
];

const Item = ({name}) => (
  <View style={styles.item}>
    <Text style={styles.name}>{name}</Text>
  </View>
);

const App = () => {
  const renderItem = ({item}) => <Item name={item.name} />;
  return (
    <View style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 120,
  },
  item: {
    borderWidth: 1,
    padding: 20,
    margin: 16,
    // shadowに関するプロパティ
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 1,
  },
  name: {
    fontSize: 32,
    textAlign: 'center',
  },
});

export default App;

こんな感じの画面表示になります
shadowに関するプロパティに数字を入れても反映されていません

影をつける

影をつけるためにはItemコンポーネントにbackgroundColorを入れてください

import React from 'react';
import {StyleSheet, View, FlatList, Text} from 'react-native';

const DATA = [
  {id: 1, name: 'Michel'},
  {id: 2, name: 'Mike'},
  {id: 3, name: 'Kevin'},
  {id: 4, name: 'John'},
  {id: 5, name: 'Jessica'},
];

const Item = ({name}) => (
  <View style={styles.item}>
    <Text style={styles.name}>{name}</Text>
  </View>
);

const App = () => {
  const renderItem = ({item}) => <Item name={item.name} />;
  return (
    <View style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 120,
  },
  item: {
    // backgroundColorが必要
    backgroundColor: 'white',
    borderWidth: 1,
    padding: 20,
    margin: 16,
    // shadowに関するプロパティ
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 1,
  },
  name: {
    fontSize: 32,
    textAlign: 'center',
  },
});

export default App;

実際の画面はこんな感じになります

過去の自分はbackgroundColorを入れていなかったので、うまく表示されませんでした
学習当初はこういうのにも時間がかかってしまうものですよねー😱