react-native-expo-cropper 1.2.44 → 1.2.46

package/src/ImageCropperStyles.js

@@ -1,244 +1,255 @@
-import { StyleSheet, Dimensions } from 'react-native';
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
-const IMAGE_HEIGHT = SCREEN_HEIGHT;
-const IMAGE_WIDTH = SCREEN_WIDTH;
-
-const PRIMARY_GREEN = '#198754';
-const DEEP_BLACK = '#0B0B0B';
-const GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'flex-start', // ✅ Start from top, allow content to flow down
-    backgroundColor: DEEP_BLACK,
-  },
-  buttonContainer: {
-    position: 'absolute',
-    bottom: 50,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 10,
-    zIndex: 10,
-    gap: 10,
-  },
-  buttonContainerBelow: {
-    // ✅ Buttons positioned BELOW image, not overlapping, above Android navigation bar
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 10,
-    paddingTop: 16,
-    gap: 8,
-    backgroundColor: DEEP_BLACK, // Fond noir pour séparer visuellement
-  },
-  iconButton: {
-    backgroundColor: PRIMARY_GREEN,
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 5,
-  },
-  rotationButton: {
-    // Cercle, même couleur que Reset/Confirm (#549433), même hauteur que les autres boutons
-    backgroundColor: '#549433',
-    width: 56,
-    height: 48, // Même hauteur approximative que les boutons rectangulaires (padding 10 + texte)
-    borderRadius: 28,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  button: {
-    flex: 1,
-    minHeight: 48, // Même hauteur que le bouton de rotation
-    paddingVertical: 12,
-    paddingHorizontal: 10,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#549433",
-    borderRadius: 5,
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 18,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  iconText: {
-    color: PRIMARY_GREEN,
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  imageContainer: {
-  width: IMAGE_WIDTH,
-  height: "80%",
-  justifyContent: 'center',
-  alignItems: 'center',
-  overflow: 'hidden',
-  backgroundColor: 'black',
-},
-
-  image: {
-  width: '100%',
-  height: '100%',
-  resizeMode: 'contain',
-},
-
-  overlay: {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  zIndex: 1,
-},
-
-  croppedImage: {
-    width: IMAGE_WIDTH,
-    height: IMAGE_HEIGHT,
-    resizeMode: 'cover',
-    marginTop: 10,
-    borderWidth: 2,
-    borderColor: 'white',
-    borderRadius: 10,
-  },
-  fixedButtonContainer: {
-    position: 'absolute',
-    bottom: 100,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    gap: 10,
-    paddingHorizontal: 10,
-  },
-  fixedButton: {
-    backgroundColor: PRIMARY_GREEN,
-    paddingVertical: 18,
-    paddingHorizontal: 30,
-    borderRadius: 12,
-    margin: 6,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 0,
-    width: SCREEN_WIDTH * 0.4,
-    height: 60,
-  },
-  centerButtonsContainer: {
-    position: 'absolute',
-    bottom: 20,
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 10,
-    gap: 10,
-  },
-  welcomeText: {
-    position: 'absolute',
-    top: '40%',
-    left: 20,
-    right: 20,
-    textAlign: 'center',
-    color: GLOW_WHITE,
-    fontSize: 40,
-    fontWeight: '800',
-    zIndex: 10,
-  },
-  startButton: {
-    backgroundColor: PRIMARY_GREEN,
-    paddingVertical: 18,
-    paddingHorizontal: 30,
-    borderRadius: 12,
-    margin: 6,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 0,
-    width: SCREEN_WIDTH * 0.9,
-    height: 70,
-  },
-  startButtonText: {
-    color: 'white',
-    fontSize: 18,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-
-  loadingOverlay: {
-  flex: 1,
-  backgroundColor: 'rgba(0,0,0,0.5)',
-  justifyContent: 'center',
-  alignItems: 'center',
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  zIndex: 9999,
-},
-loadingGif: {
-  width: 120,
-  height: 120,
-},
-
-fullscreenImageContainer: {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: SCREEN_WIDTH,
-  height: SCREEN_HEIGHT,
-  backgroundColor: 'black',
-  justifyContent: 'center',
-  alignItems: 'center',
-  zIndex: 9999,
-},
-previewContainer: {
-  flex: 1,
-  backgroundColor: DEEP_BLACK,
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '100%',
-},
-previewImage: {
-  width: SCREEN_WIDTH,
-  height: '80%',
-},
-previewButtonContainer: {
-  position: 'absolute',
-  bottom: 50,
-  left: 0,
-  right: 0,
-  flexDirection: 'row',
-  justifyContent: 'space-around',
-  paddingHorizontal: 20,
-},
-previewButton: {
-  backgroundColor: PRIMARY_GREEN,
-  width: 60,
-  height: 60,
-  borderRadius: 30,
-  alignItems: 'center',
-  justifyContent: 'center',
-},
-useButton: {
-  backgroundColor: GLOW_WHITE,
-},
-
-
-});
-
-export default styles;
+import { StyleSheet, Dimensions } from 'react-native';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+const IMAGE_HEIGHT = SCREEN_HEIGHT;
+const IMAGE_WIDTH = SCREEN_WIDTH;
+
+const PRIMARY_GREEN = '#198754';
+const DEEP_BLACK = '#0B0B0B';
+const GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-start', // ✅ Start from top, allow content to flow down
+    backgroundColor: DEEP_BLACK,
+  },
+  // Wrapper for crop preview (9/16, same as CustomCamera); width set dynamically for tablet
+  commonWrapper: {
+    aspectRatio: 9 / 16,
+    borderRadius: 30,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    backgroundColor: 'black',
+    marginBottom: 0,
+  },
+  buttonContainer: {
+    position: 'absolute',
+    bottom: 50,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    zIndex: 10,
+    gap: 10,
+  },
+  buttonContainerBelow: {
+    // ✅ Buttons positioned BELOW image, not overlapping, above Android navigation bar
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingTop: 16,
+    gap: 8,
+    backgroundColor: DEEP_BLACK, // Fond noir pour séparer visuellement
+  },
+  iconButton: {
+    backgroundColor: PRIMARY_GREEN,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 5,
+  },
+  rotationButton: {
+    // Cercle, même couleur que Reset/Confirm (#549433), même hauteur que les autres boutons
+    backgroundColor: '#549433',
+    width: 56,
+    height: 48, // Même hauteur approximative que les boutons rectangulaires (padding 10 + texte)
+    borderRadius: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    flex: 1,
+    minHeight: 48, // Même hauteur que le bouton de rotation
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#549433",
+    borderRadius: 5,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  iconText: {
+    color: PRIMARY_GREEN,
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  imageContainer: {
+  width: IMAGE_WIDTH,
+  height: "80%",
+  justifyContent: 'center',
+  alignItems: 'center',
+  overflow: 'hidden',
+  backgroundColor: 'black',
+},
+
+  image: {
+  width: '100%',
+  height: '100%',
+  resizeMode: 'contain',
+},
+
+  overlay: {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  zIndex: 1,
+},
+
+  croppedImage: {
+    width: IMAGE_WIDTH,
+    height: IMAGE_HEIGHT,
+    resizeMode: 'cover',
+    marginTop: 10,
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 10,
+  },
+  fixedButtonContainer: {
+    position: 'absolute',
+    bottom: 100,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    gap: 10,
+    paddingHorizontal: 10,
+  },
+  fixedButton: {
+    backgroundColor: PRIMARY_GREEN,
+    paddingVertical: 18,
+    paddingHorizontal: 30,
+    borderRadius: 12,
+    margin: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 0,
+    width: SCREEN_WIDTH * 0.4,
+    height: 60,
+  },
+  centerButtonsContainer: {
+    position: 'absolute',
+    bottom: 20,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 10,
+    gap: 10,
+  },
+  welcomeText: {
+    position: 'absolute',
+    top: '40%',
+    left: 20,
+    right: 20,
+    textAlign: 'center',
+    color: GLOW_WHITE,
+    fontSize: 40,
+    fontWeight: '800',
+    zIndex: 10,
+  },
+  startButton: {
+    backgroundColor: PRIMARY_GREEN,
+    paddingVertical: 18,
+    paddingHorizontal: 30,
+    borderRadius: 12,
+    margin: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 0,
+    width: SCREEN_WIDTH * 0.9,
+    height: 70,
+  },
+  startButtonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+
+  loadingOverlay: {
+  flex: 1,
+  backgroundColor: 'rgba(0,0,0,0.5)',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: 9999,
+},
+loadingGif: {
+  width: 120,
+  height: 120,
+},
+
+fullscreenImageContainer: {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT,
+  backgroundColor: 'black',
+  justifyContent: 'center',
+  alignItems: 'center',
+  zIndex: 9999,
+},
+previewContainer: {
+  flex: 1,
+  backgroundColor: DEEP_BLACK,
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+},
+previewImage: {
+  width: SCREEN_WIDTH,
+  height: '80%',
+},
+previewButtonContainer: {
+  position: 'absolute',
+  bottom: 50,
+  left: 0,
+  right: 0,
+  flexDirection: 'row',
+  justifyContent: 'space-around',
+  paddingHorizontal: 20,
+},
+previewButton: {
+  backgroundColor: PRIMARY_GREEN,
+  width: 60,
+  height: 60,
+  borderRadius: 30,
+  alignItems: 'center',
+  justifyContent: 'center',
+},
+useButton: {
+  backgroundColor: GLOW_WHITE,
+},
+
+
+});
+
+export default styles;