React-native-interactable: How to select interactable area?

[henrikra]

My situations is this:

I would like to make card which have two snapping points: closed and opened. I would also like to drag the card only from the red area. But at the moment I am facing problem where my Card component is wrapped in Interactable.View and the Card moves nicely but no matter where I drag it, it moves. This is not decired.

So basically I would like to move the whole card but drag would be enable only from the red area :) For example the white are of the card has ListView which I can't scroll at the moment

Let me know if you want more details :)

[ButtersHub]

Actually, it should work now both on Android & iOS, in this case the white area should be some scrollable container that will get touchEvent priority over the InteractableView.

For example:

const Screen = {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height - 75
};


export default class SwipeableCardWithScrollView extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Interactable.View
                    key="third"
                    verticalOnly={true}
                    initialPosition={{x: 0, y: Screen.height/2+100}}
                    snapPoints={[
                        {y: Screen.height/2+100, damping: 0.7},
                        {y: Screen.height/2-300, damping: 0.7}
                    ]}>
                    <View style={styles.card}/>
                    <ScrollView style={styles.card1}/>
                </Interactable.View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    card: {
        width: 300,
        height: 200,
        backgroundColor: '#ffcccc',
        borderRadius: 0
    },

    card1: {
        width: 300,
        height: 200,
        minHeight: 200,
        backgroundColor: '#5d9de4',
        borderWidth: 0,
    }
});

The result would be :

[henrikra]

Look pretty good! Can the content inside that ScrollView be scrolled? Also what if I don't have scrollable content in the blue card?

[ButtersHub]

ScrollView supposed to work. It kind of work around to what you wanted, we are relying on who is going intercept the touchEvents.
Scrollable containers and other views that need hijack the dragging touchEvent (for example seekbar), will do the work in the blue area.

[ButtersHub]

@henrikra, please update us on your result with this

[ButtersHub]

@henrikra, you can try latest version from touchBlockerBranch branch.
Just wrap the area that you don't want to be Interactable with Interactable.InterceptionBlocker. (currently supported only on Android), you can see test in example:

[alfian0]

@ButtersHub what brach you used, because in my app drag on blue area still active

[henrikra]

@ButtersHub Are you still working on this?

[alfian0]

@henrikra I think code change on native android from touchBlockerBranch not merged to Interactable master branch, when I change to touchBlockerBrach working well, but on iOS got error from InterceptionBlocker,, need delete delete InterceptionBlocker export line to work well on android and iOS 😄

[ButtersHub]

@alfian0, @henrikra is right, currently it is only implemented on Android on touchBlockerBranch branch called.

iOS is in progress, any native development contribution is welcome :)

[BenjaminFarquhar]

@ButtersHub With your solution with the Scrollview, when I add content to the Scrollview, the content inside the Scrollview is able to scroll the whole Interactable.View. So it doesn't work. I must be missing something. What is it that causes the <Scrollview> to take touchEvent priority and what could cause the content inside the Scrollview to not have that priority?

[rotemmiz]

I am closing the issue as a part of an effort to cleanup and revive the project. If this issue persists after v1.0.0, you are more than welcome to reintroduce it.

Thanks for your contribution.

[Javis1205]

@BenjaminFarquhar @rotemmiz this issue persists !!!