Description
So yeah drag not working when parent view has a background color set, when the background color is removed, the drag starts to work. And just to specify by 'drag not working' i mean the Interactable.View component doesnt respond to drag at all, just stays stationary. Tested on android emulator.
Code to reproduce:
`import React from 'react';
import { Animated, Text, View } from 'react-native';
import Interactable from 'react-native-interactable';
export class ComponentTests extends React.Component {
constructor(props) {
super();
this.deltaY = new Animated.Value(0);
this.deltaX = new Animated.Value(0);
}
render() {
return (
<Text style={{ color: '#fff' }}>Want this to be above
{/* this views background color 'disables' draging of Interactable.View */}
<View style={{ backgroundColor: '#fff' }}>
<Interactable.View
verticalOnly={true}
snapPoints={[{ y: 200 }, { y: 400 }]}
initialPosition={{ x: 0, y: 200 }}
animatedValueX={this.deltaX}
animatedValueY={this.deltaY}
animatedNativeDriver
// onSnap={this.onDrawerSnap}
>
<View style={{ backgroundColor: '#ff0', height: 20, width: 20 }} />
</Interactable.View>
<Animated.View
style={[
{
backgroundColor: '#f00',
position: 'absolute',
top: 220,
width: '50%',
},
{
transform: [
{
translateY: this.deltaY.interpolate({
inputRange: [200, 200, 400, 400],
outputRange: [0, 0, 200, 200],
}),
},
],
},
]}
>
<Text>change me daddy</Text>
</Animated.View>
</View>
</View>
);
}
}
`
Versions:
- react-native-interactable - 2.0.1
- node - v12.10.0
- react-native - 0.63.3