Question 33635 in React native Question posted in
The official React Native documentation can be found here.

How to use double tap in react native?

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
Tags:

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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/.

    Login or Signup to reply.
  4. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search