How to use double tap in react native? i want that if a user double tap the Image than the setliked state trigger, So how can i do that in rn? like instagram posts, is their any pre build package in rn which let me do that? i am using rn 0.70.5 like we have onpress, or any other way to do that?

import { StyleSheet, Text, View, Image } from 'react-native'
import React, { useState } from 'react'
import { FontAwesome } from '@expo/vector-icons';
import { icons1 } from '../CommonCss/PageCss';
import { Feather } from '@expo/vector-icons';
import styles from './styles';

const PostCard = (
  {
    key,
    username,
    postimg,
    profileimg,
    likes,
    comments,
  }
) => {

  const [isliked, setIsliked] = useState(false)
  const [showcomments, setShowcomments] = useState(false)

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Image source={{ uri: profileimg }} style={styles.profileImage} />
        <Text style={styles.Username}>{username}</Text>
      </View>
      <Image source={{ uri: postimg }} style={styles.posts} /> // This is the post img 
      <View style={styles.section}>
        {
          isliked ?
            <View style={styles.likesection}>
              <FontAwesome name="heart" size={24} color="black" style={styles.iconliked} onPress={() => {
                setIsliked(false)
              }} />
              <Text style={styles.liked}>{likes.length   1}</Text>
            </View>
            :
            <View style={styles.likesection}>
              <Feather name="heart" size={24} color="black" style={icons1} onPress={() => {
                setIsliked(true)
              }} />
              <Text style={styles.notliked}>{likes.length}</Text>
            </View>
        }
        <View style={styles.commentsection}>
          <FontAwesome name="comment" size={24} color="black" style={icons1}
            onPress={() => {
              setShowcomments(!showcomments)
            }}
          />
        </View>
      </View>
      {
        showcomments == true &&
        <View style={styles.section2}>
          {
            comments.map((item, index) => {
              return (
                <View style={styles.section2s1} key={item.id}>
                  <Text style={styles.commentUser}>{item.username}</Text>
                  <Text style={styles.commentText}>{item.comments}</Text>
                </View>
              )
            })
          }
        </View>
      }
    </View>
  )
}

export default PostCard

CodePudding user response：

You might use this library react-native-double-tap installation via npm :

npm install --save react-native-double-tap

and here's the code which you can manipulate or apply to your recommandation

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <DoubleClick
          singleTap={() => {
            console.log("single tap");
          }}
          doubleTap={() => {
            console.log("double tap");
          }}
          delay={200}
        >
          <Text>Open up App.js to start working on your app!</Text>
          <Text>Changes you make will automatically reload.</Text>
          <Text>Shake your phone to open the developer menu.</Text>
        </DoubleClick>
      </View>
    );
  }
}

by the way here's a link to the documentation

CodePudding user response：

hi you can do something like below:

wrap you image into touchableopacity or touchablewithoutfeedback

<TouchableWithoutFeedback onPress={handleDoubleTap}>
   <Image source={{ uri: postimg }} style={styles.posts} /> 
</TouchableWithoutFeedback>

now manage handledoubleTap as below:

 var lastTap = null
 const handleDoubleTap = () => {
    const now = Date.now();
    const DOUBLE_PRESS_DELAY = 300;
    if (lastTap && (now - lastTap) < DOUBLE_PRESS_DELAY) {
        setIsliked(!isLiked)
    } else {
       lastTap = now;
    }
  }

if you use touchableopacity then set activeOpacity 1:

 <TouchableOpacity 
   onPress={handleDoubleTap} 
   activeOpacity={1}>
   <Image source={{ uri: postimg }} style={styles.posts} /> 
</TouchableOpacity>

CodePudding user response：

To use double tap for the Image, you can use React Native Gesture Handler. It's a library that provides native-like gesture handling for React Native. To use it, you will need to install the library by running:

npm install --save react-native-gesture-handler

After that, you can use the component to wrap the Image component and handle the double tap event. You can change the state of the 'isliked' variable when the double tap event occurs. The code for this would look something like this:

function handleStateChange(event) {
    if (event.nativeEvent.state === State.ACTIVE) {
        setIsliked(true)
    }
}

...

<GestureHandler numberOfTaps={2} onHandlerStateChange={handleStateChange}>
    <Image source={{ uri: postimg }} style={styles.posts} /> 
</GestureHandler>

You can find more information about how to use React Native Gesture Handler here: https://kmagiera.github.io/react-native-gesture-handler/.

CodePudding user response：

Here is a full example of a double tap that I have tested.

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount   1);
 // const [lastTap,setLastTap] =useState(null)
 var lastTap = null
 const handleDoubleTap = () => {
    const now = Date.now();
    const DOUBLE_PRESS_DELAY = 300;
    if (lastTap && (now - lastTap) < DOUBLE_PRESS_DELAY) {
       setCount(count 1)
    } else {
       lastTap = now;
    }
  }
  
  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity
        activeOpacity={1}
        style={styles.button}
        onPress={handleDoubleTap}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  }
});

export default App;