Elevation/Shadow not working on Android

[wilkinson4]

Current behaviour

We would like to add a drop shadow to the SegmentedButtons component for our react-native Android app. After looking through the source code I realized that the SegmentedButtons component is just a View. So, locally I tested out rendering a plain View component with a shadow/elevation, and it works as expected in my Android emulator. However, if I add any shadow/elevation styles to the style prop of the SegmentedButtons component they do not apply on Android. So, it seems like there is a bug with how SegmentedButtons are implementing the View component.

Expected behaviour

A drop shadow is rendered similar to the elevated mode for the Button component. Would be nice if we could add an elevated mode to this component or something.

How to reproduce?

Here is the code I ran in my Expo Snack:

import { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { SegmentedButtons, Button } from 'react-native-paper';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {
  const [buttonValue, setButtonValue] = useState(null);
  return (
    <SafeAreaProvider>
      <View style={styles.container}>
        <SegmentedButtons
          value={buttonValue}
          style={styles.segmentedButtons}
          onValueChange={setButtonValue}
          buttons={[
            {
              value: true,
              label: 'True',
              style: { borderWidth: 2 },
              showSelectedCheck: true,
            },
            {
              value: false,
              label: 'False',
              style: { borderWidth: 2 },
              showSelectedCheck: true,
            },
          ]}
        />
      </View>
    </SafeAreaProvider>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20
  },
  segmentedButtons: {
    elevation: 1,
    backgroundColor: 'white',
    borderRadius: 20,
    shadowOpacity: 0.8,
    shadowColor: 'black',
    shadowOffset: {
      width: 1,
      height: 5,
    },
  },
});

Preview

Android:

IOS(Working):

Web??:

What have you tried so far?

Your Environment

software	version
ios	x
android	x
react-native	x.x.x
react-native-paper	5.10.5
node	x.x.x
npm or yarn	x.x.x
expo sdk	52.0.0

[BogiKay]

Hey! Have you tried using boxShadow? It should do its job.

More info: https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture#box-shadow-and-filter-style-props

[wilkinson4]

Ahh, that does work. I also noticed that react-native-shadow-2 has a message that in version 0.76 of react native shadows are now cross-platform. Thanks again for your help!