Fix interaction, polish sheet dragging

App.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useState, Fragment } from 'react';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
 
 import SearchBar from './src/SearchBar/SearchBar'
 import PlaceSheet from './src/PlaceSheet/PlaceSheet'
@@ -13,10 +14,10 @@ const App = () => {
   return (
     <Fragment>
       <NTUMap location={location} route={route} />
-      <PlaceSheet location={location} onClose={onSheetClose} route={route} setRoute={setRoute} />
       <SearchBar onLocationSelect={setLocation} />
+      <PlaceSheet location={location} onClose={onSheetClose} route={route} setRoute={setRoute} />
     </Fragment>
   )
 }
 
-export default App;
+export default gestureHandlerRootHOC(App);

android/app/build.gradle

@@ -188,6 +188,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-gesture-handler')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.facebook.react:react-native:+"  // From node_modules
 

android/app/src/main/java/com/ntumapjs/MainApplication.java

@@ -7,6 +7,7 @@
 import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
 import com.facebook.react.bridge.JavaScriptExecutorFactory;
 import com.facebook.react.ReactApplication;
+import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.soloader.SoLoader;

android/settings.gradle

@@ -1,3 +1,5 @@
 rootProject.name = 'ntumapjs'
+include ':react-native-gesture-handler'
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'

ios/Podfile

@@ -27,6 +27,8 @@ target 'ntumapjs' do
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
+  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
+
   target 'ntumapjsTests' do
     inherit! :search_paths
     # Pods for testing

package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "@mapbox/sphericalmercator": "^1.1.0",
     "@react-native-mapbox-gl/maps": "^7.0.1",
-    "react": "16.8.6",
-    "react-native": "0.60.5",
+    "react": "16.9.0",
+    "react-native": "0.61.0-rc.2",
     "react-native-cheerio": "^1.0.0-rc.4",
     "react-native-gesture-handler": "^1.4.1",
     "react-native-reanimated": "^1.2.0",

src/BusBar/BusBar.js

@@ -1,8 +1,9 @@
 import React from 'react'
 import Icon from 'react-native-vector-icons/MaterialIcons'
-import { TouchableNativeFeedback, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { LINES } from '../../constants'
-
+import { TouchableNativeFeedback } from 'react-native-gesture-handler'
+import Animated from 'react-native-reanimated'
 export const BAR_HEIGHT = 52.6 + 40
 
 const styles = StyleSheet.create({
@@ -13,35 +14,43 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: BAR_HEIGHT,
   },
+  buttonWrap: {
+    elevation: 5,
+    borderRadius: 100,
+    overflow: 'hidden',
+    marginLeft: 5,
+    marginRight: 5,
+  }
 })
 export default ({ setRoute, route }) => {
   return (
     <View style={styles.bus}>
       {LINES.map((line, index) => {
         const active = !!(route && route.value === line.value)
         return (
-          <TouchableNativeFeedback
-            key={line.value}
-            onPress={() => setRoute(active ? null : line)}
+          <Animated.View
+            style={styles.buttonWrap}
           >
-            <View
-              style={{
-                padding: 10,
-                borderRadius: 100,
-                backgroundColor: !active ? "#fff" : line.color,
-                elevation: 5,
-                marginRight: index !== LINES.length - 1 ? 10 : 0,
-              }}
+            <TouchableNativeFeedback
+              key={line.value}
+              onPress={() => setRoute(active ? null : line)}
             >
-              <Icon
-                name="directions-bus"
-                size={32}
+              <View
                 style={{
-                  color: active ? '#fff' : line.color,
+                  padding: 10,
+                  backgroundColor: !active ? "#fff" : line.color,
                 }}
-              />
-            </View>
-          </TouchableNativeFeedback>
+              >
+                <Icon
+                  name="directions-bus"
+                  size={32}
+                  style={{
+                    color: active ? '#fff' : line.color,
+                  }}
+                />
+              </View>
+            </TouchableNativeFeedback>
+          </Animated.View>
         )
       })}
     </View>

src/NTUMap/BusRouteMarkers.js

@@ -58,7 +58,6 @@ export const BusRouteMarkers = ({ route }) => {
           }}
         />
       </MapboxGL.ShapeSource>
-
       <ProgressMarkers line={route.value} color={route.color} url={`http://baseride.com/routes/apigeo/routevariantvehicle/${progressId}/?format=json`} />
     </Fragment>
   )

src/NTUMap/NTUMap.js

@@ -9,7 +9,8 @@ import { StyleSheet, PermissionsAndroid, ActivityIndicator, View } from 'react-n
 import { TargetMarker } from './TargetMarker'
 import { BusRouteMarkers } from './BusRouteMarkers'
 
-MapboxGL.setAccessToken("pk.eyJ1IjoiZGVsb2xkIiwiYSI6ImNpdDh2bTk3azAwMmIyenFkM2p0b2F4dHkifQ.aeKRzxbIUcSDVromSe-tHg");
+const ACCESS_TOKEN = 'pk.eyJ1IjoiZGVsb2xkIiwiYSI6ImNpdDh2bTk3azAwMmIyenFkM2p0b2F4dHkifQ.aeKRzxbIUcSDVromSe-tHg'
+MapboxGL.setAccessToken(ACCESS_TOKEN);
 
 const styles = StyleSheet.create({
   mapContainer: {
@@ -45,7 +46,12 @@ export default ({ location, route }) => {
       <BusMarkerProvider ref={shotRef} />
       {mapReady ? (
         <View style={styles.mapContainer}>
-          <MapboxGL.MapView style={styles.mapView} compassEnabled={false} minZoomLevel={1}>
+          <MapboxGL.MapView
+            style={styles.mapView}
+            styleURL={encodeURI(`https://raw.githubusercontent.com/delold/ntu-campus-map/f47ee4bcda3472935/style.json`)}
+            compassEnabled={false}
+            minZoomLevel={1}
+          >
             <MapboxGL.Images
               images={{
                 pin: pinIcon,
@@ -59,10 +65,6 @@ export default ({ location, route }) => {
               }}
             />
 
-            <MapboxGL.RasterSource id="gothereRS" url="https://gothere.sg/tiles/v14c/{x}/{y}/{z}" tileSize={256}>
-              <MapboxGL.RasterLayer id="gothereRSL" />
-            </MapboxGL.RasterSource>
-
             <BusRouteMarkers route={route} />
             <TargetMarker location={location} />