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

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

CodePudding user response：

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

CodePudding user response：

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