How to use double tap in react native?

Question

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

Answer 1

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