How to create a shadow in react-native on android?

Question

I tried to add a shadow to a View in my project, but I can't figure out why its not working as expected. The shadow only appears at the bottom and not at the sides and does not fade out:

<View
    style={{
      width: '100%',
      padding: 8,
      elevation: 20,
      backgroundColor: 'white',
      shadowColor: 'green',
      margin: 10,
    }}>
    <TextInput
      style={{
        borderWidth: 1,
        borderRadius: 5,
        width: '70%',
        borderColor: colors.createWorkout,
        backgroundColor: colors.primary,
      }}
      placeholder={'Title'}
    />
  </View>

As suggested in many other questions I am using elevation because I'm on android, but it doesn't seem to work correctly here...

Edit: The View is inside a ScollView with padding, somehow the shadow doesn't apper in the padding. If I put it in a View instead of a ScrollView it works just fine

Does this answer your question? [Creating a UI with box shadow in react native](https://stackoverflow.com/questions/45972506/creating-a-ui-with-box-shadow-in-react-native) — A G, Jun 05 '22 at 19:02
Nope, they just say that you should use elveation on android, that's what I'm doing — JaRoMaster, Jun 05 '22 at 19:06

score 1 · Answer 1 · answered Jun 05 '22 at 20:08

1

On Android, the shadow is constrained to the size of the parent view. Make sure the direct parent of the element is large enough to hold the complete shadow. This related question has more about the Android shadow behavior: Elevation shadow is clipped

answered Jun 05 '22 at 20:08

Abe

4,500
2
11
25

Is there any way I get get around this? I tried using overflow: visible, but that doesn't seem to work... – JaRoMaster Jun 05 '22 at 20:50
I don't believe so. There are usually workarounds though, and if you need help arranging things so it works, feel free to open up a question for that! – Abe Jun 05 '22 at 22:03

score 1 · Answer 2 · answered Jun 05 '22 at 21:03

1

I fixed it by using contentContainerStyle instead of style for the padding on the ScrollView parent.

answered Jun 05 '22 at 21:03

JaRoMaster

428
1
3
26

Bala Vigness · Answer 3 · 2022-06-06T08:21:03.633

I would recommend you to use react-native-cardview package.You can see much better results. Give it a try maybe this can help you.

import React, { Component } from 'react';
import {
  View,
  ScrollView,
  TextInput,
} from 'react-native';
import CardView from 'react-native-cardview';
import styles from './styles';

export default class Signup extends Component {

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: colors.whiteColor }}>
        <ScrollView contentContainerStyle={styles.signupContainer}>
            <View style={styles.signupInputs}>
              <CardView
                style={styles.cardStyle}
                cardElevation={2}
                cardMaxElevation={2}
                cornerRadius={5}
              >
                <TextInput
                  underlineColorAndroid="transparent"
                  style={[styles.signupInput, styles.commonsignupStyle]}
                  placeholder="Nom *"
                  placeholderTextColor={colors.primaryColor}
                />
              </CardView>
              <CardView
                style={styles.cardStyle}
                cardElevation={2}
                cardMaxElevation={2}
                cornerRadius={5}
              >
                <TextInput
                  underlineColorAndroid="transparent"
                  style={[styles.signupInput, styles.commonsignupStyle]}
                  placeholder="Prénom *"
                  placeholderTextColor={colors.primaryColor}
                />
              </CardView>
            </View>
        </ScrollView>
      </View>
    );
  }
}

How to create a shadow in react-native on android?

3 Answers3