React Native shadow not displaying

Question

I'm using shadows on a lot of my views and buttons and they work fine. But it isn't working on this autocomplete list element which is an absolutely positioned FlatList with a zIndex (I removed zIndex, and also removed position 'absolute' and the shadow still does not display). This is for iOS. I have not tried on Android.:

Code:

let PresentationalLocationView = (props: PresentationalLocationViewProps) => {
  return (
    <View>
      <Input
        isValid={props.isValid}
        label={'Shop / Restaurant'}
        value={props.value}
        onChangeText={(text) => props.onChangeText(text)}
        deleteText={() => {
          props.onChangeText('')
          props.updateLocationAutocompletePlace({})
        }}
        placeholder={props.placeholder}
      />
      <FlatList
        keyboardShouldPersistTaps={true}
        data={props.autocompleteResults.predictions}
        renderItem={(listItemValue) =>
          renderAutocompleteItem(props, listItemValue)
        }
        style={{
          ...autocompleteStyle.listView(props),
          ...Shadows.shadedSmall,
          backgroundColor: 'white'
        }}
      />
    </View>
  )
}

const renderAutocompleteItem = (
  props: PresentationalLocationViewProps,
  listItemValue: { item: { description: string, place_id: string } }
) => (
  <View style={{ ...Shadows.shadedSmall, backgroundColor: 'white' }}>
    <TouchableOpacity
      onPress={() => {
        props.onListItemSelect(listItemValue.item)
      }}
      style={{
        height: 40,
        display: 'flex',
        justifyContent: 'center',
        ...Shadows.shadedSmall,
        backgroundColor: 'white'
      }}>
      <Text style={styles.label} numberOfLines={1}>
        {listItemValue.item.description}
      </Text>
    </TouchableOpacity>
  </View>
)

export const shadedSmall = {
  elevation: 3,
  shadowColor: Colors.black,
  shadowOffset: {
    width: 0,
    height: 3
  },
  shadowRadius: 2,
  shadowOpacity: 0.2
}

As you can see I'm just trying to apply the shadow to every container of that white FlatList in the image. Why doesn't it work, when it works on my other buttons and views?

Answer 1

The shadow didn't work on the FlatList. But it worked on View. I wrapped a FlatList in a styled View:

  <View
    style={{
      elevation: 3,
      shadowColor: Colors.black,
      shadowOffset: {
        width: 0,
        height: 3
      },
      shadowRadius: 2,
      shadowOpacity: 0.2,
      ...autocompleteStyle.listView(props)
    }}>
    <FlatList
      keyboardShouldPersistTaps={true}
      data={props.autocompleteResults.predictions}
      renderItem={(listItemValue) =>
        renderAutocompleteItem(props, listItemValue)
      }
    />
  </View>