Swipeable does not work with PanResponder React Native

115 Views Asked by At

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

0

There are 0 best solutions below