react-swipeable-views
react-swipeable-views copied to clipboard
oliviertassinari
Is it possible to disable swiping?
I need to suddenly disable dragging slides and implement another functionality through onSwitch. So when user swipes, slide is not dragging, but plays some animation. disabled="true" would not work, because it disables not only dragging, but onSwitching also.
It sounds like your best option is to reimplement the onSwitching behavior on userland and use disabled={true}. I don't see how we could support this niche use case in the core of the library without harming others.
Do you mean to add disabled={true}, then add swiping event and handle it? In this case I need to use another library. But as I see, swiping in swipeable views works very well and I just don't want to use another library for this. That would be great to have an ability to just disable dragging, but onSwitching could work as it works right now. E.g. prop disableDragging could be the best solution.
To be more clear please check this video. This is what I need to implement. https://streamable.com/s/2e3ax/segobi
If I may add to this; it would be nice to disable dragging in certain directions as well. Perhaps something like:
disableDragging={'left'|'right'|true|false}
...where true would be both and false neither.
@Schlesiger Thanks for jumping in. I better understand the use case now. I think that we can address the issue with a different approach. Going into #275 direction.
We can introduce a getContainerStyle function property that is called with the indexCurrent value and returns the styles applied to the container (where we apply the transform today).
This way, one user will have full control over how the dragging visually happen.
It could help a lot if the onChangeIndex (index, prevIndex, meta) would expect a bool return which would tell the Swipeable if the index should be changed.
Implementing this via messing with styles IMO is architecturally wrong.
Use case:
- a DaysSwipeable that is passed an array of pre-rendered react components (days).
- a MonthSwipeable that is passed an array of pre-rendered react components (months).
When a user swipes the MonthSwipeable, children of the DaysSwipeable get rerendered. Every time. Even though, the developer could pre-render all the 31 child for the DaysSwipeable and just control how far a user is allowed to swipe depending on the number of days in the month specified via the MonthSwipeable. In Feb the user would be able to swipe either to the 28th or the 29th. In the rest of the months it would be possible to swipe to either 30th or 31st. Without any re-rendering of the DaysSwipeable's children at all.
PS: I personally believe that there should be one more event: onIndexChanging(index, prevIndex) for the sole purpose of deciding if the current index change should succeed or not.
This use case has come up again. For now I have am using a local state to keep track of the index. For example if the user slides from index 1 to index 0, I setState(0) and then inside a setTimeout I setState(1). This is a hacky solution and requires two additional render cycles with setState. I agree that there should be a conditional function that expects a returned boolean if the slide is valid.
Same issue here. It would be great if there be a conditional swipe control. In my case it's that user input something and swiping away would lose these data, so I need to warn users before swiping happens.
I would like to know, is it possible to restrict users to swipe at the first and last slide? For Ex. let's suppose I have 3 slides and on 3rd slide, if I swipe right then there is little dragging animation I see, and similarly, if I swipe left on 1st slide too, I don't want that in my application, how to achieve this?
