I have seen the same problem with ScrollView with PanResponder, and when I solved it as it says there, I did not succeed, the problem is that on my expo go on web everything works correctly, but if I run expo on ios (I do not know how it works on android, I did not check). My project starts without errors, and allows me to swipe once, calling panHandler once and you can still swipe, but when I finish swiping, the swipe itself does not work, and the console.log that I have in onPanResponderMove is called correctly and constantly as long as I need. In general, I need a panHandler so that when I swipe to a certain point in x, a certain action occurs, either animation or deletion.
import React, { Component, MutableRefObject, useMemo, useRef, useState } from 'react';
import { View, StyleSheet, Image, Text, TouchableOpacity,Dimensions,ScrollView, PanResponder,Animated, PanResponderInstance, GestureResponderEvent, LayoutChangeEvent, PointerEvent } from 'react-native';
import { listOfChatsStyle } from '../../Styles/ListOfChatsStyle';
import Message from '../../1HelpFullFolder/Message';
import Chat from '../../1HelpFullFolder/Chat';
import LastMessageStatus from './LastMessageStatus';
import ModeActivity from '../Status Content/ModeActivity';
import { GestureHandlerRootView, RectButton,Swipeable} from "react-native-gesture-handler";
interface ChatProps {
chat: Chat;
}
interface ForState{
isSwiped:boolean
}
const { width: screenWidth ,height:screenHeight} = Dimensions.get('window');
class ChatContainer extends React.Component<ChatProps,ForState>{
private chat:Chat;
private lastMessage: Message | undefined;
private position:any;
private panResponderRight: PanResponderInstance;
private setIsSwiped(isSwiped: boolean) {
this.setState({ isSwiped });
}
constructor(props: ChatProps) {
super(props);
this.state={
isSwiped:false,
};
this.chat=props.chat;
this.lastMessage=this.chat.listOfMessages.length > 0 ? this.chat.listOfMessages[this.chat.listOfMessages.length - 1] : undefined;
this.panResponderRight= PanResponder.create({
onPanResponderMove(e, gestureState) {
console.log(10)
},
onStartShouldSetPanResponder:(evt,gestureState)=>true,
onMoveShouldSetPanResponder: (event, gesture) => {
if (gesture?.moveX > gesture?.moveY) {
return false;
}
return true;
},
onPanResponderRelease(){
}
})
}
private renderRightActions= (progress:any, dragX:any) => {
const scale1=progress.interpolate({
inputRange:[0,1],
outputRange:[150,0],
})
const scale2=progress.interpolate({
inputRange:[0,1],
outputRange:[75,0],
})
return (
<View style={{flexDirection:"row",maxWidth:screenWidth*0.5,minWidth:150}}>
{!this.state.isSwiped?<Animated.View style={{flex:1,transform:[{translateX:!this.state.isSwiped?scale1:scale2}]}}>
<RectButton style={[{backgroundColor:"yellow"},listOfChatsStyle.rightAction]}>
<Text>Notify</Text>
<Animated.View style={{width:screenWidth,backgroundColor:"yellow",position:"absolute",zIndex:-1,top:0,bottom:0,left:0}}/>
</RectButton>
</Animated.View>:<Animated.View style={{flex:1,position:"absolute",zIndex:-1,transform:[{translateX:scale1}]}}>
<RectButton style={[{backgroundColor:"yellow"},listOfChatsStyle.rightAction]}>
<Text>Notify</Text>
<Animated.View style={{width:screenWidth,backgroundColor:"yellow",position:"absolute",zIndex:-1,top:0,bottom:0,left:0}}/>
</RectButton>
</Animated.View>}
<Animated.View style={{flex:1,transform:[{translateX:!this.state.isSwiped?scale2:scale1}]}}>
<RectButton style={[{backgroundColor:"red"},listOfChatsStyle.rightAction]}>
<Text>Delete</Text>
</RectButton>
<Animated.View style={{width:screenWidth*1.5,backgroundColor:"red",position:"absolute",zIndex:-1,top:0,bottom:0,left:0}}/>
</Animated.View>
</View>
)
};
render() {
return(
<View>
<TouchableOpacity
onPress={this.handlePress}
onLongPress={this.handleLongPress}
pressRetentionOffset={{ top: 0, left: 0, right: 0, bottom: 0 }}
activeOpacity={1}
>
<View style={listOfChatsStyle.helpContainer}/>
<GestureHandlerRootView>
<Swipeable renderRightActions={this.renderRightActions}>
<View style={listOfChatsStyle.chatcontainer} {...this.panResponderRight.panHandlers}>
</View>
</Swipeable>
</GestureHandlerRootView>
</TouchableOpacity>
</View>
);
}
};
export default React.memo(ChatContainer);
I tried to fix it for 3 days for 6 hours, I have already tried everything, but I need panHandler because in another way the coordinates cannot be dynamically obtained, or I do not know about it, but if it is possible, I will also accept it as an answer, thank you very much