Partially view adjacent views

[divyenduz]

Is it possible to use this library and create partially visible swiper like

[robbue]

overflow: visible on the <Swiper> component will get you started

<Swiper style={{overflow: 'visible'}} width={300}>
  ...
</Swiper>

[divyenduz]

I tried this out, it renders the component unusable. the swipe stops working. I think this is a bug.

[robbue]

It should not give you any errors. If so, what kind of errors do you get? I experienced that setting flex: 1 on the children elements could block swiping

[divyenduz]

Aha! It worked, this can be closed. I had flex: 1 on children from the example in README.md

Regards,

[RubenSandwich]

I'm also looking into doing this.

One problem I'm running into is that this now makes it so that scrolling can only happen in the on the size of the supplied width prop, whereas I'd like scrolling to happen even if it starts on the partially visible views.

(I tried to use hitSlop to no avail.)

@divyenduz Did you run into this problem as well?

[divyenduz]

@RubenSandwich : Nope, I quit on it and moved out of react-native for now when not doing hobby stuff.

[dwilt]

I'm also looking into making this work. Having trouble.

[andrispraulitis]

Yes, here is a little bug on swiper style. Basically the same style prop is added to scrollview as well as contentContainerStyle which makes no sense.

https://github.com/leecade/react-native-swiper/blob/master/src/index.js#L551 https://github.com/leecade/react-native-swiper/blob/master/src/index.js#L553

I think that contentContainerStyle should not include swiper style and also should be added before {...this.props} so you can have a swiper style as well as option to override contentContainerStyle.

Anyone else agree?

[andrispraulitis]

If I have control over each of those style properties it's totally doable, take a look at the screenshot.

I got it working anyway by dividing some margins with 2 as they are added twice...

[dwilt]

I put together a video showing how we got it working in our app: https://youtu.be/BG9Cxgylue0

[RubenSandwich]

@dwilt

Thank you for commenting. Your solution hits a few problems that ultimately had my team make our own swiping component.

• The overflow: 'visible' currently only works on iOS, while overflow support just landed as an experimental feature for Android you have to sacrifice other things to use it: z-index, etc. See release notes here.

• With the overflow: 'visible' solution the overflow, while shown, does not register touches on the gutters. So while this solution might be viable for large 'cards' it falls apart for small 'cards'.

Because both of those issues were deal breakers for our project. My team ended up creating our own swiper using a ScrollView with on iOS setting the snapToInterval to our card size and on Android firing an onScroll when the user finished scrolling that scrolled them to a position that centered a card. If your curious I might be able to throw up a Gist in a day or two with that code.

[rogerkerse]

@RubenSandwich would be interested in the Gist :)

[RubenSandwich]

@rogerkerse

Here is the Swiper Component gist: https://gist.github.com/RubenSandwich/8b51c5cf188575844a2a0917fca3ac02

And an example on how to use it: https://gist.github.com/RubenSandwich/f21beca752ea1d41d5341e9b35352cdd

My team ultimately did not use this code as we run into other problems. Namely:

1. Android has no reliable way to set ScrollView's initial contentOffset.
2. contentOffset does not work with a ListView when your initial card is past the page size. (And we needed a ListView because of the number of cards we need.)

Those problems led us to ultimately pursue a different direction so the above code never saw production. But consider the gists to be MIT licensed, so feel free to use it in whatever way you want.

[dwilt]

@RubenSandwich Yep, totally understand your points. For Android, we'll be implementing the overflow and aren't using zIndex so that's not a sacrifice that kills us. And our users have run into the issue of swiping from the far left and right and thus it not working (as you pointed out) which sucks. I'll report back here if I ever solve or find a better solution.

[grundmanise]

@RubenSandwich have you tried to implement this from the native side?

[tdurand]

Hi there,

I'm trying to make the overflow: visible on the Swiper component on Android even knowing the drawbacks, with react native 0.41.2 , but it doesn't seem to work. The following / previous card doesn't appear.

Any of you succeeded to make it work ?

[saurabhsg83]

@tdurand doing it on 0.42.3, not working for me either. @RubenSandwich, @robbue , @dwilt is there any solution for android for partial visibility of swiper?

[andrispraulitis]

@saurabhsg83 yes there is: https://github.com/archriss/react-native-snap-carousel

[adarshTS]

Can someone help me with this https://stackoverflow.com/questions/45568086/how-to-select-the-center-item-in-a-scroll-view-from-a-list-of-items

[madebyrobin]

I've just been battling with this myself, so in case anyone else finds themselves in this scenario, I ended up using React Native's default FlatList instead and found it much easier to do what I wanted:

        <FlatList
          data={this.state.cards}
          renderItem={this._renderCard}
          pagingEnabled={true}
          horizontal={true}
          onViewableItemsChanged={this.onViewableItemsChanged}
          viewabilityConfig={this.viewabilityConfig}
          showsHorizontalScrollIndicator={false}
          decelerationRate={0}
          snapToInterval={Dimensions.get("window").width - 60}
          snapToAlignment={"center"}
          centerContent={true}
          contentInset={{
            top: 0,
            left: 30,
            bottom: 0,
            right: 30
          }}
        />

[wyrustaaruz]

also you can use this lib. https://www.npmjs.com/package/react-native-snap-carousel

[nghiemtien]

using props : scrollViewStyle={{overflow: 'visible'}} removeClippedSubviews={false} containerStyle={{ width: 300 }}

[KYesmine]

Thank you nghiemtien, works perfectly for me 👍

[divyenduz]

✅

[Emmanuel0705]

@saurabhsg83 yes there is: https://github.com/archriss/react-native-snap-carousel

this works

[dogukanakkaya]

Is there any way for this to work with cssMode: true. It adds overflow: auto and changing that breaks the scroll snap.