How to select interactable area?

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 :

[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.