[v4] Android shadows are barely noticeable

Bug

On Android, shadows applied to the BottomSheetModal are virtually invisible, even with a very high value of elevation.

To make sure no other library or config was interfering, I started a fresh project under React Native 0.68 with only the minimal libraries and files. I then copy-pasted the usage example provided in your documentation, and applied some shadow styles to the modal component. I made sure they were visible by putting high opacity and elevation values, as well as a low radius. I tried with and without shadowColor, as well as with and without backgroundColor. The used code can be found at the end of this report.

As you can see on this screenshot, the iOS shadow is correctly visible, but the Android one is not. If I use an even lower elevation value, the shadow will completely disappear and the modal will blend into the app background.

I also made sure this wasn’t an Android or React Native bug by applying shadows to other objects (like buttons and views), which worked fine.

I found the ticket #734, and especially this comment pretending to solve the issue, but as you can see in my MCVE it didn’t work for me.

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.2
react-native	0.68.2
react-native-reanimated	2.9.1
react-native-gesture-handler	2.5.0

Steps To Reproduce

1. Fetch the usage example from the doc
2. Apply shadows styling to the BottomSheetModal style prop.
3. Run on Android and observe the (lack of) result

Describe what you expected to happen:

1. I was expecting the shadow to be more visible on Android

Reproducible sample code

Minimal sample code

import React, {useCallback, useMemo, useRef} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import {BottomSheetModal, BottomSheetModalProvider} from '@gorhom/bottom-sheet';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

const App = () => {
  // ref
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, [bottomSheetModalRef]);

  // renders
  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <BottomSheetModalProvider>
        <View style={styles.container}>
          <Button onPress={handlePresentModalPress} title="Present Modal" />
          <BottomSheetModal
            ref={bottomSheetModalRef}
            index={1}
            style={styles.sheet}
            snapPoints={snapPoints}>
            <View style={styles.contentContainer}>
              <Text>Awesome 🎉</Text>
            </View>
          </BottomSheetModal>
        </View>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  sheet: {
    backgroundColor: 'white',
    borderRadius: 15,
    shadowOpacity: 0.37,
    shadowRadius: 5,
    shadowColor: 'blue',
    elevation: 5,
  },
  container: {
    flex: 1,
    padding: 24,
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

export default App;

[afizboltz]

maybe you can add borderWidth: 0 in style. mine showing the shadow for android emulator

[gabriel-moresco]

some workaround?