@plusscommunities/pluss-core-app 8.0.28 → 8.0.31

package/src/components/react-native-expo-image-cropper/ExpoImageManipulator.js

@@ -19,6 +19,7 @@ import AutoHeightImage from "react-native-auto-height-image";
 import {
 	withSafeAreaInsets,
 	SafeAreaView,
+	SafeAreaProvider,
 } from "react-native-safe-area-context";
 import ImageCropOverlay from "./ImageCropOverlay";
 
@@ -292,98 +293,101 @@ class ExpoImageManipulator extends Component {
 				}}
 			>
 				{uri !== undefined ? (
-					<View style={styles.container}>
-						<SafeAreaView style={[{ width }, styles.headerContainer]}>
-							{!cropMode ? (
-								<View
-									style={[
-										styles.headerButtonContainer,
-										{ justifyContent: "flex-end" },
-									]}
-								>
-									<TouchableOpacity
-										onPress={() => {
-											onPictureChoosed({ uri, base64 });
-											this.onToggleModal();
-										}}
-										style={styles.headerButton}
-									>
-										<Text style={styles.headerButtonText}>{"Done"}</Text>
-									</TouchableOpacity>
-								</View>
-							) : (
-								<View style={styles.headerButtonContainer}>
-									<TouchableOpacity
-										onPress={this.onToggleModal}
-										style={styles.headerButton}
+					<SafeAreaProvider>
+						<View style={styles.container}>
+							<SafeAreaView style={[{ width }, styles.headerContainer]}>
+								{!cropMode ? (
+									<View
+										style={[
+											styles.headerButtonContainer,
+											{ justifyContent: "flex-end" },
+										]}
 									>
-										<Text style={styles.headerButtonText}>{"Cancel"}</Text>
-									</TouchableOpacity>
-									<TouchableOpacity
-										onPress={() => {
-											this.onCropImage(() => {
-												onPictureChoosed({
-													uri: this.state.uri,
-													base64: this.state.base64,
-												});
+										<TouchableOpacity
+											onPress={() => {
+												onPictureChoosed({ uri, base64 });
 												this.onToggleModal();
-											});
-										}}
-										style={styles.headerButton}
-									>
-										<Text style={styles.headerButtonText}>
-											{processing ? "Processing" : "Done"}
-										</Text>
-									</TouchableOpacity>
-								</View>
-							)}
-						</SafeAreaView>
-						<View
-							onLayout={this.onContentLayout}
-							style={[styles.contentContainer, { width }]}
-						>
-							<ScrollView
-								style={{ position: "relative", flex: 1 }}
-								contentContainerStyle={{ backgroundColor: "black" }}
-								maximumZoomScale={5}
-								minimumZoomScale={0.5}
-								onScroll={this.onHandleScroll}
-								bounces={false}
-								showsHorizontalScrollIndicator={false}
-								showsVerticalScrollIndicator={false}
-								ref={(c) => (this.scrollView = c)}
-								scrollEventThrottle={16}
-								scrollEnabled={false}
-								pinchGestureEnabled={false}
+											}}
+											style={styles.headerButton}
+										>
+											<Text style={styles.headerButtonText}>{"Done"}</Text>
+										</TouchableOpacity>
+									</View>
+								) : (
+									<View style={styles.headerButtonContainer}>
+										<TouchableOpacity
+											onPress={this.onToggleModal}
+											style={styles.headerButton}
+										>
+											<Text style={styles.headerButtonText}>{"Cancel"}</Text>
+										</TouchableOpacity>
+										<TouchableOpacity
+											onPress={() => {
+												this.onCropImage(() => {
+													onPictureChoosed({
+														uri: this.state.uri,
+														base64: this.state.base64,
+													});
+													this.onToggleModal();
+												});
+											}}
+											style={styles.headerButton}
+										>
+											<Text style={styles.headerButtonText}>
+												{processing ? "Processing" : "Done"}
+											</Text>
+										</TouchableOpacity>
+									</View>
+								)}
+							</SafeAreaView>
+							<SafeAreaView
+								onLayout={this.onContentLayout}
+								style={[styles.contentContainer, { width }]}
+								edges={["bottom"]}
 							>
-								<AutoHeightImage
-									style={{ backgroundColor: "black" }}
-									source={{ uri }}
-									resizeMode={imageRatio >= 1 ? "contain" : "contain"}
-									width={width}
-									height={originalHeight}
-									onLayout={this.calculateMaxSizes}
-								/>
-								{!!cropMode && (
-									<ImageCropOverlay
-										onLayoutChanged={(top, left, width, height) => {
-											this.currentSize.width = width;
-											this.currentSize.height = height;
-											this.currentPos.top = top;
-											this.currentPos.left = left;
-										}}
-										initialWidth={cropWidth}
-										initialHeight={cropHeight}
-										initialTop={cropInitialTop}
-										initialLeft={cropInitialLeft}
-										minHeight={100}
-										minWidth={100}
-										topMargin={topMargin}
+								<ScrollView
+									style={{ position: "relative", flex: 1 }}
+									contentContainerStyle={{ backgroundColor: "black" }}
+									maximumZoomScale={5}
+									minimumZoomScale={0.5}
+									onScroll={this.onHandleScroll}
+									bounces={false}
+									showsHorizontalScrollIndicator={false}
+									showsVerticalScrollIndicator={false}
+									ref={(c) => (this.scrollView = c)}
+									scrollEventThrottle={16}
+									scrollEnabled={false}
+									pinchGestureEnabled={false}
+								>
+									<AutoHeightImage
+										style={{ backgroundColor: "black" }}
+										source={{ uri }}
+										resizeMode={imageRatio >= 1 ? "contain" : "contain"}
+										width={width}
+										height={originalHeight}
+										onLayout={this.calculateMaxSizes}
 									/>
-								)}
-							</ScrollView>
+									{!!cropMode && (
+										<ImageCropOverlay
+											onLayoutChanged={(top, left, width, height) => {
+												this.currentSize.width = width;
+												this.currentSize.height = height;
+												this.currentPos.top = top;
+												this.currentPos.left = left;
+											}}
+											initialWidth={cropWidth}
+											initialHeight={cropHeight}
+											initialTop={cropInitialTop}
+											initialLeft={cropInitialLeft}
+											minHeight={100}
+											minWidth={100}
+											topMargin={topMargin}
+										/>
+									)}
+								</ScrollView>
+							</SafeAreaView>
 						</View>
-					</View>
+					</SafeAreaProvider>
 				) : (
 					<View style={styles.container}>
 						<Text style={styles.prepareMessageText}>Preparing...</Text>