I'm beginner for react-native, my assignment is in functional react native form. I wish someone can help me solve this problem. This is the class component react native codefrom this source: https://github.com/nathvarun/React-Native-Layout-Tutorial-Series/blob/master/Project%20Files/12%20Tinder%20Swipe%20Deck/%232%20Complete%20Animation/App.js
import React from 'react';import { StyleSheet, Text, View, Dimensions, Image, Animated, PanResponder } from 'react-native';const SCREEN_HEIGHT = Dimensions.get('window').heightconst SCREEN_WIDTH = Dimensions.get('window').widthimport Icon from 'react-native-vector-icons/Ionicons'const Users = [ { id: "1", uri: require('./assets/1.jpg') }, { id: "2", uri: require('./assets/2.jpg') }, { id: "3", uri: require('./assets/3.jpg') }, { id: "4", uri: require('./assets/4.jpg') }, { id: "5", uri: require('./assets/5.jpg') },]export default class App extends React.Component { constructor() { super() this.position = new Animated.ValueXY() this.state = { currentIndex: 0 } this.rotate = this.position.x.interpolate({ inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], outputRange: ['-10deg', '0deg', '10deg'], extrapolate: 'clamp' }) this.rotateAndTranslate = { transform: [{ rotate: this.rotate }, ...this.position.getTranslateTransform() ] } this.likeOpacity = this.position.x.interpolate({ inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], outputRange: [0, 0, 1], extrapolate: 'clamp' }) this.dislikeOpacity = this.position.x.interpolate({ inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], outputRange: [1, 0, 0], extrapolate: 'clamp' }) this.nextCardOpacity = this.position.x.interpolate({ inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], outputRange: [1, 0, 1], extrapolate: 'clamp' }) this.nextCardScale = this.position.x.interpolate({ inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], outputRange: [1, 0.8, 1], extrapolate: 'clamp' }) } componentWillMount() { this.PanResponder = PanResponder.create({ onStartShouldSetPanResponder: (evt, gestureState) => true, onPanResponderMove: (evt, gestureState) => { this.position.setValue({ x: gestureState.dx, y: gestureState.dy }) }, onPanResponderRelease: (evt, gestureState) => { if (gestureState.dx > 120) { Animated.spring(this.position, { toValue: { x: SCREEN_WIDTH + 100, y: gestureState.dy } }).start(() => { this.setState({ currentIndex: this.state.currentIndex + 1 }, () => { this.position.setValue({ x: 0, y: 0 }) }) }) } else if (gestureState.dx < -120) { Animated.spring(this.position, { toValue: { x: -SCREEN_WIDTH - 100, y: gestureState.dy } }).start(() => { this.setState({ currentIndex: this.state.currentIndex + 1 }, () => { this.position.setValue({ x: 0, y: 0 }) }) }) } else { Animated.spring(this.position, { toValue: { x: 0, y: 0 }, friction: 4 }).start() } } }) } renderUsers = () => { return Users.map((item, i) => { if (i < this.state.currentIndex) { return null } else if (i == this.state.currentIndex) { return (<Animated.View {...this.PanResponder.panHandlers} key={item.id} style={[this.rotateAndTranslate, { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}><Animated.View style={{ opacity: this.likeOpacity, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text></Animated.View><Animated.View style={{ opacity: this.dislikeOpacity, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text></Animated.View><Image style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }} source={item.uri} /></Animated.View> ) } else { return (<Animated.View key={item.id} style={[{ opacity: this.nextCardOpacity, transform: [{ scale: this.nextCardScale }], height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}><Animated.View style={{ opacity: 0, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text></Animated.View><Animated.View style={{ opacity: 0, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text></Animated.View><Image style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }} source={item.uri} /></Animated.View> ) } }).reverse() } render() { return (<View style={{ flex: 1 }}><View style={{ height: 60 }}></View><View style={{ flex: 1 }}> {this.renderUsers()}</View><View style={{ height: 60 }}></View></View> ); }}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', },});This I rewrite in functional component react native but it get the error cant get panresponder
import React, { useEffect,useState } from 'react';import { StyleSheet, Text, View, Dimensions, Image, Animated, PanResponder } from 'react-native';const SCREEN_HEIGHT = Dimensions.get('window').heightconst SCREEN_WIDTH = Dimensions.get('window').widthimport Icon from 'react-native-vector-icons/Ionicons'const Users = [ { id: "1", uri: require('../image/antman.jpg') }, { id: "2", uri: require('../image/butterfly.jpg') }, { id: "3", uri: require('../image/captainmarvel.jpg') }, { id: "4", uri: require('../image/antman.jpg') }, { id: "5", uri: require('../image/antman.jpg') },]const SignUpScreen = () =>{ const position = new Animated.ValueXY() const [currentIndex,setCurrentIndex] =useState(0); //const [PanResponder,setPanResponder] = useState(''); const rotate = position.x.interpolate({ inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], outputRange: ['-10deg', '0deg', '10deg'], extrapolate: 'clamp' }) const rotateAndTranslate = { transform: [{ rotate: rotate }, ...position.getTranslateTransform() ] } const likeOpacity = position.x.interpolate({ inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], outputRange: [0, 0, 1], extrapolate: 'clamp' }) const dislikeOpacity = position.x.interpolate({ inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], outputRange: [1, 0, 0], extrapolate: 'clamp' }) const nextCardOpacity = position.x.interpolate({ inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], outputRange: [1, 0, 1], extrapolate: 'clamp' }) const nextCardScale = position.x.interpolate({ inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], outputRange: [1, 0.8, 1], extrapolate: 'clamp' }) useEffect(() => { const panResponder = PanResponder.create({ onStartShouldSetPanResponder: (evt, gestureState) => true, onPanResponderMove: (evt, gestureState) => { position.setValue({ x: gestureState.dx, y: gestureState.dy }) }, onPanResponderRelease: (evt, gestureState) => { if (gestureState.dx > 120) { Animated.spring(position, { toValue: { x: SCREEN_WIDTH + 100, y: gestureState.dy } }).start(() => { setState({ currentIndex: currentIndex + 1 }, () => { position.setValue({ x: 0, y: 0 }) }) }) } else if (gestureState.dx < -120) { Animated.spring(position, { toValue: { x: -SCREEN_WIDTH - 100, y: gestureState.dy } }).start(() => { setState({ currentIndex: currentIndex + 1 }, () => { position.setValue({ x: 0, y: 0 }) }) }) } else { Animated.spring(position, { toValue: { x: 0, y: 0 }, friction: 4 }).start() } } }) }) renderUsers = () => { return Users.map((item, i) => { if (i < currentIndex) { return null } else if (i == currentIndex) { return (<Animated.View {...panResponder.panHandlers} key={item.id} style={[rotateAndTranslate, { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}><Animated.View style={{ opacity: likeOpacity, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text></Animated.View><Animated.View style={{ opacity: dislikeOpacity, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text></Animated.View><Image style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }} source={item.uri} /></Animated.View> ) } else { return (<Animated.View key={item.id} style={[{ opacity: nextCardOpacity, transform: [{ scale: nextCardScale }], height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}><Animated.View style={{ opacity: 0, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text></Animated.View><Animated.View style={{ opacity: 0, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}><Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text></Animated.View><Image style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }} source={item.uri} /></Animated.View> ) } }).reverse() } return (<View style={{ flex: 1 }}><View style={{ height: 60 }}></View><View style={{ flex: 1 }}> {renderUsers()}</View><View style={{ height: 60 }}></View></View> ); };const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', },});export default SignUpScreen;Can anybody help me for this error? Thank you very much