@holper/react-native-holper-storybook 0.6.76 → 0.6.77

package/lib/components/CustomChatView/index.js

@@ -0,0 +1,73 @@
+import MapView, { PROVIDER_GOOGLE } from "react-native-maps";
+import PropTypes from "prop-types";
+import React from "react";
+import { Platform, TouchableOpacity, Alert, Linking } from "react-native";
+import { MapStyle } from "../../configs/constants";
+import styles from "./style";
+
+const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }) => {
+  const openMapAsync = async () => {
+    const { location = {} } = currentMessage;
+
+    const mapScheme = Platform.select({
+      ios: "maps:0,0?q=",
+      android: "geo:0,0?q=",
+    });
+    const latLng = `${location.latitude},${location.longitude}`;
+    const label = `${currentMessage.user.name}`;
+
+    const url = Platform.select({
+      ios: `${mapScheme}${label}@${latLng}`,
+      android: `${mapScheme}${latLng}(${label})`,
+    });
+
+    try {
+      const supported = await Linking.canOpenURL(url);
+      if (supported) {
+        return Linking.openURL(url);
+      }
+      Alert.alert("Opening the map is not supported.");
+    } catch ({ message }) {
+      Alert.alert(message);
+    }
+  };
+
+  if (currentMessage.location) {
+    return (
+      <TouchableOpacity
+        style={[styles.container, containerStyle]}
+        onPress={openMapAsync}
+      >
+        <MapView
+          style={[styles.mapView, mapViewStyle]}
+          region={{
+            latitude: currentMessage.location.latitude,
+            longitude: currentMessage.location.longitude,
+            latitudeDelta: currentMessage.location.latitudeDelta || 0.0922,
+            longitudeDelta: currentMessage.location.longitudeDelta || 0.0421,
+          }}
+          customMapStyle={MapStyle}
+          provider={PROVIDER_GOOGLE}
+          scrollEnabled={false}
+          zoomEnabled={false}
+        />
+      </TouchableOpacity>
+    );
+  }
+
+  return null;
+};
+
+CustomChatView.propTypes = {
+  currentMessage: PropTypes.object,
+  containerStyle: PropTypes.object,
+  mapViewStyle: PropTypes.object,
+};
+
+CustomChatView.defaultProps = {
+  currentMessage: {},
+  containerStyle: {},
+  mapViewStyle: {},
+};
+
+export default CustomChatView;

package/lib/components/CustomChatView/style.js

@@ -0,0 +1,10 @@
+export default {
+  container: {},
+  mapView: {
+    flexDirection: "column-reverse",
+    width: 250,
+    height: 150,
+    borderRadius: 13,
+    margin: 3,
+  },
+};

