Questions tagged [panresponder]
68 questions
4
votes
1 answer
Cannot access updated state or props inside onPanResponderMove
What am I Trying to do: To change the state in response to user's up/down swipe.
Environment: React native 0.61.5
I have the component as follows.
import React, { useRef, useState } from 'react';
import { View, PanResponder } from…
varun
- 55
- 5
3
votes
0 answers
How to scroll parent ScrollView while child is moving in it using PanResponder
I am looking for an option to build this functionality in react native.
I have added PanResponder inside a scroll view but the problem is when I drag an item in screen scroll view does not scroll. So is there any option available in react-native…
Faisal Khan
- 2,574
- 3
- 20
- 36
3
votes
1 answer
React Native: is it possible to stop PanResponder event inside onPanResponderMove?
I want to add limitations on how far by Y axis can View be dragged inside other View.
My onPanResponderMove looks something like this:
onPanResponderMove: (evt: any, gestureEvent: any) => {
if (y >= 0 && y <= backgroundHeight - 40) {
…
wlukla
- 83
- 4
2
votes
0 answers
React Native Custom Bottom Draggable Drawer
I am trying to implement a Bottom draggable drawer like the one you find in Google Maps or Apple Maps.
I followed a tutorial from here: Tutorial but I still can't move my component on Y axis.
Here is my code so far:
import React, { useRef } from…
poPaTheGuru
- 1,009
- 1
- 13
- 35
2
votes
0 answers
React Native how to get element position inside panresponder
I'm trying to return the values of .measure but it seems the code inside can't interact without using a state, and so it keeps returning false. I'm trying to avoid using a state because I need the value inside my PanResponder
Measure function…
Salman
- 1,109
- 3
- 25
- 55
1
vote
0 answers
Scrolling after Swiping not Working in React Native for iOS
I am attempting to set up a scrollable list in my React Native iOS app that also enables left and right swiping. For this list, I am using ScrollView with the PanResponder utility in React Native for gesture handling. Currently, I am able to swipe…
JS_is_awesome18
- 1,587
- 7
- 23
- 67
1
vote
0 answers
React Native PanResponder jumping the position to center
So I am trying to create component like TikTok page swipe up down. I am able to slide up down using button successfully. But when I try to use pan responder and try to drag it always reset the list position to center.
Here is snack example. Try…
cjmling
- 6,896
- 10
- 43
- 79
1
vote
0 answers
How to Draw on an Image and save it in React Native Expo
In my expo app. I want the user to be able to edit an image with their finger by being able to draw on the image with a specific brush color.
The UI is as shown in the photo, where the user selects a photo and it appears on the screen. I want the…
shilleh
- 21
- 2
1
vote
0 answers
React native select multiple items with sliding our fingers
When the Pan is Respod in Flatlist I want to select this item like the iOS file app. I really want to use this on my app to select multiple component list items.
I have tried using this https://github.com/sushantdsuwal/DragAndSelectMultipleItems…
Akshay I
- 3,675
- 1
- 34
- 57
1
vote
0 answers
How do I make an absolut positioned touchable element on top of a FlatList catch only press events and let other events propagate to the FlatList?
I have a FlatList in React Native with fullscreen image and video items (with pagingEnabled). I want to have a short descriptive touchable text floating on top of the FlatList, to open up a view with some information about the image/video when…
Andain
- 153
- 3
- 8
1
vote
0 answers
Jest: How can I pan while testing the rating component using fireGestureHandler from react-native-gesture-handler?
I have created a swipeable rating component:
import FontistiIcon from '@expo/vector-icons/Fontisto';
import React, { useCallback, useMemo } from 'react';
import { LayoutRectangle, View } from 'react-native';
import {
Gesture,
GestureDetector,
…
shet_tayyy
- 5,366
- 11
- 44
- 82
1
vote
0 answers
How to stop two finger touches on Screen
i had used this library for the draggable view for items
react-native-draggable-gridview
in that library i don't know how to stop two finger touches on the screen ,
i tried so many stuff but i didn't succeed.
here is the my code for gridView…
Ankit Vora
- 568
- 2
- 12
1
vote
0 answers
PanResponder with SignatureScreen not working
Objective: I am trying to use SignatureScreen from react-native-signature-canvas inside a ScrollView. But whenever I try to scroll up and down. ScrollView takes the gesture and moves the screen instead of focusing on SignatureScreen.
I found the…
Talha Uzair
- 71
- 6
1
vote
1 answer
React Native onLayout x and y are not correct
I am using the React Native PanResponder class to allow for drag and drop if elements of the screen.
What I have discovered is that the onLayout is not returning the x absolute positions, it's being affected by its parent views and is returning…
user3574492
- 6,225
- 9
- 52
- 105
1
vote
1 answer
Decrease the sensitivity of rotation of arrow (React native + PanResponder)
Does anyone know how can I decrease the rotating velocity of arrow which is below.
I'm using panResponder and have some simple maths to rotate the arrow image.
The rotation is too sensitive, its is working fine for me but some how I'm not able to…
Yash Patel
- 31
- 3