Example with maps view

[matthijsdewit]

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

[Exilz]

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.

[umer990]

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??

[bd-arc]

@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 ;)

[umer990]

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!!

[bd-arc]

@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

[SKempin]

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

[bigo104]

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