RN Utility Style

# Decoration

# Opacity

Class Style
opacity-0 opacity: 0
opacity-25 opacity: 0.25
opacity-50 opacity: 0.5
opacity-75 opacity: 0.75
opacity-100 opacity: 1

# Shadow

There might be a slight different on how shadow work in Android and IOS due to React-Native rendering mthod

Class Style
shadow-none elevation: 0,
shadowOpacity: 0
shadow shadowColor: #000,
shadowOffset: {
width: 0,
height: 1
shadowOpacity: 0.22,
},
shadowRadius: 2.22,
elevation: 3
shadow-xs shadowColor: #000,
shadowOffset: {
width: 0,
height: 1
shadowOpacity: 0.18,
},
shadowRadius: 1,
elevation: 1
shadow-sm shadowColor: #000,
shadowOffset: {
width: 0,
height: 1
shadowOpacity: 0.2,
},
shadowRadius: 1.41,
elevation: 2
shadow-md shadowColor: #000,
shadowOffset: {
width: 0,
height: 2
shadowOpacity: 0.23,
},
shadowRadius: 2.62,
elevation: 4
shadow-lg shadowColor: #000,
shadowOffset: {
width: 0,
height: 2
shadowOpacity: 0.25,
},
shadowRadius: 3.84,
elevation: 5
shadow-xl shadowColor: #000,
shadowOffset: {
width: 0,
height: 3
shadowOpacity: 0.27,
},
shadowRadius: 4.65,
elevation: 6
shadow-2xl shadowColor: #000,
shadowOffset: {
width: 0,
height: 4
shadowOpacity: 0.3,
},
shadowRadius: 4.65,
elevation: 8

← Interactivity →