React native elevation - shadow appears in boarder

Question

I tried to add a shadow using the following code:

<View style={{alignItems: 'center'}}>
    <View
      style={{
        width: '95%',
        borderWidth: 1,
        elevation: 5,
        shadowColor: 'black',
        shadowRadius: 10,
      }}>
      <TextInput
        style={{
          borderColor: colors.primary,
          borderWidth: 1,
          color: 'black',
          fontSize: 18,
          height: 64,
        }}
        onChange={input => this.onChange(input.nativeEvent.text)}
        value={this.state.input}
      />
      <View>{this.state.results}</View>
  </View>
</View>

Somehow, the elevation effects the width and hight of the inner "box":

When I use elevation: 10:

When I use elevation: 0:

How can I set the shadow to be outside the boarder?

Answer 1

After a lot of testing, I figured out the problem was that there's no backgroundColor applied to the View with the shadow.

Now the shadow seems to work as expected