React-native-interactable: Toggle Interactable?

[GeorgeA93]

Is there any way to toggle the "Interactability" of a view? Basically what I am trying to do is only allow a user to interact with my view after they have performed another action such as pressing another button.

I have a scrollable tab view where one tab contains a list of images, where each image takes up the full width of the screen. Imagine this: (with limited white space)

But you can swipe left and right to change tabs.

I am trying to achieve "swipeable" cards and swipe to change tabs. Thus, in order to swipe a card you have to perform another action to enable the interaction, such as pressing a button or a long press. Otherwise you will only ever be able to swipe the cards and not change tab.

[portons]

@GeorgeA93, You could always make a wrapper component, give it a prop 'disabled', and, depending on the prop, render either:

<View> { this.props.children } </View>

OR

<Interactable.View> { this.props.children } </Interactable.View>

[GeorgeA93]

@portons Thank you for the suggestion, I am currently doing something similar to that atm but your solution is cleaner.

I was wondering wether there was a more built in way to do it really.

[talkol]

There was also issue #42 that requested something similar. And issue #15 which could be related.

I thought about combining them all to the same solution. Want to help design the API? What should the prop be?

Also, there's another possible temporary solution. You can wrap your Interactable with a View and on this view play with its pointerEvents prop. This will control whether the Interactable receives touch events or not.

[talkol]

There is now a built in way on master with dragEnabled, iOS only currently, Android coming soon

[GeorgeA93]

@talkol dragEnabled is what I need! Thank you for that.

[talkol]

I'm reopening until Android support is in master

[ButtersHub]

@talkol , Android now supports _dragEnabled_

[andrenanninga]

I don't know if this is the right place but dragEnabled has slightly different behaviour on Android than iOS.

I have a use-case where I set dragEnabled based on a alertArea. When the view enters the alertArea (using the snapTo method) I set dragEnabled to true, when it leaves I set it to false. On iOS this change of dragEnabled will stop any dragging and snap to the nearest point. On Android the user can keep dragging until the user lets go. Only from then on is dragging disabled.

I'm not sure which behaviour is more desirable but I would be nice if it was consistent.

[talkol]

@FakeYou lol, can you choose between the two, I have a hard time imagining what makes more sense :)

[andrenanninga]

@talkol well for my particular use-case the iOS version makes more sense.

[ButtersHub]

@FakeYou, thanks for the PR, it was merged to master.
I added test under the "Alert Areas and Drag Event".

[talkol]

Seems resolved to me, please reopen if anything isn't working as expected