Effects
elevation (Android only)
consider use shadow instead (cross platform).
elevation[index: number]
set the elevation of an element:
import { View } from 'react-native'
import C from 'consistencss'
...
return (
<View style={C.elevation1}>
)
elevation1
returns { elevation: 1 }elevation
returns { elevation: 2 }- ...
shadow (Android and iOS)
shadow[size: string]
shadow[Xs | Sm | Md | Lg | Xl | 2xl | None]
set shadow for an element:
elevation on Android, shadow on iOS.
import { View } from 'react-native'
import C from 'consistencss'
...
return (
<View style={C.shadowMd}>
)
shadowMd
returns { elevation: 4, shadowColor: 'black, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.3, shadowRadius: 4, }shadowSm
returns returns { elevation: 2, shadowColor: 'black, shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 2, }- ...
you could also generate your own shadow schema with
boxShadow
method.
opacity:
opacity[alpha: number]
set the visibility of an element:
import { View } from 'react-native'
import C from 'consistencss'
...
return (
<View style={C.opacity100}>
)
opacity100
returns { opacity: 1 }opacity50
returns { elevation: 0.5 }opacity25
returns { elevation: 0.25 }- ...