Skip to content

Drag not working when parent view has a background color set #321

Open
@Martizs

Description

@Martizs

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:

  1. react-native-interactable - 2.0.1
  2. node - v12.10.0
  3. react-native - 0.63.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions