Marker Icons

components/store/StoreMarker.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { MarkerContainer, MarkerStoreName } from '../../styled/store';
+
+function StoreMarker({ storeName, focused }) {
+  return (
+    <MarkerContainer>
+      {focused && (
+        <Image source={require('../../assets/images/Marker_Focused.png')} />
+      )}
+      {!focused && (
+        <Image source={require('../../assets/images/Marker_Resting.png')} />
+      )}
+      <MarkerStoreName>{storeName}</MarkerStoreName>
+    </MarkerContainer>
+  );
+}
+
+export default StoreMarker;

screens/map/MapScreen.js

@@ -11,10 +11,16 @@ import { NavHeaderContainer, Subhead } from '../../components/BaseComponents';
 import CenterLocation from '../../components/CenterLocation';
 import Hamburger from '../../components/Hamburger';
 import StoreProducts from '../../components/product/StoreProducts';
+import StoreMarker from '../../components/store/StoreMarker';
 import Colors from '../../constants/Colors';
 import Window from '../../constants/Layout';
 import { getProductData, getStoreData } from '../../lib/mapUtils';
-import { BottomSheetContainer, BottomSheetHeaderContainer, DragBar, SearchBar } from '../../styled/store';
+import {
+  BottomSheetContainer,
+  BottomSheetHeaderContainer,
+  DragBar,
+  SearchBar,
+} from '../../styled/store';
 
 const minSnapPoint = 160;
 const midSnapPoint = 325;
@@ -203,6 +209,16 @@ export default class MapScreen extends React.Component {
   // Only called after initial store has been set
   // Only expand the bottom sheet to display products if navigated from 'See Products' button on StoreList
   changeCurrentStore(store, resetSheet = false) {
+    // Set store focus status
+    this.state.store.focused = false;
+    store.focused = true;
+
+    // Animate to new store region
+    const region = {
+      latitude: store.latitude,
+      longitude: store.longitude,
+      ...deltas,
+    };
     this.setState(
       {
         store,
@@ -212,6 +228,7 @@ export default class MapScreen extends React.Component {
           this.bottomSheetRef.snapTo(0);
         }
         await this._populateStoreProducts(store);
+        await this._map.animateToRegion(region, 1000);
       }
     );
   }
@@ -282,10 +299,12 @@ export default class MapScreen extends React.Component {
                 latitude: store.latitude,
                 longitude: store.longitude,
               }}
-              title={store.storeName}
-              description={store.storeName}
-              onPress={() => this.changeCurrentStore(store)}
-            />
+              onPress={() => this.changeCurrentStore(store)}>
+              <StoreMarker
+                storeName={store.storeName}
+                focused={store.focused}
+              />
+            </Marker>
           ))}
           {/* If current location found, show current location marker */}
           {this.state.location && (
@@ -294,8 +313,7 @@ export default class MapScreen extends React.Component {
                 .toString()
                 .concat(coords.longitude.toString())}
               coordinate={coords}
-              title="Your Location"
-              pinColor="#166e00"
+              image={require('../../assets/images/Current_Location.png')}
             />
           )}
         </MapView>

styled/store.js

@@ -3,6 +3,19 @@ import styled from 'styled-components/native';
 import { Body, ButtonContainer } from '../components/BaseComponents';
 import Colors from '../constants/Colors';
 
+export const MarkerContainer = styled.View`
+  width: 150px
+  display: flex
+  align-items: center
+`;
+export const MarkerStoreName = styled.Text`
+  font-family: poppins-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center
+  color: ${Colors.black};
+`;
+
 export const DragBar = styled.View`
   background-color: ${Colors.secondaryText};
   height: 4px;