double tap in react native-CodePudding

How does react native's double tap function? I want the setliked state to be triggered if a user double taps the image. How can I accomplish this in RN? Is there a pre-built package in RN that allows me to accomplish that, like Instagram posts? I'm using rn 0.70.5 like onpress, but is there another method to accomplish this?


    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

any suggestions from your part

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