box-shadow:inset for react-native

20,983

Increase the borderWidth.

box: {
margin: 10,
flex: 1,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 30,
overflow: 'hidden',
shadowColor: 'black',
shadowRadius: 10,
shadowOpacity: 1,
}

enter image description here

Share:
20,983
Brackets
Author by

Brackets

Updated on July 27, 2021

Comments

  • Brackets
    Brackets almost 3 years

    I am trying to implement box inner shadow similar to what you can achieve using box-shadow:inset in CSS. I tried the following, but I can't get it the shadow more prominent and darker. https://rnplay.org/apps/EHvL4g

    var styles = StyleSheet.create({
      container: {
        flex: 1,
      },
        box: {
        margin: 20,
        flex: 1,
        backgroundColor: 'transparent',
        borderColor: 'white',
        borderWidth: 1,
        overflow: 'hidden',
        shadowColor: 'black',
        shadowRadius: 10,
        shadowOpacity: 1,
        },
    });