package/lib/components/TakePicture/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import {
   Modal,
@@ -8,11 +8,12 @@ import {
   ActivityIndicator,
 } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import { CameraView, FlashMode } from 'expo-camera';
+import { CameraView, useCameraPermissions } from 'expo-camera';
 import * as ImageManipulator from 'expo-image-manipulator';
 import { Svg, Defs, Rect, Mask, Circle } from 'react-native-svg';
 import Text from '../Text';
 import Container from '../Container';
+import Button from '../Button';
 import { Colors } from '../../configs/constants';
 import { ConfirmPictureModal } from './confirmPictureModal';
 import style from './style';
@@ -46,44 +47,19 @@ const TakePicture = ({
   onClose,
   avatar,
   cameraErrorMessage,
+  requestPermissionsMessage,
   processingPictureMessage,
   repeatPictureText,
   usePictureText,
 }) => {
-  const [hasCameraPermission, setHasCameraPermission] = useState(null);
-  const [type, setType] = useState(CameraView.Constants.Type.back);
+  const [permission, requestPermission] = useCameraPermissions();
+  const [type, setType] = useState('back');
   const [image, setImage] = useState(null);
   const [takingPicture, setTakingPicture] = useState(false);
-  const [ratio, setRatio] = useState(DESIRED_RATIO);
   const camera = useRef();
 
-  useEffect(() => {
-    (async () => {
-      const { status } = await CameraView.requestCameraPermissionsAsync();
-      setHasCameraPermission(status === 'granted');
-    })();
-  }, [visible]);
-
-  const prepareRatio = async () => {
-    if (isAndroid && camera) {
-      const ratios = await CameraView.getSupportedRatiosAsync();
-
-      // See if the current device has your desired ratio, otherwise get the maximum supported one
-      // Usually the last element of 'ratios' is the maximum supported ratio
-      const supportedRatio =
-        ratios.find((ratio) => ratio === DESIRED_RATIO) ||
-        ratios[ratios.length - 1];
-
-      setRatio(supportedRatio);
-    }
-  };
-
   const flipCamera = () => {
-    setType(
-      type === CameraView.Constants.Type.back
-        ? CameraView.Constants.Type.front
-        : CameraView.Constants.Type.back
-    );
+    setType((current) => (current === 'back' ? 'front' : 'back'));
   };
 
   const takePicture = async () => {
@@ -130,12 +106,15 @@ const TakePicture = ({
     onClose();
   };
 
-  if (hasCameraPermission === null) {
-    return <View />;
-  }
-
-  if (hasCameraPermission === false) {
-    return <Text>{cameraErrorMessage}</Text>;
+  if (!permission || permission.status !== 'granted') {
+    return (
+      <View style={style.cameraPermissionsContainer}>
+        <Text color='red'>{cameraErrorMessage}</Text>
+        <Button onPress={requestPermission} color='inverted'>
+          <Text color='white'>{requestPermissionsMessage}</Text>
+        </Button>
+      </View>
+    );
   }
 
   return (
@@ -143,16 +122,14 @@ const TakePicture = ({
       animationType='slide'
       transparent={false}
       visible={visible}
-      onRequestClose={() => {}}
+      onRequestClose={onClose}
     >
       <Container style={style.cameraContainer}>
         <CameraView
           ref={camera}
           style={style.cameraContainer}
-          type={type}
-          flashMode={FlashMode.off}
-          onCameraReady={prepareRatio} // You can only get the supported ratios when the camera is mounted
-          ratio={ratio}
+          facing={type}
+          ratio={DESIRED_RATIO}
         >
           {avatar && isiOS && <SvgCircle />}
 
@@ -211,6 +188,7 @@ TakePicture.defaultProps = {
   onClose: () => {},
   avatar: false,
   cameraErrorMessage: ' ',
+  requestPermissionsMessage: ' ',
   processingPictureMessage: ' ',
   repeatPictureText: ' ',
   usePictureText: ' ',
@@ -221,6 +199,7 @@ TakePicture.propTypes = {
   onClose: PropTypes.func.isRequired,
   avatar: PropTypes.bool,
   cameraErrorMessage: PropTypes.string.isRequired,
+  requestPermissionsMessage: PropTypes.string.isRequired,
   processingPictureMessage: PropTypes.string.isRequired,
   repeatPictureText: PropTypes.string.isRequired,
   usePictureText: PropTypes.string.isRequired,

package/lib/components/TakePicture/style.js

@@ -7,7 +7,7 @@ export default {
   cameraContainer: {
     flex: 1,
     ...StyleSheet.absoluteFillObject,
-    position: 'absolute'
+    position: 'absolute',
   },
   closeIcon: {
     position: 'absolute',
@@ -19,7 +19,7 @@ export default {
     borderRadius: 15,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   cameraFlipContainer: {
     flex: 1,
@@ -27,7 +27,7 @@ export default {
     flexDirection: 'row',
     position: 'relative',
     marginBottom: 20,
-    ...StyleSheet.absoluteFillObject
+    ...StyleSheet.absoluteFillObject,
   },
   cameraFlipBtn: {
     flex: 0.2,
@@ -35,17 +35,17 @@ export default {
     alignItems: 'center',
     paddingLeft: 15,
     paddingBottom: 10,
-    height: 60
+    height: 60,
   },
   cameraFlipIcon: {
     position: 'absolute',
     bottom: 10,
-    left: 25
+    left: 25,
   },
   cameraRecordBtn: {
     position: 'absolute',
     bottom: 0,
-    left: (width / 2) - 25
+    left: width / 2 - 25,
   },
   cameraRetakePhoto: {
     height: 40,
@@ -58,17 +58,17 @@ export default {
     paddingHorizontal: 30,
     position: 'absolute',
     bottom: 0,
-    left: 0
+    left: 0,
   },
   cameraRetakePhotoText: {
-    color: Colors.white
+    color: Colors.white,
   },
   cameraTakingPictureOverlay: {
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 999,
-    backgroundColor: 'rgba(0, 0, 0, 0.8)'
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
   },
   cameraTakenImageContainer: {
     backgroundColor: 'rgba(0,0,0,0.9)',
@@ -76,12 +76,20 @@ export default {
     ...StyleSheet.absoluteFillObject,
     position: 'absolute',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   cameraTakenImage: {
     width: width - 30,
     height: width - 30,
     alignSelf: 'center',
-    position: 'relative'
+    position: 'relative',
+  },
+  cameraPermissionsContainer: {
+    flex: 1,
+    ...StyleSheet.absoluteFillObject,
+    position: 'absolute',
+    backgroundColor: Colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 };

package/lib/components/UploadDocument/index.js

@@ -6,7 +6,7 @@ import {
   ActivityIndicator,
   Platform,
 } from 'react-native';
-import { Camera } from 'expo-camera';
+import { CameraView, useCameraPermissions } from 'expo-camera';
 import * as MediaLibrary from 'expo-media-library';
 import * as ExpoImagePicker from 'expo-image-picker';
 import Text from '../Text';
@@ -35,6 +35,7 @@ const UploadDocument = ({
   file,
   onPermissionDenied,
 }) => {
+  const [permission, requestPermission] = useCameraPermissions();
   const [showMediaModal, setShowMediaModal] = useState(false);
   const [showCamera, setShowCamera] = useState(false);
   const [image, setImage] = useState(null);
@@ -42,7 +43,7 @@ const UploadDocument = ({
 
   useEffect(() => {
     (async () => {
-      await Camera.requestCameraPermissionsAsync();
+      await requestPermission();
       iOS
         ? await MediaLibrary.requestPermissionsAsync()
         : await ExpoImagePicker.getMediaLibraryPermissionsAsync();
@@ -60,10 +61,7 @@ const UploadDocument = ({
 
     switch (method) {
       case 'camera':
-        const { status: cameraStatus } =
-          await Camera.getCameraPermissionsAsync();
-
-        if (cameraStatus !== 'granted') {
+        if (permission && permission.status !== 'granted') {
           onPermissionDenied();
           return;
         }
@@ -167,6 +165,8 @@ const UploadDocument = ({
 
       <TakePicture
         visible={showCamera}
+        cameraErrorMessage={takePicture.cameraErrorMessage}
+        requestPermissionsMessage={takePicture.requestPermissionsMessage}
         processingPictureMessage={takePicture.processingPictureMessage}
         repeatPictureText={takePicture.repeatPictureText}
         usePictureText={takePicture.usePictureText}
@@ -204,6 +204,7 @@ UploadDocument.defaultProps = {
   },
   takePicture: {
     cameraErrorMessage: ' ',
+    requestPermissionsMessage: ' ',
     processingPictureMessage: ' ',
     repeatPictureText: ' ',
     usePictureText: ' ',
@@ -230,6 +231,7 @@ UploadDocument.propTypes = {
   }),
   takePicture: PropTypes.shape({
     cameraErrorMessage: PropTypes.string,
+    requestPermissionsMessage: PropTypes.string,
     processingPictureMessage: PropTypes.string,
     repeatPictureText: PropTypes.string,
     usePictureText: PropTypes.string,

package/lib/components/index.js

@@ -1,27 +1,28 @@
-export { default as Button } from './Button';
-export { default as Card } from './Card';
-export { default as ConfirmationModal } from './ConfirmationModal';
-export { default as Container } from './Container';
-export { default as DeckSwiper } from './DeckSwiper';
-export { default as FlashMessage, sendMessage } from './FlashMessage';
-export { default as FloatingContainer } from './FloatingContainer';
-export { default as Footer } from './Footer';
-export { default as Header } from './Header';
-export { default as ImagePicker } from './ImagePicker';
-export { default as ImageResponsive } from './ImageResponsive';
-export { default as ImageViewer } from './ImageViewer';
-export { default as Input } from './Input';
-export { default as InputPin } from './InputPin';
-export { default as MenuItem } from './MenuItem';
-export { default as NavigationTitle } from './NavigationTitle';
-export { default as Notification } from './Notification';
-export { default as Select } from './Select';
-export { default as SwipeablePanel } from './SwipeablePanel';
-export { default as Switch } from './Switch';
-export { default as TakePicture } from './TakePicture';
-export { default as Text } from './Text';
-export { default as Textarea } from './Textarea';
-export { default as TimeOutButton } from './TimeOutButton';
-export { default as UploadDocument } from './UploadDocument';
-export { default as VirtualKeyboard } from './VirtualKeyboard';
-export { default as withPreventDoubleClick } from './PreventDoubleClick';
+export { default as Button } from "./Button";
+export { default as Card } from "./Card";
+export { default as ConfirmationModal } from "./ConfirmationModal";
+export { default as Container } from "./Container";
+export { default as DeckSwiper } from "./DeckSwiper";
+export { default as FlashMessage, sendMessage } from "./FlashMessage";
+export { default as FloatingContainer } from "./FloatingContainer";
+export { default as Footer } from "./Footer";
+export { default as Header } from "./Header";
+export { default as ImagePicker } from "./ImagePicker";
+export { default as ImageResponsive } from "./ImageResponsive";
+export { default as ImageViewer } from "./ImageViewer";
+export { default as Input } from "./Input";
+export { default as InputPin } from "./InputPin";
+export { default as MenuItem } from "./MenuItem";
+export { default as NavigationTitle } from "./NavigationTitle";
+export { default as Notification } from "./Notification";
+export { default as Select } from "./Select";
+export { default as SwipeablePanel } from "./SwipeablePanel";
+export { default as Switch } from "./Switch";
+export { default as TakePicture } from "./TakePicture";
+export { default as Text } from "./Text";
+export { default as Textarea } from "./Textarea";
+export { default as TimeOutButton } from "./TimeOutButton";
+export { default as UploadDocument } from "./UploadDocument";
+export { default as VirtualKeyboard } from "./VirtualKeyboard";
+export { default as withPreventDoubleClick } from "./PreventDoubleClick";
+export { default as CustomChatView } from "./CustomChatView";

package/package.json

@@ -2,7 +2,7 @@
   "main": "lib/index.js",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
-  "version": "0.6.76",
+  "version": "0.6.77",
   "license": "MIT",
   "files": [
     "lib",
@@ -49,6 +49,8 @@
     "react-native-deck-swiper": "^2.0.16",
     "react-native-dropdown-picker": "^5.4.6",
     "react-native-flash-message": "^0.4.2",
+    "react-native-maps": "1.18.0",
+    "react-native-maps-directions": "1.9.0",
     "react-native-safe-area-context": "4.12.0",
     "react-native-status-bar-height": "^2.6.0",
     "react-native-svg": "15.8.0",
@@ -79,6 +81,8 @@
     "doctor": {
       "reactNativeDirectoryCheck": {
         "exclude": [
+          "react-native-maps",
+          "react-native-maps-directions",
           "react-native-status-bar-height"
         ],
         "listUnknownPackages": false