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.

you need to provide `elevation` to the root element of your component. The very first `View` element. — skmak, Sep 17 '21 at 07:01
That doesn't do anything and actually that's just the background view with flex 1 — Ibtsam Ch, Sep 17 '21 at 07:17

score 5 · Accepted Answer · answered Sep 17 '21 at 07:48

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:

Elevation doesn't work properly react native

1 Answers1