React-native-snap-carousel: Example with maps view

Created on 6 Dec 2016 · 7Comments · Source: meliorence/react-native-snap-carousel

Would love to see the example with the maps view (3rd gif) as well.

Source

matthijsdewit

Most helpful comment

All the code related to react-native-snap-carousel would be pretty much the same as the first example. I don't think you'd learn much from it.

The trick is to use the prop onSnapToItem to trigger the map's methods to center it. Like so :

[...]

    _centerMapOnMarker (markerIndex) {
        const mapRef = this._mapView;
        const markerData = this.state.markers[markerIndex];

        if (!markerData || !mapRef) {
            return;
        }
        mapRef.animateToRegion({
            latitude: markerData.geolocation.latitude - CENTER_LAT_OFFSET,
            longitude: markerData.geolocation.longitude,
            latitudeDelta: 0.0315,
            longitudeDelta: 0.0258
        });
    }

                <Carousel
                  items={filteredMarkers}
                  renderItem={this._renderSwiperItem}
                  firstItem={firstItem}
                  sliderWidth={sliderWidth}
                  itemWidth={itemWidth}
                  snapOnAndroid={true}
                  showsHorizontalScrollIndicator={false}
                  slideStyle={styles.slide}
                  containerCustomStyle={styles.slider}
                  contentContainerCustomStyle={styles.sliderContainer}
                  inactiveSlideScale={1}
                  inactiveSlideOpacity={0.8}
                  removeClippedSubviews={false}
                  onSnapToItem={(index, marker) => this._centerMapOnMarker(marker.absoluteIndex)}
                />

onSnapToItems arguments are the index of the item you've just scrolled to on the carousel and its data (that you supplied in the items prop). It should be enough to build basically anything you want.

I won't build a specific example, especially since react-native-maps is far from stable, and is subject to breaking changes quite often.

Exilz on 6 Dec 2016

👍4

All 7 comments

All the code related to react-native-snap-carousel would be pretty much the same as the first example. I don't think you'd learn much from it.

The trick is to use the prop onSnapToItem to trigger the map's methods to center it. Like so :

[...]

    _centerMapOnMarker (markerIndex) {
        const mapRef = this._mapView;
        const markerData = this.state.markers[markerIndex];

        if (!markerData || !mapRef) {
            return;
        }
        mapRef.animateToRegion({
            latitude: markerData.geolocation.latitude - CENTER_LAT_OFFSET,
            longitude: markerData.geolocation.longitude,
            latitudeDelta: 0.0315,
            longitudeDelta: 0.0258
        });
    }

                <Carousel
                  items={filteredMarkers}
                  renderItem={this._renderSwiperItem}
                  firstItem={firstItem}
                  sliderWidth={sliderWidth}
                  itemWidth={itemWidth}
                  snapOnAndroid={true}
                  showsHorizontalScrollIndicator={false}
                  slideStyle={styles.slide}
                  containerCustomStyle={styles.slider}
                  contentContainerCustomStyle={styles.sliderContainer}
                  inactiveSlideScale={1}
                  inactiveSlideOpacity={0.8}
                  removeClippedSubviews={false}
                  onSnapToItem={(index, marker) => this._centerMapOnMarker(marker.absoluteIndex)}
                />

I won't build a specific example, especially since react-native-maps is far from stable, and is subject to breaking changes quite often.

Exilz on 6 Dec 2016

👍4

Hi All contributors!! Great work! Just added in a project today! But In prototype on which I am working on have this carousal with continuous slow motion rather than jump from slide to slide..!! Is there any option to do the behavior in that way??

umer990 on 6 Dec 2016

@umer990 Hi! You can use the prop enableSnap to enable/disable the snapping effect. Is it what you're looking for?
By the way, next time you should open a dedicated issue ;)

bd-arc on 6 Dec 2016

I couldn't find any difference by using that property as I am using autoplay=true.I am looking for the slider/carousal with motion like rail(move continous instead of jumping from one slide to another) of pics!!

umer990 on 6 Dec 2016

@umer990 I can confirm that we haven't implemented it yet. It's on our to-do list, stay tuned!
Further discussion will take place in the dedicated issue #12

bd-arc on 6 Dec 2016

Hi guys, I'm trying to implement the carousel inside of the MapView. Currently I can only implement it underneath, so the carousel doesn't overlay the map. Any pointers on this? Thanks

SKempin on 19 Jun 2018

Hi guys, I'm trying to implement the carousel inside of the MapView. Currently I can only implement it underneath, so the carousel doesn't overlay the map. Any pointers on this? Thanks

slide: { width: '100%', height: 150, position: 'absolute', bottom: 3, zIndex: 2, },
I use this style to overlay Carousel wrapper on my map -- you may need to change zIndex a bit higher