![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/11\/detect-complex-gestures-in-react-native-03.gif\")
<\/figure><\/li>![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/11\/detect-complex-gestures-in-react-native-02.gif\")
<\/figure><\/li>![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/11\/detect-complex-gestures-in-react-native-01.gif\")
<\/figure><\/li><\/ul>\n\n\n\nHow to use it:<\/h2>\n\n\n\n
1. Install and import the component.<\/p>\n\n\n\n
# Yarn\n$ yarn add react-native-gesture-detector react-native-gesture-handler lodash<\/pre>\n\n\n\n
import GestureDetector, {\n GestureRecorder,\n GesturePath,\n Cursor,\n} from \"react-native-gesture-detector\";<\/pre>\n\n\n\n2. Basic usage:<\/p>\n\n\n\n
const gestures = {\n \/\/ this will result in the gesture shown in the first demo give above\n Coil: [\n { x: 10, y: -30 }, \/\/ This is a coordinate object\n { x: 25, y: -15 },\n { x: 40, y: -10 },\n { x: 55, y: -15 },\n { x: 70, y: -30 },\n { x: 85, y: -45 },\n { x: 90, y: -65 },\n { x: 85, y: -85 },\n { x: 70, y: -100 },\n { x: 55, y: -115 },\n { x: 40, y: -130 },\n { x: 20, y: -130 },\n { x: 0, y: -130 },\n { x: -20, y: -130 },\n { x: -35, y: -115 },\n { x: -50, y: -100 },\n { x: -65, y: -85 },\n { x: -80, y: -70 },\n { x: -80, y: -55 },\n { x: -80, y: -30 },\n { x: -80, y: -15 },\n { x: -80, y: 0 },\n { x: -65, y: 15 },\n { x: -50, y: 30 },\n { x: -35, y: 45 },\n { x: -20, y: 60 },\n { x: 0, y: 65 },\n { x: 20, y: 70 },\n { x: 40, y: 70 },\n ],\n};\nconst CoilExample = () => (\n <GestureDetector\n onGestureFinish={(gesture) => console.log(`Gesture \"${gesture}\" finished!`)}\n onProgress={({ gesture, progress }) => {\n console.log(`Gesture: ${gesture}, progress: ${progress}`);\n }}\n onPanRelease={() => {\n console.log(\"User released finger!\");\n }}\n gestures={gestures}\n slopRadius={35}\n >\n {({ coordinate }) => (\n <View style={{ position: \"relative\", width: \"100%\", height: \"100%\" }}>\n <GesturePath path={gestures[\"Coil\"]} color=\"green\" slopRadius={35} \/>\n {coordinate && <Cursor {...coordinate} \/>}\n <\/View>\n )}\n <\/GestureDetector>\n);\nconst RecordGestureExample = () => {\n \/\/ finishedGesture will look like gestures[\"Coil\"] from the top\n const [finishedGesture, setFinishedGesture] = useState([]);\n return (\n <GestureRecorder onPanRelease={(gesture) => setFinishedGesture(gesture)}>\n {({ gesture }) => (\n <View style={{ position: \"relative\", width: \"100%\", height: \"100%\" }}>\n <GesturePath path={gesture} color=\"green\" slopRadius={35} \/>\n <\/View>\n )}\n <\/GestureRecorder>\n );\n};<\/pre>\n\n\n\nAuthor<\/strong>: mxmzb<\/p>
Live Demo<\/strong>: Link<\/a><\/p>
Download<\/strong>: Link<\/a><\/p>