Updated map cards to have more consistent scrolling

Using react-native-snap-carousel for more consistent scrolling, but had an issue with the main package where you can't have custom onScroll animations, found this pr meliorence/react-native-snap-carousel#439 and it seems to resolve the issue so until that is merged or not will continue using the modified code from that repo.
duranhumes · Jan 28, 2019 · 799e8db · 799e8db
1 parent 5fc95a4
commit 799e8db
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 27 deletions.
diff --git a/mobile/package.json b/mobile/package.json
@@ -22,6 +22,8 @@
         "react-native-maps": "^0.23.0",
         "react-native-phone-call": "^1.0.9",
         "react-native-picker-select": "^5.2.3",
+        "//": "Not using the original package from archriss because of the onScroll issue when updating the maps, this dev has solved that problem and until the pr gets merged his version with be used. https://github.com/archriss/react-native-snap-carousel/pull/439",
+        "react-native-snap-carousel": "Jberivera/react-native-snap-carousel#feature/AllowAnimatedEvent",
         "react-navigation": "^3.1.0",
         "uuid": "^3.3.2"
     },
@@ -31,6 +33,7 @@
         "@types/node": "^10.12.18",
         "@types/react": "^16.7.21",
         "@types/react-native": "^0.57.32",
+        "@types/react-native-snap-carousel": "^3.7.1",
         "@types/react-navigation": "^3.0.1",
         "@types/react-test-renderer": "^16.0.3",
         "@types/uuid": "^3.4.4",

diff --git a/mobile/src/screens/AroundMe/components/Card.tsx b/mobile/src/screens/AroundMe/components/Card.tsx
@@ -6,17 +6,17 @@ import { VIEWPORT_WIDTH, CARD_WIDTH, CARD_HEIGHT } from '../constants';
 import { IMarker } from '../interfaces';
 
 interface ICard {
-    marker: IMarker;
+    item: IMarker;
     handleNavigation: (...args: any) => void;
     handleCall: (...args: any) => void;
 }
 
-export function Card({ marker, handleNavigation, handleCall }: ICard) {
-    const { title, address, phone } = marker;
+export function Card({ item, handleNavigation, handleCall }: ICard) {
+    const { title, address, phone } = item;
     return (
         <TouchableHighlight
             style={styles.card}
-            onPress={() => handleNavigation(marker)}>
+            onPress={() => handleNavigation(item)}>
             <View style={styles.textContent}>
                 <Text numberOfLines={1} style={styles.cardTitle}>
                     {title}

diff --git a/mobile/src/screens/AroundMe/components/CardList.tsx b/mobile/src/screens/AroundMe/components/CardList.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Animated, StyleSheet } from 'react-native';
+import Carousel from 'react-native-snap-carousel';
 
 import { Card } from './Card';
 import { CARD_WIDTH, VIEWPORT_WIDTH } from '../constants';
@@ -19,14 +20,15 @@ export function CardList({
     handleCall,
 }: ICardList) {
     return (
-        <Animated.ScrollView
-            horizontal={true}
-            scrollEventThrottle={15}
-            showsHorizontalScrollIndicator={false}
-            snapToInterval={CARD_WIDTH}
-            decelerationRate={0}
-            directionalLockEnabled={true}
-            snapToAlignment="left"
+        <Carousel
+            data={markers}
+            renderItem={({ item }: any) => (
+                <Card
+                    item={item}
+                    handleNavigation={handleNavigation}
+                    handleCall={handleCall}
+                />
+            )}
             onScroll={Animated.event(
                 [
                     {
@@ -39,27 +41,18 @@ export function CardList({
                 ],
                 { useNativeDriver: true }
             )}
-            style={styles.scrollView}
-            contentContainerStyle={styles.endPadding}>
-            {markers.map(marker => (
-                <Card
-                    key={marker.id}
-                    marker={marker}
-                    handleNavigation={handleNavigation}
-                    handleCall={handleCall}
-                />
-            ))}
-        </Animated.ScrollView>
+            sliderWidth={VIEWPORT_WIDTH}
+            itemWidth={CARD_WIDTH}
+            containerCustomStyle={styles.scrollView}
+            activeAnimationType={'spring'}
+        />
     );
 }
 
 const styles = StyleSheet.create({
-    endPadding: {
-        paddingRight: VIEWPORT_WIDTH - CARD_WIDTH,
-    },
     scrollView: {
         position: 'absolute',
-        bottom: 30,
+        bottom: 0,
         left: 0,
         right: 0,
         paddingVertical: 10,

diff --git a/mobile/yarn.lock b/mobile/yarn.lock
@@ -745,6 +745,14 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.5.1.tgz#a38f69c62528d56ba7bd1f91335a8004988d72f7"
   integrity sha512-mNhVdZHdtKHMMxbqzNK3RzkBcN1cux3AvuCYGTvjEIQT2uheH3eCAyYsbMbh2Bq8nXkeOWs1kyDiF7geWRFQ4Q==
 
+"@types/react-native-snap-carousel@^3.7.1":
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/@types/react-native-snap-carousel/-/react-native-snap-carousel-3.7.1.tgz#26222d5d23cf1971f40c6b3ae71acdf709589f77"
+  integrity sha512-x45p/1OEMZ+XIURCrPDMQmSSnAmrVpEoeH0JePaH6msWWudFeWo+54IFlTSLOcQBW8nThXdeTfAPG058D684hQ==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+
 "@types/react-native@*", "@types/react-native@^0.57.32":
   version "0.57.32"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.32.tgz#5c4d43fe50f4bae81390e835209d501270b9704a"
@@ -6503,6 +6511,14 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+[email protected]:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
+  integrity sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-clone-referenced-element@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-clone-referenced-element/-/react-clone-referenced-element-1.1.0.tgz#9cdda7f2aeb54fea791f3ab8c6ab96c7a77d0158"
@@ -6640,6 +6656,13 @@ [email protected], "react-native-screens@^1.0.0 || ^1.0.0-alph
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz#7a120377b52aa9bbb94d0b8541a014026be9289b"
   integrity sha512-kSyAt0AeVU6N7ZonfV6dP6iZF8B7Bce+tk3eujXhzBGsLg0VSLnU7uE9VqJF0xdQrHR91ZjGgVMieo/8df9KTA==
 
+react-native-snap-carousel@Jberivera/react-native-snap-carousel#feature/AllowAnimatedEvent:
+  version "3.7.5"
+  resolved "https://codeload.github.com/Jberivera/react-native-snap-carousel/tar.gz/658c281c914431497582146a9109aecd084414f5"
+  dependencies:
+    prop-types "^15.6.1"
+    react-addons-shallow-compare "15.6.2"
+
 [email protected]:
   version "8.0.10"
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-8.0.10.tgz#b07e2342d1486220f5fda1a584e316e7d2d1f392"