I’m currently using for letting user to select and copy contents from a Text block
<Text selectable={true}>some text</Text>
The problem is that when using scrolling or tabbing to switch different Text block, or screen, the "Selection Action" is popped up too quickly.
The behavior is like whenever a user is scrolling or swiping, the screen does not get scrolled or swiped, instead some text are selected and the Copy/Paste action buttons are popped up.
I’m seeking that if the Text component has a delay option for triggering selectable, no luck, so my idea is to use the onLongPress function to manually trigger the selectable popup? is that possible?
In addition:
Making an variable to control the selectable from onLongPress event does not work, because it only sets the Text component selectable to true at long press, it does not instantly show the text selecting UI and Copy/Paste action buttons
User must release the press and repress it again to bring up the selection tools popup
3
Answers
You can implement a workaround using the onLongPress event and a state variable to control the selectable behavior. Something like this should work,
Let see how it work :
Long press
, press and hold mouse for 1000 ms, we call and reset once user click on "Click here to copy"the
Text
component is selectable only when the user presses and hold on it for 500 milliseconds. This will prevent the selection popup from being triggered accidentally when scrolling or swiping