Shadow not working on Android

Bug

Trying to follow guide on adding shadow to BottomSheetModal, only iOS seems to work.

Environment info

Library	Version
@gorhom/bottom-sheet	4.1.3
react-native	0.65.1
react-native-reanimated	2.2.3
react-native-gesture-handler	1.10.3

Steps To Reproduce

1. Just use the code in this link: https://gorhom.github.io/react-native-bottom-sheet/modal/usage
2. Add the style to BottomSheetModal

            shadowColor: 'pink',
            shadowOffset: {
              width: 0,
              height: 12,
            },
            shadowOpacity: 0.58,
            shadowRadius: 16.0,

            elevation: 24,

1. See the result

Describe what you expected to happen:

1. Android should show the shadow correctly

Reproducible sample code

Snack link

[rmathias86]

I solved the issue by adding a background colour

style={{
        backgroundColor: 'white',  // <==== HERE
        borderRadius: 24,
        shadowColor: '#000000',
        shadowOffset: {
          width: 0,
          height: 8,
        },
        shadowOpacity: 0.1,
        shadowRadius: 24,
        elevation: 10,
      }}

[fiznool]

The elevation property on Android is very inflexible, and so I opted for a custom handle component with a shadow applied using react-native-shadow-2.

// SheetHandle.tsx

import React, { FC } from 'react';
import { StyleSheet, View } from 'react-native';
import { Shadow } from 'react-native-shadow-2';

const RADIUS = 24;

const SheetHandle: FC = () => {
  return (
    <Shadow
      sides={['top']}
      corners={['topLeft', 'topRight']}
      radius={RADIUS}
      viewStyle={styles.shadowContainer}>
      <View style={styles.handleContainer}>
        <View style={styles.handle} />
      </View>
    </Shadow>
  );
};

const styles = StyleSheet.create({
  shadowContainer: {
    width: '100%',
  },
  handleContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    borderTopLeftRadius: RADIUS,
    borderTopRightRadius: RADIUS,
  },
  handle: {
    width: 30,
    height: 4,
    backgroundColor: 'gray',
    borderRadius: 4,
  },
});

export default SheetHandle;

The SheetHandle component is then applied to the BottomSheet via the handleComponent prop:

// App.tsx

import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

import SheetHandle from './SheetHandle';

const App = () => {
  return (
    <View style={styles.container}>
      <BottomSheet
        index={1}
        snapPoints={['25%', '50%']}
        handleComponent={SheetHandle}
      >
        <View style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'white',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

export default App;

The results:

iOS	Android