I am trying to implement a swipe card .Could someone help me with this error

import React, { Component } from 'react';
import { Text, Animated, Dimensions, PanResponder } from 'react-native';

class AlbumDetail extends Component {
 constructor(props) {
 super(props);
 console.log('print log 1');
 const position = new Animated.valueXY();
 console.log('print log 2');
 
 const panResponder = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onPanResponderMove: (event, gesture) => {
    position.setValue({ x: gesture.dx, y: gesture.dy });
  },
  onPanResponderRelease: (event, gesture) => {
    if (gesture.dx > SWIPE_THRESHOLD) {
      forcedSwipe('right');
    } else if (gesture.dx < -SWIPE_THRESHOLD) {
      forcedSwipe('left');
    } else {
      this.resetPosition();
    }
   }
 });

 this.state = { panResponder, position};
 }

render() {
return (
  <Animated.View
    style={this.position.getLayout()}
    {...this.state.panResponder.panHandlers}
  >
    {this.renderCard}
  </Animated.View>
 )}
}

the log error shows this

print log 1

Possible Unhandled Promise Rejection (id: 0): TypeError: undefined is not a constructor (evaluating 'new _reactNative.Animated.valueXY()')

I am trying to implement a swipe card .Could someone help me with this error

import React, { Component } from 'react';
import { Text, Animated, Dimensions, PanResponder } from 'react-native';

class AlbumDetail extends Component {
 constructor(props) {
 super(props);
 console.log('print log 1');
 const position = new Animated.valueXY();
 console.log('print log 2');
 
 const panResponder = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onPanResponderMove: (event, gesture) => {
    position.setValue({ x: gesture.dx, y: gesture.dy });
  },
  onPanResponderRelease: (event, gesture) => {
    if (gesture.dx > SWIPE_THRESHOLD) {
      forcedSwipe('right');
    } else if (gesture.dx < -SWIPE_THRESHOLD) {
      forcedSwipe('left');
    } else {
      this.resetPosition();
    }
   }
 });

 this.state = { panResponder, position};
 }

render() {
return (
  <Animated.View
    style={this.position.getLayout()}
    {...this.state.panResponder.panHandlers}
  >
    {this.renderCard}
  </Animated.View>
 )}
}

the log error shows this

print log 1

Possible Unhandled Promise Rejection (id: 0): TypeError: undefined is not a constructor (evaluating 'new _reactNative.Animated.valueXY()')

• javascript
• reactjs
• react-native

1 Answer 1

You made mistake in this line:

new Animated.ValueXY() //capital V

Please refer documentation for further details