Elevation doesn't work properly react native

Question

I am trying to give shadow to my custom card component but the shadow cuts down the view like this:

Here is my code

import React from 'react'
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native'

const { width } = Dimensions.get('window')

export default function CardCus() {
    return (
        <View style={{
            justifyContent: 'center', alignItems: 'center', padding: 10
        }}>

            <View style={styles.container}>
                <View style={{ width: 110, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, }}>
                    <Image style={{ width: '100%', height: '100%', borderTopLeftRadius: 10, borderBottomLeftRadius: 10 }} source={{ uri: 'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' }} />
                </View>
                <View style={{ margin: 10, padding: 5 }}>
                    <Text style={styles.title}>Title</Text>
                    <Text>Separator</Text>
                    <Text>Title</Text>
                    <Text>Title</Text>
                </View>
            </View>

        </View>
    )
}

const styles = StyleSheet.create(
    {
        container: {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.5,
            shadowRadius: 2,
            elevation: 2,
            flexDirection: 'row',
            borderRadius: 10,
            borderColor: 'black',
            borderWidth: 1,
            height: 110,
            width: width - 10,

        },
        title: {
            fontWeight: 'bold'
        }
    }
)

I have tried many different style settings but none of them work. Is there a way to solve this issue? Thanks in advance.

Answer 1

So related to your question, it was hard to understand at first.

I just added the properties zIndex and backgroundColor to the container style and increased the value of the elevation and now it looks better. Also improved the readability.

See the comments in the improved code below:

import React from 'react';
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native';

export default function CardCus() {
  const imgUri =
    'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940';

  return (
    <View style={styles.main}>
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <Image style={styles.image} source={{ uri: imgUri }} />
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.title}>Title</Text>
          <Text>Separator</Text>
          <Text>Title</Text>
          <Text>Title</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 10, // changed to a greater value
    flexDirection: 'row',
    borderRadius: 10,
    borderColor: 'black',
    borderWidth: 1,
    height: 110,
    width: Dimensions.get('window').width - 10,
    zIndex: 99, // added zIndex
    backgroundColor: 'white', // added a background color
  },
  title: {
    fontWeight: 'bold',
  },
  imageContainer: {
    width: 110,
    borderTopLeftRadius: 10,
    borderBottomLeftRadius: 10,
    backgroundColor: 'white',
  },
  image: {
    width: '100%',
    height: '100%',
    borderTopLeftRadius: 10,
    borderBottomLeftRadius: 10,
  },
  textContainer: {
    margin: 10,
    padding: 5,
    backgroundColor: 'white',
  },
  main: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
  },
});

You can adjust the values to make the shadow darker. And this is how it looks: