ordering-ui-react-native 0.16.93 → 0.16.94-release

package/themes/business/src/components/Chat/index.tsx

@@ -44,33 +44,6 @@ import { USER_TYPE } from '../../config/constants';
 
 import SignatureScreen from 'react-native-signature-canvas';
 
-const ORDER_STATUS: any = {
-  0: 'ORDER_STATUS_PENDING',
-  1: 'ORDERS_COMPLETED',
-  2: 'ORDER_REJECTED',
-  3: 'ORDER_STATUS_IN_BUSINESS',
-  4: 'ORDER_READY',
-  5: 'ORDER_REJECTED_RESTAURANT',
-  6: 'ORDER_STATUS_CANCELLEDBYDRIVER',
-  7: 'ORDER_STATUS_ACCEPTEDBYRESTAURANT',
-  8: 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER',
-  9: 'ORDER_PICKUP_COMPLETED_BY_DRIVER',
-  10: 'ORDER_PICKUP_FAILED_BY_DRIVER',
-  11: 'ORDER_DELIVERY_COMPLETED_BY_DRIVER',
-  12: 'ORDER_DELIVERY_FAILED_BY_DRIVER',
-  13: 'PREORDER',
-  14: 'ORDER_NOT_READY',
-  15: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
-  16: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER',
-  17: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
-  18: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS',
-  19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
-  20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
-  21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
-  22: 'ORDER_LOOKING_FOR_DRIVER',
-  23: 'ORDER_DRIVER_ON_WAY'
-}
-
 const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
 
 const ChatUI = (props: MessagesParams) => {
@@ -96,6 +69,35 @@ const ChatUI = (props: MessagesParams) => {
   const [, { showToast }] = useToast();
   const theme = useTheme();
   const [messageList, setMessageList] = useState<any>([])
+  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+  const chatDisabled = previousStatus.includes(order?.status)
+
+  const ORDER_STATUS: any = {
+    0: t('ORDER_STATUS_PENDING', 'Order status pending'),
+    1: t('ORDERS_COMPLETED', 'Order completed'),
+    2: t('ORDER_REJECTED', 'Order rejected'),
+    3: t('ORDER_STATUS_IN_BUSINESS', 'Order status in business'),
+    4: t('ORDER_READY', 'Order ready'),
+    5: t('ORDER_REJECTED_RESTAURANT', 'Order rejected by restaurant'),
+    6: t('ORDER_STATUS_CANCELLEDBYDRIVER', 'Order status cancelled by driver'),
+    7: t('ORDER_STATUS_ACCEPTEDBYRESTAURANT', 'Order status accepted by restaurant'),
+    8: t('ORDER_CONFIRMED_ACCEPTED_BY_DRIVER', 'Order confirmed accepted by driver'),
+    9: t('ORDER_PICKUP_COMPLETED_BY_DRIVER', 'Order pickup completed by driver'),
+    10: t('ORDER_PICKUP_FAILED_BY_DRIVER', 'Order pickup failed by driver'),
+    11: t('ORDER_DELIVERY_COMPLETED_BY_DRIVER', 'Order delivery completed by driver'),
+    12: t('ORDER_DELIVERY_FAILED_BY_DRIVER', 'Order delivery failed by driver'),
+    13: t('PREORDER', 'Preorder'),
+    14: t('ORDER_NOT_READY', 'Order not ready'),
+    15: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer'),
+    16: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', 'Order status cancelled by customer'),
+    17: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer'),
+    18: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', 'Order driver almost arrived to business'),
+    19: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', 'Order driver almost arrived to customer'),
+    20: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Order customer almost arrived to business'),
+    21: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Order customer arrived to business'),
+    22: t('ORDER_LOOKING_FOR_DRIVER', 'Order looking for driver'),
+    23: t('ORDER_DRIVER_ON_WAY', 'Driver on way')
+  }
 
   const storeMessageList: any = [
     { key: 'store_message_1', text: t('STORE_MESSAGE_1', 'store_message_1') },
@@ -176,12 +178,8 @@ const ChatUI = (props: MessagesParams) => {
       fontSize: 12,
     },
     toolbarStyle: {
-      flexDirection: 'column-reverse',
-      paddingVertical: 15,
-      paddingHorizontal: 30,
-      backgroundColor: theme.colors.white,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.tabBar,
+      padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+      flexDirection: 'column-reverse'
     },
     accessoryIcon: {
       height: 32,
@@ -377,7 +375,7 @@ const ChatUI = (props: MessagesParams) => {
             ?
             `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
               `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
-              `${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+              `${message.change.old !== null && ORDER_STATUS[parseInt(message.change.old, 10)]} ${t('TO', 'to')} ${ORDER_STATUS[parseInt(message.change.new, 10)]}`
             }`
             : message.change.new
               ?
@@ -472,7 +470,7 @@ const ChatUI = (props: MessagesParams) => {
     const firstMessage = {
       _id: 0,
       text: console,
-      createdAt: order?.created_at,
+      createdAt: parseDate(order?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
       system: true,
     };
     messages?.messages.map((message: any) => {
@@ -488,7 +486,7 @@ const ChatUI = (props: MessagesParams) => {
         newMessage = {
           _id: message.id,
           text: message.type === 1 ? messageConsole(message) : message.comment,
-          createdAt: message.type !== 0 && message.created_at,
+          createdAt: message.type !== 0 && parseDate(message?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
           image: message.source,
           system: message.type === 1,
           user: {
@@ -586,16 +584,12 @@ const ChatUI = (props: MessagesParams) => {
   };
 
   const renderAccessory = () => (
+    !chatDisabled &&
     <View>
       <Header
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
         horizontal
-        // contentContainerStyle={{
-        //   justifyContent:
-        //     orientation === 'Landscape' ? 'center' : 'space-between',
-        //   width: '100%',
-        // }}
         nestedScrollEnabled={true}
       >
         {user?.level !== 2 && (
@@ -766,113 +760,130 @@ const ChatUI = (props: MessagesParams) => {
       containerStyle={styles.toolbarStyle}
       primaryStyle={{ alignItems: 'center', justifyContent: 'space-between' }}
       accessoryStyle={{ position: 'relative', marginBottom: 45 }}
-      renderAccessory={order ? () => renderAccessory && renderAccessory() : undefined}
+      renderAccessory={() => renderAccessory()}
     />
   );
 
   const renderComposer = (props: any) => (
-    <View
-      style={{
-        flexDirection: 'row',
-        height: 44,
-        width: '85%',
-        backgroundColor: theme.colors.composerView,
-        borderRadius: 7.6,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingRight: 10,
-      }}>
-      <Composer
-        {...props}
-        textInputStyle={{
-          borderRadius: 7.6,
-          borderColor: theme.colors.transparent,
-          borderWidth: 0,
-          color: '#010300',
-        }}
-        textInputProps={{
-          value: message,
-          onSubmitEditing: onSubmit,
-          returnKeyType: message ? 'send' : 'done',
-          blurOnSubmit: true,
-          multiline: false,
-          numberOfLines: 1,
-          autoCorrect: false,
-          autoCompleteType: 'off',
-          enablesReturnKeyAutomatically: false,
-          selectionColor: theme.colors.primary,
+    chatDisabled ? (
+      <View
+        style={{
+          width: '100%',
+          flexDirection: 'column',
+          alignItems: 'center'
         }}
-        placeholder={t('WRITE_MESSAGE', 'Write message')}
-        placeholderTextColor={theme.colors.composerPlaceHolder}
-      />
-
-      <TouchableOpacity
-        onPress={() => {
-          setImage && setImage(null);
-          setIsShowSignaturePad(!isShowSignaturePad);
-        }}>
+      >
         <MaterialCommunityIcon
-          name="pen"
-          color={
-            isShowSignaturePad ? theme.colors.primary : theme.colors.arrowColor
-          }
+          name='close-octagon-outline'
           size={24}
         />
-      </TouchableOpacity>
-
-      {!file.type && (
-        <Actions
+        <OText size={14}>{t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended')}</OText>
+      </View>
+    ) : (
+      <View
+        style={{
+          flexDirection: 'row',
+          height: 44,
+          width: '85%',
+          backgroundColor: theme.colors.composerView,
+          borderRadius: 7.6,
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingRight: 10,
+        }}>
+        <Composer
           {...props}
-          containerStyle={styles.containerActions}
-          optionTintColor="#222845"
-          icon={() => (
-            <>
-              {!file?.type && (
-                <>
-                  <OIconButton
-                    borderColor={theme.colors.transparent}
-                    icon={
-                      !isShowSignaturePad && image
-                        ? { uri: image }
-                        : theme.images.general.imageChat
-                    }
-                    iconStyle={{
-                      borderRadius: image ? 10 : 0,
-                      width: image ? 32 : 28,
-                      height: image ? 32 : 28,
-                    }}
-                    onClick={handleImagePicker}
-                    iconCover
-                  />
-
-                  {image && !isShowSignaturePad && (
-                    <TouchableOpacity
-                      style={{
-                        position: 'absolute',
-                        top: -5,
-                        right: -5,
-                        borderColor: theme.colors.backgroundDark,
-                        backgroundColor: theme.colors.white,
-                        borderRadius: 25,
-                      }}
-                      onPress={() => removeImage()}>
-                      <MaterialCommunityIcon
-                        name="close-circle-outline"
-                        color={theme.colors.backgroundDark}
-                        size={24}
-                      />
-                    </TouchableOpacity>
-                  )}
-                </>
-              )}
-            </>
-          )}
+          textInputStyle={{
+            borderRadius: 7.6,
+            borderColor: theme.colors.transparent,
+            borderWidth: 0,
+            color: '#010300',
+          }}
+          textInputProps={{
+            value: message,
+            onSubmitEditing: onSubmit,
+            returnKeyType: message ? 'send' : 'done',
+            blurOnSubmit: true,
+            multiline: false,
+            numberOfLines: 1,
+            autoCorrect: false,
+            autoCompleteType: 'off',
+            enablesReturnKeyAutomatically: false,
+            selectionColor: theme.colors.primary,
+          }}
+          placeholder={t('WRITE_MESSAGE', 'Write message')}
+          placeholderTextColor={theme.colors.composerPlaceHolder}
         />
-      )}
-    </View>
+
+        <TouchableOpacity
+          onPress={() => {
+            setImage && setImage(null);
+            setIsShowSignaturePad(!isShowSignaturePad);
+          }}>
+          <MaterialCommunityIcon
+            name="pen"
+            color={
+              isShowSignaturePad ? theme.colors.primary : theme.colors.arrowColor
+            }
+            size={24}
+          />
+        </TouchableOpacity>
+
+        {!file.type && (
+          <Actions
+            {...props}
+            containerStyle={styles.containerActions}
+            optionTintColor="#222845"
+            icon={() => (
+              <>
+                {!file?.type && (
+                  <>
+                    <OIconButton
+                      borderColor={theme.colors.transparent}
+                      icon={
+                        !isShowSignaturePad && image
+                          ? { uri: image }
+                          : theme.images.general.imageChat
+                      }
+                      iconStyle={{
+                        borderRadius: image ? 10 : 0,
+                        width: image ? 32 : 28,
+                        height: image ? 32 : 28,
+                      }}
+                      onClick={handleImagePicker}
+                      iconCover
+                    />
+
+                    {image && !isShowSignaturePad && (
+                      <TouchableOpacity
+                        style={{
+                          position: 'absolute',
+                          top: -5,
+                          right: -5,
+                          borderColor: theme.colors.backgroundDark,
+                          backgroundColor: theme.colors.white,
+                          borderRadius: 25,
+                        }}
+                        onPress={() => removeImage()}>
+                        <MaterialCommunityIcon
+                          name="close-circle-outline"
+                          color={theme.colors.backgroundDark}
+                          size={24}
+                        />
+                      </TouchableOpacity>
+                    )}
+                  </>
+                )}
+              </>
+            )}
+          />
+        )}
+      </View>
+    )
   );
 
   const renderSend = (props: any) => (
+    !chatDisabled &&
     <Send
       {...props}
       disabled={

package/themes/business/src/components/DriverMap/index.tsx

@@ -12,7 +12,8 @@ import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import { FloatingButton } from '../FloatingButton';
-import { showLocation } from 'react-native-map-link';
+import { Popup } from 'react-native-map-link';
+import { transformDistance } from '../../utils';
 
 export const DriverMap = (props: GoogleMapsParams) => {
   const {
@@ -47,6 +48,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
   const [distancesFromTwoPlacesKm, setDistancesFromTwoPlacesKm] = useState(0);
   const [isMin, setIsMin] = useState(false);
   const [{ parseDate }] = useUtils();
+  const [popUp, setPopUp] = useState<boolean>(false);
   const mapErrors: any = {
     ERROR_NOT_FOUND_ADDRESS: "Sorry, we couldn't find an address",
     ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to',
@@ -56,6 +58,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     content: Array<string>;
     key?: string | null;
   }>({ open: false, content: [], key: null });
+  const distanceUnit = configState?.configs?.distance_unit?.value
 
   const {
     hasLocation,
@@ -475,9 +478,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 src={theme.images.general.arrow_distance}
                 style={styles.arrowDistance}
               />
-              <OText size={12} numberOfLines={3}>{`${(
-                distancesFromTwoPlacesKm * 3280.84
-              ).toFixed(0)} ${t('FT', 'Ft')}`}</OText>
+              <OText size={12} numberOfLines={3}>
+                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`}
+              </OText>
+
             </View>
             <View style={{ width: '75%', paddingRight: 20 }}>
               <OText
@@ -485,8 +489,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 size={13}
                 numberOfLines={2}
                 adjustsFontSizeToFit>
-                {`${travelTime.toFixed(2)} - ${isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
-                  } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
+                {`${travelTime.toFixed(2)} - ${isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')}`}
               </OText>
             </View>
           </View>
@@ -499,7 +502,18 @@ export const DriverMap = (props: GoogleMapsParams) => {
             imgRightSrc=''
             textStyle={{ color: theme.colors.white }}
             style={styles.showButton}
-            onClick={() => showLocation({
+            onClick={() => setPopUp(true)}
+            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+          />
+          <Popup
+            isVisible={popUp}
+            onCancelPressed={() => setPopUp(false)}
+            onAppPressed={() => setPopUp(false)}
+            onBackButtonPressed={() => setPopUp(false)}
+            modalProps={{
+              animationIn: 'slideInUp'
+            }}
+            options={{
               latitude: destination.latitude,
               longitude: destination.longitude,
               sourceLatitude: userLocation.latitude,
@@ -508,8 +522,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
               cancelText: t('CANCEL', 'Cancel'),
-            })}
-            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+            }}
           />
         </View>
         {showAcceptOrReject && (

package/themes/business/src/components/GoogleMap/index.tsx

@@ -80,9 +80,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     locations.map((location: { lat: number; lng: number; level: number }) => {
       return location.level === 4 && driverLocation?.lat
         ? {
-            latitude: driverLocation?.lat,
-            longitude: driverLocation?.lng,
-          }
+          latitude: driverLocation?.lat,
+          longitude: driverLocation?.lng,
+        }
         : { latitude: location.lat, longitude: location.lng };
     });
 
@@ -107,7 +107,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           }
           let data = null;
           const details = {
-            geometry: { location: { lat: pos.latitude, lng: pos.longitude } },
+            geometry: { location: { lat: pos?.latitude, lng: pos?.longitude } },
           };
           if (isSetInputs) {
             data = {
@@ -165,8 +165,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     const lat1 = pointA.lat;
     const lon1 = pointA.lng;
 
-    const lat2 = pointB.latitude;
-    const lon2 = pointB.longitude;
+    const lat2 = pointB?.latitude;
+    const lon2 = pointB?.longitude;
 
     const R = 6371e3;
     const φ1 = lat1 * (Math.PI / 180);
@@ -201,11 +201,11 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       content: !(errKey === 'ERROR_MAX_LIMIT_LOCATION_TO')
         ? [t(errKey, mapErrors[errKey])]
         : [
-            `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
-              'METTERS',
-              'meters',
-            )}`,
-          ],
+          `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
+            'METTERS',
+            'meters',
+          )}`,
+        ],
       key: errKey,
     });
   };
@@ -237,9 +237,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     MARKERS = locations.map((location: { lat: number; lng: number; level: number }) => {
       return location.level === 4 && driverLocation?.lat
         ? {
-            latitude: driverLocation?.lat,
-            longitude: driverLocation?.lng,
-          }
+          latitude: driverLocation?.lat,
+          longitude: driverLocation?.lng,
+        }
         : { latitude: location.lat, longitude: location.lng };
     })
     fitAllMarkers();
@@ -284,7 +284,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           onRegionChangeComplete={
             !readOnly
               ? coordinates => handleChangeRegion(coordinates)
-              : () => {}
+              : () => { }
           }
           zoomTapEnabled
           zoomEnabled
@@ -302,12 +302,13 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                     i: number,
                   ) => (
                     <React.Fragment key={i}>
-                      <Marker 
-                        coordinate={location} 
-                        onPress={() => { 
+                      <Marker
+                        coordinate={location}
+                        onPress={() => {
                           mapRef.current?.animateCamera({
-                          center: { latitude: location.latitude, longitude:location.longitude },
-                        })}}
+                            center: { latitude: location?.latitude, longitude: location?.longitude },
+                          })
+                        }}
                       >
                         <Icon
                           name="map-marker"
@@ -328,46 +329,46 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                         <Callout
                           onPress={() => {
                             showLocation({
-                                      latitude: location.latitude,
-                                      longitude: location.longitude,
-                                      sourceLatitude: userLocation.latitude,
-                                      sourceLongitude: userLocation.longitude,
-                                      naverCallerName: 'com.businessapp',
-                                      dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
-                                      dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
-                                      cancelText: t('CANCEL', 'Cancel'),
+                              latitude: location?.latitude,
+                              longitude: location?.longitude,
+                              sourceLatitude: userLocation?.latitude,
+                              sourceLongitude: userLocation.longitude,
+                              naverCallerName: 'com.businessapp',
+                              dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
+                              dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
+                              cancelText: t('CANCEL', 'Cancel'),
                             })
                           }}
                         >
-                          <View style={{flex: 1,width: 250, paddingRight: 10, paddingLeft: 10, justifyContent:'space-between' }}>
-                              <View style={{flex: 1, marginBottom: 20}}>
-                                <OText size={16} weight={'bold'} style={{paddingTop: 10, marginBottom: 10}}>{locations[i]?.title}</OText>
-                                { locations[i]?.address && (
-                                  <>
-                                    <OText size={16} >{locations[i]?.address.addressName}</OText>
-                                    <OText size={16} >{locations[i]?.address.zipcode}</OText>
-                                  </>
-                                )}
-                              </View>
-                              <OButton
-                                text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
-                                imgRightSrc={null}
-                                textStyle={{
-                                  color: theme.colors.white,
-                                  fontFamily: 'Poppins',
-                                  fontStyle: 'normal',
-                                  fontWeight: 'normal',
-                                  fontSize: 16
-                                }}
-                                style={{
-                                  alignContent:'center',
-                                  borderRadius: 10,
-                                  height: 35,
-                                  bottom:10
-                                }}
-                                bgColor={theme.colors.primary}
-                                borderColor={theme.colors.primary}
-                              />   
+                          <View style={{ flex: 1, width: 250, paddingRight: 10, paddingLeft: 10, justifyContent: 'space-between' }}>
+                            <View style={{ flex: 1, marginBottom: 20 }}>
+                              <OText size={16} weight={'bold'} style={{ paddingTop: 10, marginBottom: 10 }}>{locations[i]?.title}</OText>
+                              {locations[i]?.address && (
+                                <>
+                                  <OText size={16} >{locations[i]?.address.addressName}</OText>
+                                  <OText size={16} >{locations[i]?.address.zipcode}</OText>
+                                </>
+                              )}
+                            </View>
+                            <OButton
+                              text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
+                              imgRightSrc={null}
+                              textStyle={{
+                                color: theme.colors.white,
+                                fontFamily: 'Poppins',
+                                fontStyle: 'normal',
+                                fontWeight: 'normal',
+                                fontSize: 16
+                              }}
+                              style={{
+                                alignContent: 'center',
+                                borderRadius: 10,
+                                height: 35,
+                                bottom: 10
+                              }}
+                              bgColor={theme.colors.primary}
+                              borderColor={theme.colors.primary}
+                            />
                           </View>
                         </Callout>
                       </Marker>