Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Martizs opened this issue Mar 9, 2021 · 0 comments
Open

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

Martizs opened this issue Mar 9, 2021 · 0 comments

Comments

@Martizs
Copy link

Martizs commented Mar 9, 2021

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant