react-native-expo-cropper
Version:
Recadrage polygonal d'images.
307 lines (303 loc) • 6.33 kB
JavaScript
import { StyleSheet } from 'react-native';
const DEEP_BLACK = '#060708';
const GLASS = 'rgba(20, 22, 26, 0.88)';
const SOFT_WHITE = 'rgba(255,255,255,0.9)';
const ACCENT_GREEN = '#689F38';
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
backgroundColor: DEEP_BLACK,
},
content: {
flex: 1,
width: '100%',
minHeight: 0,
},
imageRegion: {
flex: 1,
width: '100%',
},
commonWrapper: {
flex: 1,
width: '100%',
overflow: 'hidden',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
},
image: {
width: '100%',
height: '100%',
resizeMode: 'contain',
},
overlay: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1,
},
buttonContainerBelow: {
width: '100%',
backgroundColor: DEEP_BLACK,
paddingHorizontal: 16,
},
controlsRow: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
gap: 12,
},
roundControl: {
width: 54,
height: 54,
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: GLASS,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.07)',
},
enhanceButton: {
minHeight: 54,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 8,
paddingHorizontal: 16,
borderRadius: 16,
backgroundColor: GLASS,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.09)',
},
button: {
flex: 1,
minHeight: 54,
borderRadius: 16,
backgroundColor: GLASS,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.09)',
alignItems: 'center',
justifyContent: 'center',
},
rotationButton: {
minWidth: 74,
height: 54,
borderRadius: 16,
paddingHorizontal: 10,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: GLASS,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.09)',
},
buttonText: {
color: SOFT_WHITE,
fontSize: 14,
fontWeight: '600',
letterSpacing: 0.8,
textTransform: 'uppercase',
},
centerButtonsContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
tutorialContainer: {
flex: 1,
width: '100%',
paddingHorizontal: 16,
},
tutorialTopText: {
textAlign: 'center',
color: SOFT_WHITE,
fontSize: 24,
fontWeight: '700',
paddingHorizontal: 12,
},
tutorialImageCenter: {
flex: 1,
width: '100%',
alignItems: 'center',
justifyContent: 'center',
marginVertical: 12,
},
tutorialImageFull: {
width: '100%',
height: '100%',
},
tutorialButtonsRow: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
gap: 12,
},
welcomeText: {
textAlign: 'center',
color: SOFT_WHITE,
fontSize: 24,
fontWeight: '700',
paddingHorizontal: 24,
},
tutorialImage: {
width: '86%',
maxWidth: 340,
height: 220,
marginBottom: 16,
borderRadius: 12,
},
openCameraButton: {
marginTop: 18,
minHeight: 48,
paddingHorizontal: 18,
borderRadius: 14,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 8,
backgroundColor: GLASS,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.1)',
},
openCameraButtonText: {
color: SOFT_WHITE,
fontSize: 13,
fontWeight: '700',
letterSpacing: 0.6,
textTransform: 'uppercase',
},
tutorialSkipButton: {
flex: 1,
justifyContent: 'center',
},
tutorialContinueButton: {
flex: 1.4,
justifyContent: 'center',
},
cameraStatusText: {
marginTop: 10,
color: SOFT_WHITE,
fontSize: 14,
fontWeight: '600',
textAlign: 'center',
},
cameraErrorText: {
marginTop: 12,
marginHorizontal: 24,
color: 'rgba(255,170,170,0.95)',
fontSize: 13,
textAlign: 'center',
},
loadingOverlay: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.52)',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
zIndex: 9999,
},
topBar: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
zIndex: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 18,
},
topBarTitle: {
color: ACCENT_GREEN,
fontSize: 30,
fontWeight: '700',
letterSpacing: 0.3,
},
topIconButton: {
width: 36,
height: 36,
borderRadius: 12,
backgroundColor: 'rgba(0,0,0,0.35)',
alignItems: 'center',
justifyContent: 'center',
},
detectBadge: {
position: 'absolute',
top: 76,
left: 18,
zIndex: 20,
backgroundColor: 'rgba(40, 44, 50, 0.82)',
borderRadius: 16,
paddingHorizontal: 14,
paddingVertical: 10,
},
detectBadgeText: {
color: 'rgba(255,255,255,0.78)',
fontSize: 12,
fontWeight: '700',
letterSpacing: 1.6,
textTransform: 'uppercase',
},
cornerHandle: {
position: 'absolute',
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: '#DFFFD0',
borderWidth: 2,
borderColor: ACCENT_GREEN,
shadowColor: ACCENT_GREEN,
shadowOpacity: 0.55,
shadowRadius: 10,
shadowOffset: { width: 0, height: 0 },
elevation: 8,
zIndex: 25,
},
dockLabel: {
marginTop: 14,
color: 'rgba(255,255,255,0.63)',
textAlign: 'center',
fontSize: 12,
letterSpacing: 3.2,
textTransform: 'uppercase',
},
dock: {
marginTop: 12,
marginBottom: 8,
height: 76,
borderRadius: 22,
backgroundColor: 'rgba(27,30,35,0.92)',
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.08)',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
paddingHorizontal: 12,
},
dockButton: {
width: 44,
height: 44,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',
},
dockButtonActive: {
width: 74,
height: 52,
borderRadius: 16,
backgroundColor: ACCENT_GREEN,
shadowColor: ACCENT_GREEN,
shadowOpacity: 0.4,
shadowRadius: 10,
shadowOffset: { width: 0, height: 1 },
elevation: 8,
},
});
export default styles;