CODEWITHSUNDEEP
androidreact-native
jammy
jammy

Reputation: 977

panResponder not working in react native android

I don't see the panResponsder working in my android phone and I don't see app performing as expected from it .I am using expo and i scan it to run the app on my android device .Here is the code and I also used a debugger but nothing seems to be working .

export default  class Deck extends React.Component {
    constructor(props){
        super(props);
        //decalred as  local variable 
        this.PanResponder=PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onPanResponderMove:(event,gesture)=>{
                debugger;
                console.log(gesture);
            },
            onPanResponderRelease:()=>{}
        });
        this.state={PanResponder};
    }
    renderCards=()=>{
        return this.props.data.map(item => {
            return this.props.renderCards(item);
        });
    }
    render(){
        return(
         <View {...this.state.PanResponder.panHandlers}> 
             {this.renderCards()}
         </View>
        );
    }
}

Upvotes: 0

Views: 2321

Answers (1)

pho mai
pho mai

Reputation: 194

1) you set this.state={PanResponder} this PanResponder from react-native

so this.state.PanResponder.panHandlers is nothing.

try 

export default  class Deck extends React.Component {
constructor(props){
    super(props);
    //decalred as  local variable 
    this.panResponder=PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove:(event,gesture)=>{
            debugger;
            console.log(gesture);
        },
        onPanResponderRelease:()=>{}
    });
}
render(){
    return(
        <View {...this.panResponder.panHandlers}>
        </View>
    );
}

}

or 

export default  class Deck extends React.Component {
constructor(props){
    super(props);
    //decalred as  local variable 
    const panResponder=PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove:(event,gesture)=>{
            debugger;
            console.log(gesture);
        },
        onPanResponderRelease:()=>{}
    });
    this.state={panResponder};
}
render(){
    return(
        <View {...this.state.panResponder.panHandlers}>
        </View>
    );
}

}

Upvotes: 1

Related Questions