@naarni/design-system
Version:
Naarni React Native Design System for EV Fleet Apps
68 lines (67 loc) • 1.61 kB
JavaScript
import { StyleSheet, Dimensions } from 'react-native';
const { height: SCREEN_HEIGHT } = Dimensions.get('window');
const SNAP_POINTS = {
CLOSED: SCREEN_HEIGHT,
HALF: SCREEN_HEIGHT * 0.5,
FULL: SCREEN_HEIGHT * 0.9,
};
export const styles = StyleSheet.create({
modalContainer: {
flex: 1,
backgroundColor: 'transparent',
},
backdrop: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
container: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
minHeight: SNAP_POINTS.HALF,
maxHeight: SNAP_POINTS.FULL,
backgroundColor: '#fff',
},
iosContainer: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: -2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
},
dragIndicatorContainer: {
alignItems: 'center',
paddingVertical: 12,
},
dragIndicator: {
width: 40,
height: 4,
borderRadius: 2,
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 16,
paddingBottom: 16,
},
closeButton: {
padding: 8,
},
content: {
flex: 1,
paddingHorizontal: 16,
},
footer: {
flexDirection: 'row',
justifyContent: 'flex-end',
padding: 16,
borderTopWidth: 1,
borderTopColor: 'rgba(0, 0, 0, 0.1)',
},
});