I am working on a react native project. I want to provide shadow to view. But it was spreading away like this.

But what I want is:

I got the answer that I need to add background color here: https://taketo.site/solved And that actually solves my problem but only when I add background color from the stylesheet. But my problem is that I want to get the background color from props as everytime the view is rendered, it won't have the same bg color, it would be different. But when I try to provide bg color from props, it again gives shadow like in the first image. Here's my code:

component file:

import React from 'react';
import { View } from 'react-native';
import { styles } from './styles';

class ShadowCard extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View
        style={[
          styles.card,
          {
            width: this.props.width,
            height: this.props.height,
            backgroundColor: this.props.backgroundColor,
          },
        ]}>
        {this.props.children}
      </View>
    );
  }
}

export default ShadowCard;

stylesheet file:

import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  card: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 10,
    borderRadius: 12,
    margin: 12,
  },
});

So what should I do so that I can take the bg color from props and the shadow shows up like in second image?