Waypoint card component

[kylebarron]

Laying out some thoughts about waypoint card component. The cards should be swipeable left and right, but also able to expand vertically for more details.

To do:

• Get basic example of react-native-snap-carousel working.
• Figure out vertical expansion.
  • Simplest option: have a "more details" button, that then adds a modal on top, which doesn't change the layout of the card itself.
  • Better UI option: figure out how to expand the card itself vertically on touch or swipe

Details

• layout={'default'}, is definitely the best choice. This uses FlatList instead of ScrollView, so it will be much more performant.
• [ ] Figure out how to expand the card vertically on touch or swipe. See here for adding onPress.
• [ ] Figure out what the ref prop does. I think this allows access the carousel component by calling this._carousel in the component class?
• [ ] Figure out ordering of waypoints
• [ ] Figure out whether to use ParallaxImage component. Still not 100% what parallax does, other than it makes it prettier. I don't think this is necessary because I'm not going to be showing photos for these cards anyways?

Tips and tricks

• [ ] Reread notes from "Tips and Tricks"
• [ ] "If your data set is huge, consider loading additional chunks of data only when the user has reached the end of the current set. In order to do this, you'll have to play with VirtualizedList's props onEndReached and onEndReachedThreshold"

[kylebarron]

Check out "dynamic height".

[kylebarron]

Also check out bottom sheet components. No idea if this could go inside the carousel component. Sounds messy, but could work:

• https://github.com/wix/react-native-interactable
• https://github.com/wix/react-native-interactable/blob/master/playground/src/real-life-examples/MapPanel.js
• https://stackoverflow.com/questions/54788325/how-to-make-the-ios-bottom-sheet-panel-of-maps-in-react-native
• https://github.com/osdnk/react-native-reanimated-bottom-sheet
• https://material.io/components/sheets-bottom/#standard-bottom-sheet
• https://stackoverflow.com/questions/41265568/bottom-up-drawer-in-react-native
• https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior