Shadow (elevation) gets darker on Android every time a FlatList updates in Android

[Ved-Ravi]

Description

When I use a View with elevation (to create a shadow) and put a FlatList inside it, the shadow around the box keeps getting darker every time I add a new item to the list.

This happens only on Android. It looks like the shadow is being redrawn again and again, instead of staying the same.

React Native version:
Tested on 0.81.1 (also happens on earlier versions)

Platform:
✅ Android
❌ iOS (not affected)

Steps to reproduce

Simple Example to Reproduce

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

const App = () => {
  const [data, setData] = useState([1]);

  return (
    <View style={styles.container}>
      <Button
        title="+"
        onPress={() =>
          setData(prev => [...prev, prev[prev.length - 1] + 1])
        }
      />

      <View style={styles.shadowBox}>
        <FlatList
          data={data}
          keyExtractor={item => item.toString()}
          renderItem={({ item }) => (
            <View style={styles.listItem}>
              <Text>{item}</Text>
            </View>
          )}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  shadowBox: {
    marginTop: 20,
    backgroundColor: '#fff',
    elevation: 10,
    borderRadius: 8,
  },
  listItem: {
    padding: 16,
  },
});

export default App;

React Native Version

0.81.1

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.6.1
  CPU: (11) arm64 Apple M3 Pro
  Memory: 329.97 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.16.0
    path: ~/.nvm/versions/node/v22.16.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.16.0/bin/npm
  Watchman:
    version: 2025.05.26.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/test/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK:
    API Levels:
      - "32"
      - "33"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 35.0.1
      - 36.0.0
    System Images:
      - android-35 | Intel x86_64 Atom
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
      - android-36 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.25410.109.2511.13752376
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/test/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.1
    wanted: 0.81.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

❗ What Actually Happens

The first time it renders, the shadow looks fine.

After pressing the "+" button a few times (adding new items), the shadow gets darker and darker.

It seems like the shadow is being layered or redrawn every time the list updates.

MANDATORY Reproducer

https://snack.expo.dev/@vpravi/flatlistshadowbug

Screenshots and Videos

[atulgpt17]

Hi thanks for creating the snack link, I am able to repro this issue

[cortinico]

That's how shadows (and elevation) work on Android. The element has a darker shadows as it approaches the bottom of the screen. You can read more about it on this blogpost: https://touchlab.co/2016-1-consistent-lighting-in-material-design