@holper/react-native-holper-storybook 0.6.75 → 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,12 +8,12 @@ import {
   ActivityIndicator,
 } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import { Camera, 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 ImageResponsive from '../ImageResponsive';
+import Button from '../Button';
 import { Colors } from '../../configs/constants';
 import { ConfirmPictureModal } from './confirmPictureModal';
 import style from './style';
@@ -47,44 +47,19 @@ const TakePicture = ({
   onClose,
   avatar,
   cameraErrorMessage,
+  requestPermissionsMessage,
   processingPictureMessage,
   repeatPictureText,
   usePictureText,
 }) => {
-  const [hasCameraPermission, setHasCameraPermission] = useState(null);
-  const [type, setType] = useState(Camera.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 Camera.requestCameraPermissionsAsync();
-      setHasCameraPermission(status === 'granted');
-    })();
-  }, [visible]);
-
-  const prepareRatio = async () => {
-    if (isAndroid && camera) {
-      const ratios = await Camera.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 === Camera.Constants.Type.back
-        ? Camera.Constants.Type.front
-        : Camera.Constants.Type.back
-    );
+    setType((current) => (current === 'back' ? 'front' : 'back'));
   };
 
   const takePicture = async () => {
@@ -131,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 (
@@ -144,16 +122,14 @@ const TakePicture = ({
       animationType='slide'
       transparent={false}
       visible={visible}
-      onRequestClose={() => {}}
+      onRequestClose={onClose}
     >
       <Container style={style.cameraContainer}>
-        <Camera
+        <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 />}
 
@@ -186,7 +162,7 @@ const TakePicture = ({
           </View>
 
           {avatar && isAndroid && <SvgCircle />}
-        </Camera>
+        </CameraView>
 
         {takingPicture && (
           <View style={style.cameraTakingPictureOverlay}>
@@ -212,6 +188,7 @@ TakePicture.defaultProps = {
   onClose: () => {},
   avatar: false,
   cameraErrorMessage: ' ',
+  requestPermissionsMessage: ' ',
   processingPictureMessage: ' ',
   repeatPictureText: ' ',
   usePictureText: ' ',
@@ -222,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/lib/configs/constants.js

@@ -1,262 +1,263 @@
 export const Colors = {
   // Blacks and Whites
-  transparent: 'transparent',
-  white: '#FFFFFF',
-  gray: '#D0D0D0',
-  dimgray: '#CFCFCF',
-  darkgray: '#2E3640',
-  whiteice: '#E7EAEE',
-  whitepearl: '#F7F8F9',
+  transparent: "transparent",
+  white: "#FFFFFF",
+  gray: "#D0D0D0",
+  dimgray: "#CFCFCF",
+  darkgray: "#2E3640",
+  whiteice: "#E7EAEE",
+  whitepearl: "#F7F8F9",
   // Greens
-  lightgreen: '#64FFA5',
-  green: '#3FE384',
+  lightgreen: "#64FFA5",
+  green: "#3FE384",
   // Blues
-  lightblue: '#E4E9F2',
-  midblue: '#727C8E',
-  darkblue: '#515C6F',
-  brightblue: '#00D8FF',
-  mediumblue: '#F2F7FE',
-  blue: '#2A539C',
+  lightblue: "#E4E9F2",
+  midblue: "#727C8E",
+  darkblue: "#515C6F",
+  brightblue: "#00D8FF",
+  mediumblue: "#F2F7FE",
+  blue: "#2A539C",
+  attentionBlue: "#dbf0fe",
   // Violet
-  violet: '#300049',
-  placeboPurple: '#F0ECFE',
+  violet: "#300049",
+  placeboPurple: "#F0ECFE",
   // Reds
-  lightred: '#FFC1C1',
-  red: '#FD4C4C',
+  lightred: "#FFC1C1",
+  red: "#FD4C4C",
   // Yellow
-  lightyellow: '#F3F2D3',
-  yellow: '#FDD100',
-  gold: '#D4AF37',
+  lightyellow: "#F3F2D3",
+  yellow: "#FDD100",
+  gold: "#D4AF37",
 };
 
 export const borderRadius = 8;
 
 export const ConstantsWS = Object.freeze({
-  HIRING: 'HIRING',
-  CANCELED: 'CANCELED',
-  CANCELED_BY_PROFESSIONAL: 'CANCELED_BY_PROFESSIONAL',
-  NOT_CONFIRMED: 'NOT_CONFIRMED',
-  NOT_STARTED: 'NOT_STARTED',
-  POSTULATION: 'POSTULATION',
-  NOTIFICATION: 'NOTIFICATION',
-  CHAT: 'CHAT',
-  MAP: 'MAP',
-  RECOMMENDATION: 'RECOMMENDATION',
-  ISSUE: 'ISSUE',
-  CLOSED: 'CLOSED',
-  USER: 'USER',
+  HIRING: "HIRING",
+  CANCELED: "CANCELED",
+  CANCELED_BY_PROFESSIONAL: "CANCELED_BY_PROFESSIONAL",
+  NOT_CONFIRMED: "NOT_CONFIRMED",
+  NOT_STARTED: "NOT_STARTED",
+  POSTULATION: "POSTULATION",
+  NOTIFICATION: "NOTIFICATION",
+  CHAT: "CHAT",
+  MAP: "MAP",
+  RECOMMENDATION: "RECOMMENDATION",
+  ISSUE: "ISSUE",
+  CLOSED: "CLOSED",
+  USER: "USER",
 });
 
 export const HiringStatus = Object.freeze({
-  PENDING: 'pending',
-  ON_THE_WAY: 'onTheWay',
-  ARRIVAL_CONFIRMED: 'arrivalConfirmed',
-  IN_PROGRESS: 'inProgress',
-  PAYMENT: 'payment',
-  PAYMENT_ERROR: 'paymentError',
-  DONE: 'done',
-  CANCELED: 'canceled',
-  UNPAID: 'unpaid',
+  PENDING: "pending",
+  ON_THE_WAY: "onTheWay",
+  ARRIVAL_CONFIRMED: "arrivalConfirmed",
+  IN_PROGRESS: "inProgress",
+  PAYMENT: "payment",
+  PAYMENT_ERROR: "paymentError",
+  DONE: "done",
+  CANCELED: "canceled",
+  UNPAID: "unpaid",
 });
 
 export const CouponStatus = Object.freeze({
-  PENDING: 'pending',
-  IN_USE: 'inUse',
-  EXPIRED: 'expired',
-  DONE: 'DONE',
+  PENDING: "pending",
+  IN_USE: "inUse",
+  EXPIRED: "expired",
+  DONE: "DONE",
 });
 
 export const NotificationsTypes = Object.freeze({
   /** New hiring is created */
-  NEW_HIRING: 'newHiring',
+  NEW_HIRING: "newHiring",
   /** Professional accept immediate hiring */
-  HIRING_IMMEDIATE: 'hiringImmediate',
+  HIRING_IMMEDIATE: "hiringImmediate",
   /** Professional accept scheduled hiring */
-  HIRING_SCHEDULED: 'hiringScheduled',
-  HIRING_ACCEPTED: 'hiringAccepted',
-  HIRING_CANCELED: 'hiringCanceled',
-  HIRING_ON_THE_WAY: 'hiringOnTheWay',
-  HIRING_ARRIVAL_CONFIRMED: 'hiringArrivalConfirmed',
-  HIRING_IN_PROGRESS: 'hiringInProgress',
-  HIRING_DONE: 'hiringDone',
-  HIRING_DELAY: 'hiringDelay',
-  HIRING_DELAY_TRAFFIC: 'hiringDelayTraffic',
-  HIRING_DELAY_ACCIDENT: 'hiringDelayAccident',
-  HIRING_DELAY_WORK: 'hiringDelayWork',
-  HIRING_EXTRA_TASK: 'hiringExtraTask',
-  HIRING_EXTRA_TASK_ACCEPTED: 'hiringExtraTaskAccepted',
-  HIRING_EXTRA_TASK_REJECTED: 'hiringExtraTaskRejected',
-  HIRING_PAYMENT_REJECTED: 'hiringPaymentRejected',
-  HIRING_RATING: 'hiringRating',
-  NEW_MESSAGE: 'newMessage',
+  HIRING_SCHEDULED: "hiringScheduled",
+  HIRING_ACCEPTED: "hiringAccepted",
+  HIRING_CANCELED: "hiringCanceled",
+  HIRING_ON_THE_WAY: "hiringOnTheWay",
+  HIRING_ARRIVAL_CONFIRMED: "hiringArrivalConfirmed",
+  HIRING_IN_PROGRESS: "hiringInProgress",
+  HIRING_DONE: "hiringDone",
+  HIRING_DELAY: "hiringDelay",
+  HIRING_DELAY_TRAFFIC: "hiringDelayTraffic",
+  HIRING_DELAY_ACCIDENT: "hiringDelayAccident",
+  HIRING_DELAY_WORK: "hiringDelayWork",
+  HIRING_EXTRA_TASK: "hiringExtraTask",
+  HIRING_EXTRA_TASK_ACCEPTED: "hiringExtraTaskAccepted",
+  HIRING_EXTRA_TASK_REJECTED: "hiringExtraTaskRejected",
+  HIRING_PAYMENT_REJECTED: "hiringPaymentRejected",
+  HIRING_RATING: "hiringRating",
+  NEW_MESSAGE: "newMessage",
   /** Reminder for the client to open the door */
-  REMINDER_OPEN_DOOR: 'reminderOpenDoor',
+  REMINDER_OPEN_DOOR: "reminderOpenDoor",
   /** Reminder for the professional to start the path */
-  REMINDER_START_PATH: 'reminderStartPath',
+  REMINDER_START_PATH: "reminderStartPath",
   /** Reminder for the professional when the start time is passed */
-  REMINDER_DELAYED: 'reminderDelay',
+  REMINDER_DELAYED: "reminderDelay",
   /** Reminder for the professional when arrived to mark the arrival confirmed */
-  REMINDER_ARRIVED: 'reminderArrived',
+  REMINDER_ARRIVED: "reminderArrived",
   /** Reminder for the professional to start the progress */
-  REMINDER_START_PROGRESS: 'reminderStartProgress',
+  REMINDER_START_PROGRESS: "reminderStartProgress",
 });
 
 export const MapStyle = [
   {
-    elementType: 'geometry',
+    elementType: "geometry",
     stylers: [
       {
-        color: '#f5f5f5',
+        color: "#f5f5f5",
       },
     ],
   },
   {
-    elementType: 'labels.icon',
+    elementType: "labels.icon",
     stylers: [
       {
-        visibility: 'off',
+        visibility: "off",
       },
     ],
   },
   {
-    elementType: 'labels.text.fill',
+    elementType: "labels.text.fill",
     stylers: [
       {
-        color: '#616161',
+        color: "#616161",
       },
     ],
   },
   {
-    elementType: 'labels.text.stroke',
+    elementType: "labels.text.stroke",
     stylers: [
       {
-        color: '#f5f5f5',
+        color: "#f5f5f5",
       },
     ],
   },
   {
-    featureType: 'administrative.land_parcel',
-    elementType: 'labels.text.fill',
+    featureType: "administrative.land_parcel",
+    elementType: "labels.text.fill",
     stylers: [
       {
-        color: '#bdbdbd',
+        color: "#bdbdbd",
       },
     ],
   },
   {
-    featureType: 'poi',
-    elementType: 'geometry',
+    featureType: "poi",
+    elementType: "geometry",
     stylers: [
       {
-        color: '#eeeeee',
+        color: "#eeeeee",
       },
     ],
   },
   {
-    featureType: 'poi',
-    elementType: 'labels.text.fill',
+    featureType: "poi",
+    elementType: "labels.text.fill",
     stylers: [
       {
-        color: '#757575',
+        color: "#757575",
       },
     ],
   },
   {
-    featureType: 'poi.park',
-    elementType: 'geometry',
+    featureType: "poi.park",
+    elementType: "geometry",
     stylers: [
       {
-        color: '#e5e5e5',
+        color: "#e5e5e5",
       },
     ],
   },
   {
-    featureType: 'poi.park',
-    elementType: 'labels.text.fill',
+    featureType: "poi.park",
+    elementType: "labels.text.fill",
     stylers: [
       {
-        color: '#9e9e9e',
+        color: "#9e9e9e",
       },
     ],
   },
   {
-    featureType: 'road',
-    elementType: 'geometry',
+    featureType: "road",
+    elementType: "geometry",
     stylers: [
       {
-        color: '#ffffff',
+        color: "#ffffff",
       },
     ],
   },
   {
-    featureType: 'road.arterial',
-    elementType: 'labels.text.fill',
+    featureType: "road.arterial",
+    elementType: "labels.text.fill",
     stylers: [
       {
-        color: '#757575',
+        color: "#757575",
       },
     ],
   },
   {
-    featureType: 'road.highway',
-    elementType: 'geometry',
+    featureType: "road.highway",
+    elementType: "geometry",
     stylers: [
       {
-        color: '#dadada',
+        color: "#dadada",
       },
     ],
   },
   {
-    featureType: 'road.highway',
-    elementType: 'labels.text.fill',
+    featureType: "road.highway",
+    elementType: "labels.text.fill",
     stylers: [
       {
-        color: '#616161',
+        color: "#616161",
       },
     ],
   },
   {
-    featureType: 'road.local',
-    elementType: 'labels.text.fill',
+    featureType: "road.local",
+    elementType: "labels.text.fill",
     stylers: [
       {
-        color: '#9e9e9e',
+        color: "#9e9e9e",
       },
     ],
   },
   {
-    featureType: 'transit.line',
-    elementType: 'geometry',
+    featureType: "transit.line",
+    elementType: "geometry",
     stylers: [
       {
-        color: '#e5e5e5',
+        color: "#e5e5e5",
       },
     ],
   },
   {
-    featureType: 'transit.station',
-    elementType: 'geometry',
+    featureType: "transit.station",
+    elementType: "geometry",
     stylers: [
       {
-        color: '#eeeeee',
+        color: "#eeeeee",
       },
     ],
   },
   {
-    featureType: 'water',
-    elementType: 'geometry',
+    featureType: "water",
+    elementType: "geometry",
     stylers: [
       {
-        color: '#c9c9c9',
+        color: "#c9c9c9",
       },
     ],
   },
   {
-    featureType: 'water',
-    elementType: 'labels.text.fill',
+    featureType: "water",
+    elementType: "labels.text.fill",
     stylers: [
       {
-        color: '#9e9e9e',
+        color: "#9e9e9e",
       },
     ],
   },

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.75",
+  "version": "0.6.77",
   "license": "MIT",
   "files": [
     "lib",
@@ -27,35 +27,39 @@
     "storybook-publish": "./build.sh"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "1.21.0",
+    "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.2.0",
-    "@react-native-community/slider": "4.4.2",
+    "@react-native-community/slider": "4.5.5",
     "deprecated-react-native-prop-types": "^5.0.0",
-    "expo": "~50.0.17",
-    "expo-asset": "~9.0.2",
-    "expo-camera": "~14.1.3",
-    "expo-font": "~11.10.3",
-    "expo-image-manipulator": "~11.8.0",
-    "expo-image-picker": "~14.7.1",
-    "expo-media-library": "~15.9.2",
-    "expo-status-bar": "~1.11.1",
+    "expo": "^52.0.35",
+    "expo-asset": "~11.0.3",
+    "expo-camera": "~16.0.16",
+    "expo-font": "~13.0.3",
+    "expo-image": "~2.0.5",
+    "expo-image-manipulator": "~13.0.6",
+    "expo-image-picker": "~16.0.6",
+    "expo-media-library": "~17.0.6",
+    "expo-status-bar": "~2.0.1",
     "moment": "^2.30.1",
     "prop-types": "^15.8.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.73.6",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.7",
     "react-native-countdown-circle-timer": "^3.2.1",
     "react-native-deck-swiper": "^2.0.16",
     "react-native-dropdown-picker": "^5.4.6",
     "react-native-flash-message": "^0.4.2",
-    "react-native-safe-area-context": "4.8.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": "14.1.0",
+    "react-native-svg": "15.8.0",
     "react-native-vector-icons": "^10.0.3",
     "react-native-web": "~0.19.10"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
+    "@babel/traverse": "^7.26.9",
     "@storybook/addon-actions": "^7.6.11",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-links": "^7.6.11",
@@ -65,12 +69,24 @@
     "@storybook/react-native": "^6.5.7",
     "@storybook/react-native-server": "^6.5.8",
     "babel-loader": "^9.1.3",
-    "expo-dev-client": "~3.3.11"
+    "expo-dev-client": "~5.0.12"
   },
   "peerDependencies": {
     "expo-camera": ">=13.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-native": ">=0.71.0"
+  },
+  "expo": {
+    "doctor": {
+      "reactNativeDirectoryCheck": {
+        "exclude": [
+          "react-native-maps",
+          "react-native-maps-directions",
+          "react-native-status-bar-height"
+        ],
+        "listUnknownPackages": false
+      }
+    }
   }
 }