Creating a custom Callout on Near You Map for Android

src/components/screens/near-you/components/NearYou.js

@@ -11,7 +11,7 @@ import Loading from '~/components/common/Loading';
 import appStyles from '~/styles';
 
 import RestaurantsList from './restaurants-list';
-import Map from './Map';
+import Map from './map';
 
 const Container = styled(View)`
   flex: 1;

src/components/screens/near-you/components/map/AndroidCallout.js

@@ -0,0 +1,32 @@
+// @flow
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import styled from 'styled-components';
+
+const Wrapper = styled(View)`
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: ${({ theme }) => theme.metrics.smallSize}px;
+`;
+
+const RestaurantName = styled(Text)`
+  color: ${({ theme }) => theme.colors.darkText};
+  font-size: ${({ theme }) => theme.metrics.getWidthFromDP('5.5%')}px;
+  font-family: CircularStd-Bold;
+  text-align: center;
+`;
+
+type Props = {
+  restaurantName: string,
+};
+
+const AndroidCallout = ({ restaurantName }: Props): Object => (
+  <Wrapper>
+    <RestaurantName>{restaurantName}</RestaurantName>
+  </Wrapper>
+);
+
+export default AndroidCallout;

src/components/screens/near-you/components/Map.js → src/components/screens/near-you/components/map/index.js

@@ -1,16 +1,25 @@
 // @flow
 
 import React, { Component, Fragment } from 'react';
-import MapView, { Marker } from 'react-native-maps';
+import { Platform, View } from 'react-native';
 
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import MapView, { Marker, Callout } from 'react-native-maps';
 import styled from 'styled-components';
 
+import AndroidCallout from './AndroidCallout';
+
 const MapContainer = styled(MapView)`
   width: 100%;
   height: 100%;
 `;
 
+const MarkerWrapper = styled(View)`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+`;
+
 const CustomMarker = styled(Icon).attrs(({ name }) => ({
   size: 30,
   name,
@@ -102,9 +111,20 @@ class Map extends Component<Props, {}> {
             title={name}
             key={id}
           >
-            <CustomMarker
-              name={iconName}
-            />
+            <MarkerWrapper>
+              <CustomMarker
+                name={iconName}
+              />
+              {Platform.OS === 'android' && (
+                <Callout
+                  style={{ flex: 1, position: 'relative' }}
+                >
+                  <AndroidCallout
+                    restaurantName={name}
+                  />
+                </Callout>
+              )}
+            </MarkerWrapper>
           </Marker>
         );
       })}