From 6192535dfd5abe6c859c1bf32363db3ec7fc6011 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Tue, 23 Apr 2024 12:16:40 +0200 Subject: [PATCH 01/21] adding interactive examples --- .../{fling-gesture.md => fling-gesture.mdx} | 8 ++ .../{hover-gesture.md => hover-gesture.mdx} | 8 ++ ...ress-gesture.md => long-press-gesture.mdx} | 8 ++ .../{pan-gesture.md => pan-gesture.mdx} | 8 ++ .../{pinch-gesture.md => pinch-gesture.mdx} | 8 ++ ...tation-gesture.md => rotation-gesture.mdx} | 8 ++ .../{tap-gesture.md => tap-gesture.mdx} | 8 ++ docs/src/examples/FlingGestureBasic.jsx | 57 ++++++++ docs/src/examples/HoverGestureBasic.jsx | 59 ++++++++ docs/src/examples/LongPressGestureBasic.jsx | 40 ++++++ docs/src/examples/PanGestureBasic.jsx | 58 ++++++++ docs/src/examples/PinchGestureBasic.jsx | 133 ++++++++++++++++++ docs/src/examples/PinchGestureBasicSrc.jsx | 59 ++++++++ docs/src/examples/RotationGestureBasic.jsx | 133 ++++++++++++++++++ docs/src/examples/RotationGestureBasicSrc.jsx | 59 ++++++++ docs/src/examples/TapGestureBasic.jsx | 40 ++++++ 16 files changed, 694 insertions(+) rename docs/docs/gestures/{fling-gesture.md => fling-gesture.mdx} (94%) rename docs/docs/gestures/{hover-gesture.md => hover-gesture.mdx} (92%) rename docs/docs/gestures/{long-press-gesture.md => long-press-gesture.mdx} (94%) rename docs/docs/gestures/{pan-gesture.md => pan-gesture.mdx} (97%) rename docs/docs/gestures/{pinch-gesture.md => pinch-gesture.mdx} (93%) rename docs/docs/gestures/{rotation-gesture.md => rotation-gesture.mdx} (92%) rename docs/docs/gestures/{tap-gesture.md => tap-gesture.mdx} (96%) create mode 100644 docs/src/examples/FlingGestureBasic.jsx create mode 100644 docs/src/examples/HoverGestureBasic.jsx create mode 100644 docs/src/examples/LongPressGestureBasic.jsx create mode 100644 docs/src/examples/PanGestureBasic.jsx create mode 100644 docs/src/examples/PinchGestureBasic.jsx create mode 100644 docs/src/examples/PinchGestureBasicSrc.jsx create mode 100644 docs/src/examples/RotationGestureBasic.jsx create mode 100644 docs/src/examples/RotationGestureBasicSrc.jsx create mode 100644 docs/src/examples/TapGestureBasic.jsx diff --git a/docs/docs/gestures/fling-gesture.md b/docs/docs/gestures/fling-gesture.mdx similarity index 94% rename from docs/docs/gestures/fling-gesture.md rename to docs/docs/gestures/fling-gesture.mdx index 6ae8ba9f8f..d0fdd27b10 100644 --- a/docs/docs/gestures/fling-gesture.md +++ b/docs/docs/gestures/fling-gesture.mdx @@ -13,6 +13,14 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; +import FlingGestureBasic from '@site/src/examples/FlingGestureBasic'; +import FlingGestureBasicSrc from '!!raw-loader!@site/src/examples/FlingGestureBasic'; + +} + src={FlingGestureBasic} +/> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; import BaseEventCallbacks from './\_shared/base-gesture-callbacks.md'; diff --git a/docs/docs/gestures/hover-gesture.md b/docs/docs/gestures/hover-gesture.mdx similarity index 92% rename from docs/docs/gestures/hover-gesture.md rename to docs/docs/gestures/hover-gesture.mdx index b0db6b327e..9015ce83a2 100644 --- a/docs/docs/gestures/hover-gesture.md +++ b/docs/docs/gestures/hover-gesture.mdx @@ -13,6 +13,14 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; +import HoverGestureBasic from '@site/src/examples/HoverGestureBasic'; +import HoverGestureBasicSrc from '!!raw-loader!@site/src/examples/HoverGestureBasic'; + +} + src={HoverGestureBasicSrc} +/> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; import BaseEventCallbacks from './\_shared/base-gesture-callbacks.md'; diff --git a/docs/docs/gestures/long-press-gesture.md b/docs/docs/gestures/long-press-gesture.mdx similarity index 94% rename from docs/docs/gestures/long-press-gesture.md rename to docs/docs/gestures/long-press-gesture.mdx index 2f8d99b68e..be9e01c2b7 100644 --- a/docs/docs/gestures/long-press-gesture.md +++ b/docs/docs/gestures/long-press-gesture.mdx @@ -13,6 +13,14 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; +import LongPressGestureBasic from '@site/src/examples/LongPressGestureBasic'; +import LongPressGestureBasicSrc from '!!raw-loader!@site/src/examples/LongPressGestureBasic'; + +} + src={LongPressGestureBasicSrc} +/> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; import BaseEventCallbacks from './\_shared/base-gesture-callbacks.md'; diff --git a/docs/docs/gestures/pan-gesture.md b/docs/docs/gestures/pan-gesture.mdx similarity index 97% rename from docs/docs/gestures/pan-gesture.md rename to docs/docs/gestures/pan-gesture.mdx index ac86d3067c..12eeb405b5 100644 --- a/docs/docs/gestures/pan-gesture.md +++ b/docs/docs/gestures/pan-gesture.mdx @@ -13,6 +13,14 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; +import PanGestureBasic from '@site/src/examples/PanGestureBasic'; +import PanGestureBasicSrc from '!!raw-loader!@site/src/examples/PanGestureBasic'; + +} + src={PanGestureBasicSrc} +/> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; import BaseContinousEventConfig from './\_shared/base-continous-gesture-config.md'; diff --git a/docs/docs/gestures/pinch-gesture.md b/docs/docs/gestures/pinch-gesture.mdx similarity index 93% rename from docs/docs/gestures/pinch-gesture.md rename to docs/docs/gestures/pinch-gesture.mdx index 9530e4a522..2efaf04916 100644 --- a/docs/docs/gestures/pinch-gesture.md +++ b/docs/docs/gestures/pinch-gesture.mdx @@ -13,6 +13,14 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; +import PinchGestureBasic from '@site/src/examples/PinchGestureBasic'; +import PinchGestureBasicSrc from '!!raw-loader!@site/src/examples/PinchGestureBasicSrc'; + +} + src={PinchGestureBasicSrc} +/> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; import BaseContinousEventConfig from './\_shared/base-continous-gesture-config.md'; diff --git a/docs/docs/gestures/rotation-gesture.md b/docs/docs/gestures/rotation-gesture.mdx similarity index 92% rename from docs/docs/gestures/rotation-gesture.md rename to docs/docs/gestures/rotation-gesture.mdx index be4ab87ad0..ed17a98a3a 100644 --- a/docs/docs/gestures/rotation-gesture.md +++ b/docs/docs/gestures/rotation-gesture.mdx @@ -13,6 +13,14 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; +import RotationGestureBasic from '@site/src/examples/RotationGestureBasic'; +import RotationGestureBasicSrc from '!!raw-loader!@site/src/examples/RotationGestureBasicSrc'; + +} + src={RotationGestureBasicSrc} +/> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; import BaseContinousEventConfig from './\_shared/base-continous-gesture-config.md'; diff --git a/docs/docs/gestures/tap-gesture.md b/docs/docs/gestures/tap-gesture.mdx similarity index 96% rename from docs/docs/gestures/tap-gesture.md rename to docs/docs/gestures/tap-gesture.mdx index dbb8ab7bee..8ee9a893d4 100644 --- a/docs/docs/gestures/tap-gesture.md +++ b/docs/docs/gestures/tap-gesture.mdx @@ -13,6 +13,14 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; +import TapGestureBasic from '@site/src/examples/TapGestureBasic'; +import TapGestureBasicSrc from '!!raw-loader!@site/src/examples/TapGestureBasic'; + +} + src={TapGestureBasicSrc} +/> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; import BaseEventCallbacks from './\_shared/base-gesture-callbacks.md'; diff --git a/docs/src/examples/FlingGestureBasic.jsx b/docs/src/examples/FlingGestureBasic.jsx new file mode 100644 index 0000000000..c6c5cb3fc3 --- /dev/null +++ b/docs/src/examples/FlingGestureBasic.jsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { View } from 'react-native'; +import { + Directions, + Gesture, + GestureDetector, + GestureHandlerRootView, +} from 'react-native-gesture-handler'; +import { StyleSheet } from 'react-native'; +import Animated, { + withTiming, + useSharedValue, + useAnimatedStyle, +} from 'react-native-reanimated'; + +export default function App() { + const translateX = useSharedValue(0); + const startTranslateX = useSharedValue(0); + + const fling = Gesture.Fling() + .direction(Directions.LEFT | Directions.RIGHT) + .onBegin((event) => { + startTranslateX.value = event.x; + }) + .onStart((event) => { + translateX.value = withTiming( + translateX.value + event.x - startTranslateX.value, + { duration: 200 } + ); + }); + + const boxAnimatedStyles = useAnimatedStyle(() => ({ + transform: [{ translateX: translateX.value }], + })); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + box: { + width: 100, + height: 100, + borderRadius: 20, + backgroundColor: '#b58df1', + }, +}); diff --git a/docs/src/examples/HoverGestureBasic.jsx b/docs/src/examples/HoverGestureBasic.jsx new file mode 100644 index 0000000000..f4825ca3e9 --- /dev/null +++ b/docs/src/examples/HoverGestureBasic.jsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { + Gesture, + GestureDetector, + GestureHandlerRootView, +} from 'react-native-gesture-handler'; +import { StyleSheet } from 'react-native'; +import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'; + +export default function App() { + const translateX = useSharedValue(0); + const translateY = useSharedValue(0); + + const startX = useSharedValue(0); + const startY = useSharedValue(0); + + const hover = Gesture.Hover() + .onStart((event) => { + startX.value = event.x; + startY.value = event.y; + }) + .onUpdate((event) => { + translateX.value = (startX.value - event.x) * .2; + translateY.value = (startY.value - event.y) * .2; + }) + .onEnd(() => { + translateX.value = withTiming(0, {duration: 400, easing: Easing.bezier(1, -1, 0.3, 1.43)}); + translateY.value = withTiming(0, {duration: 400, easing: Easing.bezier(1, -1, 0.3, 1.43)}); + }); + + const boxAnimatedStyle = useAnimatedStyle(() => ({ + transform: [ + {translateX: translateX.value}, + {translateY: translateY.value}, + ], + })) + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + box: { + width: 100, + height: 100, + borderRadius: 20, + backgroundColor: '#b58df1', + }, +}); diff --git a/docs/src/examples/LongPressGestureBasic.jsx b/docs/src/examples/LongPressGestureBasic.jsx new file mode 100644 index 0000000000..aaea732b0f --- /dev/null +++ b/docs/src/examples/LongPressGestureBasic.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { View } from 'react-native'; +import { + Gesture, + GestureDetector, + GestureHandlerRootView, +} from 'react-native-gesture-handler'; +import { StyleSheet } from 'react-native'; + +const COLORS = ['#b58df1', '#f1b58d', '#8df1b5', '#8d8df1', '#f18d8d']; + +export default function App() { + const [color, setColor] = React.useState(COLORS[0]); + + const longPress = Gesture.LongPress().onStart(() => { + const nextColorIndex = (COLORS.indexOf(color) + 1) % COLORS.length; + setColor(COLORS[nextColorIndex]); + }); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + box: { + width: 100, + height: 100, + borderRadius: 20, + }, +}); diff --git a/docs/src/examples/PanGestureBasic.jsx b/docs/src/examples/PanGestureBasic.jsx new file mode 100644 index 0000000000..5300d8255f --- /dev/null +++ b/docs/src/examples/PanGestureBasic.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import Animated, { + useSharedValue, + useAnimatedStyle, +} from 'react-native-reanimated'; +import { + Gesture, + GestureDetector, + GestureHandlerRootView, +} from 'react-native-gesture-handler'; +import { StyleSheet } from 'react-native'; + +export default function App() { + const translationX = useSharedValue(0); + const translationY = useSharedValue(0); + const prevTranslationX = useSharedValue(0); + const prevTranslationY = useSharedValue(0); + + const animatedStyles = useAnimatedStyle(() => ({ + transform: [ + { translateX: translationX.value }, + { translateY: translationY.value }, + ], + })); + + const pan = Gesture.Pan() + .onStart(() => { + prevTranslationX.value = translationX.value; + prevTranslationY.value = translationY.value; + }) + .onUpdate((event) => { + translationX.value = prevTranslationX.value + event.translationX; + translationY.value = prevTranslationY.value + event.translationY; + }); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + aspectRatio: 2, + }, + box: { + width: 100, + height: 100, + backgroundColor: '#b58df1', + borderRadius: 20, + }, +}); diff --git a/docs/src/examples/PinchGestureBasic.jsx b/docs/src/examples/PinchGestureBasic.jsx new file mode 100644 index 0000000000..2f62cc4c99 --- /dev/null +++ b/docs/src/examples/PinchGestureBasic.jsx @@ -0,0 +1,133 @@ +import React from 'react'; +import { + Gesture, + GestureDetector, + GestureHandlerRootView, +} from 'react-native-gesture-handler'; +import { StyleSheet } from 'react-native'; +import Animated, { + useSharedValue, + useAnimatedStyle, + withTiming, +} from 'react-native-reanimated'; + +const clamp = (val, min, max) => Math.min(Math.max(val, min), max); + +export default function App() { + const boxWidth = useSharedValue(100); + const distanceDifference = useSharedValue(0); + const centerX = useSharedValue(0); + const centerY = useSharedValue(0); + const pointerPositionX = useSharedValue(0); + const pointerPositionY = useSharedValue(0); + const negativePointerPositionX = useSharedValue(0); + const negativePointerPositionY = useSharedValue(0); + const touchOpacity = useSharedValue(0); + + const boxRef = React.useRef(null); + + function updateCenter() { + if (!boxRef.current) return; + + boxRef.current.measureInWindow((x, y, width, height) => { + centerX.value = x + width / 2; + centerY.value = y + height / 2; + }); + } + + React.useEffect(() => { + updateCenter(); + }, [boxRef.current]); + + React.useEffect(() => { + window.addEventListener('resize', updateCenter); + + return () => { + window.removeEventListener('resize', updateCenter); + }; + }, []); + + const pan = Gesture.Pan() + .minDistance(1) + .onStart((event) => { + const distanceX = Math.abs(event.absoluteX - centerX.value); + const distanceY = Math.abs(event.absoluteY - centerY.value); + const width = Math.max(distanceX, distanceY) * 2; + distanceDifference.value = boxWidth.value - width; + console.log(distanceDifference.value); + + touchOpacity.value = withTiming(0.4, { duration: 200 }); + }) + .onUpdate((event) => { + const distanceX = Math.abs(event.absoluteX - centerX.value); + const distanceY = Math.abs(event.absoluteY - centerY.value); + boxWidth.value = clamp(Math.max(distanceX, distanceY) * 2 + distanceDifference.value, 100, 300); + + pointerPositionX.value = event.absoluteX - centerX.value - 12; + pointerPositionY.value = event.absoluteY - centerY.value - 12; + negativePointerPositionX.value = centerX.value - event.absoluteX - 12; + negativePointerPositionY.value = centerY.value - event.absoluteY - 12; + }) + .onEnd(() => { + touchOpacity.value = withTiming(0, { duration: 200 }); + }); + + const boxAnimatedStyles = useAnimatedStyle(() => ({ + width: boxWidth.value, + })); + + return ( + + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + aspectRatio: 2, + }, + box: { + aspectRatio: 1, + borderRadius: 20, + backgroundColor: '#b58df1', + }, + dot: { + width: 24, + height: 24, + borderRadius: 12, + backgroundColor: '#ccc', + position: 'absolute', + left: '50%', + top: '50%', + }, +}); diff --git a/docs/src/examples/PinchGestureBasicSrc.jsx b/docs/src/examples/PinchGestureBasicSrc.jsx new file mode 100644 index 0000000000..7a5fb2f410 --- /dev/null +++ b/docs/src/examples/PinchGestureBasicSrc.jsx @@ -0,0 +1,59 @@ +import React from "react"; +import { StyleSheet } from "react-native"; +import { + Gesture, + GestureDetector, + GestureHandlerRootView, +} from "react-native-gesture-handler"; +import Animated, { + useSharedValue, + useAnimatedStyle, +} from "react-native-reanimated"; + +export default function App() { + const scale = useSharedValue(1); + const startScale = useSharedValue(0); + + const pinch = Gesture.Pinch() + .onStart(() => { + startScale.value = scale.value; + }) + .onUpdate((event) => { + scale.value = startScale.value * event.scale; + }); + + const boxAnimatedStyles = useAnimatedStyle(() => ({ + transform: [{ scale: scale.value }], + })); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + }, + box: { + width: 100, + height: 100, + borderRadius: 20, + backgroundColor: "#b58df1", + }, + dot: { + width: 24, + height: 24, + borderRadius: 12, + backgroundColor: "#ccc", + position: "absolute", + left: "50%", + top: "50%", + }, +}); diff --git a/docs/src/examples/RotationGestureBasic.jsx b/docs/src/examples/RotationGestureBasic.jsx new file mode 100644 index 0000000000..838ed87daa --- /dev/null +++ b/docs/src/examples/RotationGestureBasic.jsx @@ -0,0 +1,133 @@ +import React from 'react'; +import { + Gesture, + GestureDetector, + GestureHandlerRootView, +} from 'react-native-gesture-handler'; +import { StyleSheet } from 'react-native'; +import Animated, { + useSharedValue, + useAnimatedStyle, + withTiming, +} from 'react-native-reanimated'; + +export default function App() { + const angle = useSharedValue(0); + const startAngle = useSharedValue(0); + const centerX = useSharedValue(0); + const centerY = useSharedValue(0); + const pointerPositionX = useSharedValue(0); + const pointerPositionY = useSharedValue(0); + const negativePointerPositionX = useSharedValue(0); + const negativePointerPositionY = useSharedValue(0); + const touchOpacity = useSharedValue(0); + + const boxRef = React.useRef(null); + + function updateCenter() { + if (!boxRef.current) return; + + boxRef.current.measureInWindow((x, y, width, height) => { + centerX.value = x + width / 2; + centerY.value = y + height / 2; + }); + } + + React.useEffect(() => { + updateCenter(); + }, [boxRef.current]); + + React.useEffect(() => { + window.addEventListener('resize', updateCenter); + + return () => { + window.removeEventListener('resize', updateCenter); + }; + }, []); + + const pan = Gesture.Pan() + .minDistance(1) + .onStart((event) => { + startAngle.value = + angle.value - + Math.atan2( + event.absoluteY - centerY.value, + event.absoluteX - centerX.value + ); + touchOpacity.value = withTiming(0.4, { duration: 200 }); + }) + .onUpdate((event) => { + angle.value = + startAngle.value + + Math.atan2( + event.absoluteY - centerY.value, + event.absoluteX - centerX.value + ); + pointerPositionX.value = event.absoluteX - centerX.value - 12; + pointerPositionY.value = event.absoluteY - centerY.value - 12; + negativePointerPositionX.value = centerX.value - event.absoluteX - 12; + negativePointerPositionY.value = centerY.value - event.absoluteY - 12; + }) + .onEnd(() => { + touchOpacity.value = withTiming(0, { duration: 200 }); + }); + + const boxAnimatedStyles = useAnimatedStyle(() => ({ + transform: [{ rotate: `${angle.value}rad` }], + })); + + return ( + + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + box: { + width: 100, + height: 100, + borderRadius: 20, + backgroundColor: '#b58df1', + }, + dot: { + width: 24, + height: 24, + borderRadius: 12, + backgroundColor: '#ccc', + position: 'absolute', + left: '50%', + top: '50%', + }, +}); diff --git a/docs/src/examples/RotationGestureBasicSrc.jsx b/docs/src/examples/RotationGestureBasicSrc.jsx new file mode 100644 index 0000000000..c13370e852 --- /dev/null +++ b/docs/src/examples/RotationGestureBasicSrc.jsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { + Gesture, + GestureDetector, + GestureHandlerRootView, +} from 'react-native-gesture-handler'; +import Animated, { + useSharedValue, + useAnimatedStyle, +} from 'react-native-reanimated'; + +export default function App() { + const angle = useSharedValue(0); + const startAngle = useSharedValue(0); + + const rotation = Gesture.Rotation() + .onStart(() => { + startAngle.value = angle.value; + }) + .onUpdate((event) => { + angle.value = startAngle.value + event.angle; + }); + + const boxAnimatedStyles = useAnimatedStyle(() => ({ + transform: [{ rotate: `${angle.value}rad` }], + })); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + box: { + width: 100, + height: 100, + borderRadius: 20, + backgroundColor: '#b58df1', + }, + dot: { + width: 24, + height: 24, + borderRadius: 12, + backgroundColor: '#ccc', + position: 'absolute', + left: '50%', + top: '50%', + }, +}); diff --git a/docs/src/examples/TapGestureBasic.jsx b/docs/src/examples/TapGestureBasic.jsx new file mode 100644 index 0000000000..4d3b6c7e30 --- /dev/null +++ b/docs/src/examples/TapGestureBasic.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { View } from 'react-native'; +import { + Gesture, + GestureDetector, + GestureHandlerRootView, +} from 'react-native-gesture-handler'; +import { StyleSheet } from 'react-native'; + +const COLORS = ['#b58df1', '#f1b58d', '#8df1b5', '#8d8df1', '#f18d8d']; + +export default function App() { + const [color, setColor] = React.useState(COLORS[0]); + + const tap = Gesture.Tap().onEnd(() => { + const nextColorIndex = (COLORS.indexOf(color) + 1) % COLORS.length; + setColor(COLORS[nextColorIndex]); + }); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + box: { + width: 100, + height: 100, + borderRadius: 20, + }, +}); From f5231ba60e550db322da0309e03e214fad66b882 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Tue, 23 Apr 2024 12:57:32 +0200 Subject: [PATCH 02/21] ctrl c + ctrl v = snack-helper --- .../{fling-gesture.mdx => fling-gesture.md} | 7 +- .../{hover-gesture.mdx => hover-gesture.md} | 8 +- ...ress-gesture.mdx => long-press-gesture.md} | 7 +- .../{pan-gesture.mdx => pan-gesture.md} | 7 +- .../{pinch-gesture.mdx => pinch-gesture.md} | 8 +- ...tation-gesture.mdx => rotation-gesture.md} | 8 +- .../{tap-gesture.mdx => tap-gesture.md} | 8 +- docs/docusaurus.config.js | 8 ++ .../examples/FlingGestureBasic.js} | 1 - .../examples/HoverGestureBasic.js} | 31 ++++--- .../examples/LongPressGestureBasic.js} | 0 .../examples/PanGestureBasic.js} | 0 .../examples/PinchGestureBasic.js} | 30 ++++--- .../examples/PinchGestureBasicSrc.js} | 22 ++--- .../examples/RotationGestureBasic.js} | 0 .../examples/RotationGestureBasicSrc.js} | 4 +- .../examples/TapGestureBasic.js} | 0 docs/static/js/snack-helpers.js | 86 +++++++++++++++++++ 18 files changed, 180 insertions(+), 55 deletions(-) rename docs/docs/gestures/{fling-gesture.mdx => fling-gesture.md} (94%) rename docs/docs/gestures/{hover-gesture.mdx => hover-gesture.md} (90%) rename docs/docs/gestures/{long-press-gesture.mdx => long-press-gesture.md} (94%) rename docs/docs/gestures/{pan-gesture.mdx => pan-gesture.md} (97%) rename docs/docs/gestures/{pinch-gesture.mdx => pinch-gesture.md} (93%) rename docs/docs/gestures/{rotation-gesture.mdx => rotation-gesture.md} (91%) rename docs/docs/gestures/{tap-gesture.mdx => tap-gesture.md} (96%) rename docs/{src/examples/FlingGestureBasic.jsx => static/examples/FlingGestureBasic.js} (97%) rename docs/{src/examples/HoverGestureBasic.jsx => static/examples/HoverGestureBasic.js} (62%) rename docs/{src/examples/LongPressGestureBasic.jsx => static/examples/LongPressGestureBasic.js} (100%) rename docs/{src/examples/PanGestureBasic.jsx => static/examples/PanGestureBasic.js} (100%) rename docs/{src/examples/PinchGestureBasic.jsx => static/examples/PinchGestureBasic.js} (75%) rename docs/{src/examples/PinchGestureBasicSrc.jsx => static/examples/PinchGestureBasicSrc.js} (75%) rename docs/{src/examples/RotationGestureBasic.jsx => static/examples/RotationGestureBasic.js} (100%) rename docs/{src/examples/RotationGestureBasicSrc.jsx => static/examples/RotationGestureBasicSrc.js} (92%) rename docs/{src/examples/TapGestureBasic.jsx => static/examples/TapGestureBasic.js} (100%) create mode 100644 docs/static/js/snack-helpers.js diff --git a/docs/docs/gestures/fling-gesture.mdx b/docs/docs/gestures/fling-gesture.md similarity index 94% rename from docs/docs/gestures/fling-gesture.mdx rename to docs/docs/gestures/fling-gesture.md index d0fdd27b10..27710c48f3 100644 --- a/docs/docs/gestures/fling-gesture.mdx +++ b/docs/docs/gestures/fling-gesture.md @@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; -import FlingGestureBasic from '@site/src/examples/FlingGestureBasic'; -import FlingGestureBasicSrc from '!!raw-loader!@site/src/examples/FlingGestureBasic'; +import FlingGestureBasic from '@site/static/examples/FlingGestureBasic'; +import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic'; } @@ -30,6 +30,8 @@ Gesture gets [ACTIVE](/docs/fundamentals/states-events#active) when movement is When gesture gets activated it will turn into [END](/docs/fundamentals/states-events#end) state when finger is released. The gesture will fail to recognize if the finger is lifted before being activated. +Fling Gesture + ## Reference ```jsx @@ -156,3 +158,4 @@ const styles = StyleSheet.create({ }, }); ``` +@site/static/examples/FlingGestureBasic \ No newline at end of file diff --git a/docs/docs/gestures/hover-gesture.mdx b/docs/docs/gestures/hover-gesture.md similarity index 90% rename from docs/docs/gestures/hover-gesture.mdx rename to docs/docs/gestures/hover-gesture.md index 9015ce83a2..815489ef87 100644 --- a/docs/docs/gestures/hover-gesture.mdx +++ b/docs/docs/gestures/hover-gesture.md @@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; -import HoverGestureBasic from '@site/src/examples/HoverGestureBasic'; -import HoverGestureBasicSrc from '!!raw-loader!@site/src/examples/HoverGestureBasic'; +import HoverGestureBasic from '@site/static/examples/HoverGestureBasic'; +import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic'; } @@ -30,6 +30,8 @@ A continuous gesture that can recognize hovering above the view it's attached to On iOS additional visual effects may be configured. +Hover Gesture + ## Reference ```jsx @@ -96,4 +98,4 @@ Y coordinate of the current position of the pointer relative to the window. The ## Remarks -- Don't rely on `Hover` gesture to continue after the mouse button is clicked or the stylus touches the screen. If you want to handle both cases, [compose](/docs/fundamentals/gesture-composition) it with [`Pan` gesture](/docs/gestures/pan-gesture). +- Don't rely on `Hover` gesture to continue after the mouse button is clicked or the stylus touches the screen. If you want to handle both cases, [compose](/docs/fundamentals/gesture-composition) it with [`Pan` gesture](/docs/gestures/pan-gesture).@site/static/examples/HoverGestureBasic diff --git a/docs/docs/gestures/long-press-gesture.mdx b/docs/docs/gestures/long-press-gesture.md similarity index 94% rename from docs/docs/gestures/long-press-gesture.mdx rename to docs/docs/gestures/long-press-gesture.md index be9e01c2b7..237ef994cd 100644 --- a/docs/docs/gestures/long-press-gesture.mdx +++ b/docs/docs/gestures/long-press-gesture.md @@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; -import LongPressGestureBasic from '@site/src/examples/LongPressGestureBasic'; -import LongPressGestureBasicSrc from '!!raw-loader!@site/src/examples/LongPressGestureBasic'; +import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic'; +import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic'; } @@ -29,6 +29,8 @@ A discrete gesture that activates when the corresponding view is pressed for a s This gesture's state will turn into [END](/docs/fundamentals/states-events#end) immediately after the finger is released. The gesture will fail to recognize a touch event if the finger is lifted before the [minimum required time](/docs/gestures/long-press-gesture#mindurationvalue-number) or if the finger is moved further than the [allowable distance](/docs/gestures/long-press-gesture#maxdistancevalue-number). +Long Press Gesture + ## Reference ```jsx @@ -133,3 +135,4 @@ const styles = StyleSheet.create({ }, }); ``` +@site/static/examples/LongPressGestureBasic \ No newline at end of file diff --git a/docs/docs/gestures/pan-gesture.mdx b/docs/docs/gestures/pan-gesture.md similarity index 97% rename from docs/docs/gestures/pan-gesture.mdx rename to docs/docs/gestures/pan-gesture.md index 12eeb405b5..536f9f63d2 100644 --- a/docs/docs/gestures/pan-gesture.mdx +++ b/docs/docs/gestures/pan-gesture.md @@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; -import PanGestureBasic from '@site/src/examples/PanGestureBasic'; -import PanGestureBasicSrc from '!!raw-loader!@site/src/examples/PanGestureBasic'; +import PanGestureBasic from '@site/static/examples/PanGestureBasic'; +import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic'; } @@ -35,6 +35,8 @@ Configurations such as a minimum initial distance, specific vertical or horizont Gesture callback can be used for continuous tracking of the pan gesture. It provides information about the gesture such as its XY translation from the starting point as well as its instantaneous velocity. +Pan Gesture + ## Reference ```jsx @@ -237,3 +239,4 @@ const styles = StyleSheet.create({ }, }); ``` +@site/static/examples/PanGestureBasic \ No newline at end of file diff --git a/docs/docs/gestures/pinch-gesture.mdx b/docs/docs/gestures/pinch-gesture.md similarity index 93% rename from docs/docs/gestures/pinch-gesture.mdx rename to docs/docs/gestures/pinch-gesture.md index 2efaf04916..774f745cc3 100644 --- a/docs/docs/gestures/pinch-gesture.mdx +++ b/docs/docs/gestures/pinch-gesture.md @@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; -import PinchGestureBasic from '@site/src/examples/PinchGestureBasic'; -import PinchGestureBasicSrc from '!!raw-loader!@site/src/examples/PinchGestureBasicSrc'; +import PinchGestureBasic from '@site/static/examples/PinchGestureBasic'; +import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc'; } @@ -36,6 +36,8 @@ Similarly, the scale factor decreases as the distance between the fingers decrea Pinch gestures are used most commonly to change the size of objects or content onscreen. For example, map views use pinch gestures to change the zoom level of the map. +Pinch Gesture + ## Reference ```jsx @@ -127,4 +129,4 @@ const styles = StyleSheet.create({ marginBottom: 30, }, }); -``` +```@site/static/examples/PinchGestureBasic diff --git a/docs/docs/gestures/rotation-gesture.mdx b/docs/docs/gestures/rotation-gesture.md similarity index 91% rename from docs/docs/gestures/rotation-gesture.mdx rename to docs/docs/gestures/rotation-gesture.md index ed17a98a3a..3b319515be 100644 --- a/docs/docs/gestures/rotation-gesture.mdx +++ b/docs/docs/gestures/rotation-gesture.md @@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; -import RotationGestureBasic from '@site/src/examples/RotationGestureBasic'; -import RotationGestureBasicSrc from '!!raw-loader!@site/src/examples/RotationGestureBasicSrc'; +import RotationGestureBasic from '@site/static/examples/RotationGestureBasic'; +import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc'; } @@ -33,6 +33,8 @@ The gesture [activates](/docs/fundamentals/states-events#active) when fingers ar Gesture callback can be used for continuous tracking of the rotation gesture. It provides information about the gesture such as the amount rotated, the focal point of the rotation (anchor), and its instantaneous velocity. +Rotation Gesture + ## Reference ```jsx @@ -124,4 +126,4 @@ const styles = StyleSheet.create({ marginBottom: 30, }, }); -``` +```@site/static/examples/RotationGestureBasic diff --git a/docs/docs/gestures/tap-gesture.mdx b/docs/docs/gestures/tap-gesture.md similarity index 96% rename from docs/docs/gestures/tap-gesture.mdx rename to docs/docs/gestures/tap-gesture.md index 8ee9a893d4..745d865ecb 100644 --- a/docs/docs/gestures/tap-gesture.mdx +++ b/docs/docs/gestures/tap-gesture.md @@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; -import TapGestureBasic from '@site/src/examples/TapGestureBasic'; -import TapGestureBasicSrc from '!!raw-loader!@site/src/examples/TapGestureBasic'; +import TapGestureBasic from '@site/static/examples/TapGestureBasic'; +import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBasic'; } @@ -34,6 +34,8 @@ For example, you might configure tap gesture recognizers to detect single taps, In order for a gesture to [activate](/docs/fundamentals/states-events#active), specified gesture requirements such as minPointers, numberOfTaps, maxDist, maxDuration, and maxDelayMs (explained below) must be met. Immediately after the gesture [activates](/docs/fundamentals/states-events#active), it will [end](/docs/fundamentals/states-events#end). +Tap Gesture + ## Reference ```jsx @@ -160,4 +162,4 @@ const styles = StyleSheet.create({ marginBottom: 30, }, }); -``` +```@site/static/examples/TapGestureBasic diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 405e40e2d4..f4b50e0c09 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -21,6 +21,14 @@ const config = { customFields: { shortTitle: 'Gesture Handler', }, + + scripts: [ + { + src: '/react-native-gesture-handler/js/snack-helpers.js', + async: true, + }, + ], + onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', diff --git a/docs/src/examples/FlingGestureBasic.jsx b/docs/static/examples/FlingGestureBasic.js similarity index 97% rename from docs/src/examples/FlingGestureBasic.jsx rename to docs/static/examples/FlingGestureBasic.js index c6c5cb3fc3..1a637bbcd6 100644 --- a/docs/src/examples/FlingGestureBasic.jsx +++ b/docs/static/examples/FlingGestureBasic.js @@ -1,5 +1,4 @@ import React from 'react'; -import { View } from 'react-native'; import { Directions, Gesture, diff --git a/docs/src/examples/HoverGestureBasic.jsx b/docs/static/examples/HoverGestureBasic.js similarity index 62% rename from docs/src/examples/HoverGestureBasic.jsx rename to docs/static/examples/HoverGestureBasic.js index f4825ca3e9..d4c49b6742 100644 --- a/docs/src/examples/HoverGestureBasic.jsx +++ b/docs/static/examples/HoverGestureBasic.js @@ -5,7 +5,12 @@ import { GestureHandlerRootView, } from 'react-native-gesture-handler'; import { StyleSheet } from 'react-native'; -import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'; +import Animated, { + Easing, + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; export default function App() { const translateX = useSharedValue(0); @@ -16,24 +21,30 @@ export default function App() { const hover = Gesture.Hover() .onStart((event) => { - startX.value = event.x; - startY.value = event.y; + startX.value = event.x; + startY.value = event.y; }) .onUpdate((event) => { - translateX.value = (startX.value - event.x) * .2; - translateY.value = (startY.value - event.y) * .2; + translateX.value = (event.x - startX.value) * 0.3; + translateY.value = (event.y - startY.value) * 0.3; }) .onEnd(() => { - translateX.value = withTiming(0, {duration: 400, easing: Easing.bezier(1, -1, 0.3, 1.43)}); - translateY.value = withTiming(0, {duration: 400, easing: Easing.bezier(1, -1, 0.3, 1.43)}); + translateX.value = withTiming(0, { + duration: 400, + easing: Easing.bezier(1, -1, 0.3, 1.43), + }); + translateY.value = withTiming(0, { + duration: 400, + easing: Easing.bezier(1, -1, 0.3, 1.43), + }); }); const boxAnimatedStyle = useAnimatedStyle(() => ({ transform: [ - {translateX: translateX.value}, - {translateY: translateY.value}, + { translateX: translateX.value }, + { translateY: translateY.value }, ], - })) + })); return ( diff --git a/docs/src/examples/LongPressGestureBasic.jsx b/docs/static/examples/LongPressGestureBasic.js similarity index 100% rename from docs/src/examples/LongPressGestureBasic.jsx rename to docs/static/examples/LongPressGestureBasic.js diff --git a/docs/src/examples/PanGestureBasic.jsx b/docs/static/examples/PanGestureBasic.js similarity index 100% rename from docs/src/examples/PanGestureBasic.jsx rename to docs/static/examples/PanGestureBasic.js diff --git a/docs/src/examples/PinchGestureBasic.jsx b/docs/static/examples/PinchGestureBasic.js similarity index 75% rename from docs/src/examples/PinchGestureBasic.jsx rename to docs/static/examples/PinchGestureBasic.js index 2f62cc4c99..459218ca32 100644 --- a/docs/src/examples/PinchGestureBasic.jsx +++ b/docs/static/examples/PinchGestureBasic.js @@ -50,23 +50,27 @@ export default function App() { const pan = Gesture.Pan() .minDistance(1) .onStart((event) => { - const distanceX = Math.abs(event.absoluteX - centerX.value); - const distanceY = Math.abs(event.absoluteY - centerY.value); - const width = Math.max(distanceX, distanceY) * 2; - distanceDifference.value = boxWidth.value - width; - console.log(distanceDifference.value); + const distanceX = Math.abs(event.absoluteX - centerX.value); + const distanceY = Math.abs(event.absoluteY - centerY.value); + const width = Math.max(distanceX, distanceY) * 2; + distanceDifference.value = boxWidth.value - width; + console.log(distanceDifference.value); - touchOpacity.value = withTiming(0.4, { duration: 200 }); + touchOpacity.value = withTiming(0.4, { duration: 200 }); }) .onUpdate((event) => { - const distanceX = Math.abs(event.absoluteX - centerX.value); - const distanceY = Math.abs(event.absoluteY - centerY.value); - boxWidth.value = clamp(Math.max(distanceX, distanceY) * 2 + distanceDifference.value, 100, 300); + const distanceX = Math.abs(event.absoluteX - centerX.value); + const distanceY = Math.abs(event.absoluteY - centerY.value); + boxWidth.value = clamp( + Math.max(distanceX, distanceY) * 2 + distanceDifference.value, + 100, + 300 + ); - pointerPositionX.value = event.absoluteX - centerX.value - 12; - pointerPositionY.value = event.absoluteY - centerY.value - 12; - negativePointerPositionX.value = centerX.value - event.absoluteX - 12; - negativePointerPositionY.value = centerY.value - event.absoluteY - 12; + pointerPositionX.value = event.absoluteX - centerX.value - 12; + pointerPositionY.value = event.absoluteY - centerY.value - 12; + negativePointerPositionX.value = centerX.value - event.absoluteX - 12; + negativePointerPositionY.value = centerY.value - event.absoluteY - 12; }) .onEnd(() => { touchOpacity.value = withTiming(0, { duration: 200 }); diff --git a/docs/src/examples/PinchGestureBasicSrc.jsx b/docs/static/examples/PinchGestureBasicSrc.js similarity index 75% rename from docs/src/examples/PinchGestureBasicSrc.jsx rename to docs/static/examples/PinchGestureBasicSrc.js index 7a5fb2f410..03c091c0ca 100644 --- a/docs/src/examples/PinchGestureBasicSrc.jsx +++ b/docs/static/examples/PinchGestureBasicSrc.js @@ -1,14 +1,14 @@ -import React from "react"; -import { StyleSheet } from "react-native"; +import React from 'react'; +import { StyleSheet } from 'react-native'; import { Gesture, GestureDetector, GestureHandlerRootView, -} from "react-native-gesture-handler"; +} from 'react-native-gesture-handler'; import Animated, { useSharedValue, useAnimatedStyle, -} from "react-native-reanimated"; +} from 'react-native-reanimated'; export default function App() { const scale = useSharedValue(1); @@ -38,22 +38,22 @@ export default function App() { const styles = StyleSheet.create({ container: { flex: 1, - alignItems: "center", - justifyContent: "center", + alignItems: 'center', + justifyContent: 'center', }, box: { width: 100, height: 100, borderRadius: 20, - backgroundColor: "#b58df1", + backgroundColor: '#b58df1', }, dot: { width: 24, height: 24, borderRadius: 12, - backgroundColor: "#ccc", - position: "absolute", - left: "50%", - top: "50%", + backgroundColor: '#ccc', + position: 'absolute', + left: '50%', + top: '50%', }, }); diff --git a/docs/src/examples/RotationGestureBasic.jsx b/docs/static/examples/RotationGestureBasic.js similarity index 100% rename from docs/src/examples/RotationGestureBasic.jsx rename to docs/static/examples/RotationGestureBasic.js diff --git a/docs/src/examples/RotationGestureBasicSrc.jsx b/docs/static/examples/RotationGestureBasicSrc.js similarity index 92% rename from docs/src/examples/RotationGestureBasicSrc.jsx rename to docs/static/examples/RotationGestureBasicSrc.js index c13370e852..a12979ceef 100644 --- a/docs/src/examples/RotationGestureBasicSrc.jsx +++ b/docs/static/examples/RotationGestureBasicSrc.js @@ -16,10 +16,10 @@ export default function App() { const rotation = Gesture.Rotation() .onStart(() => { - startAngle.value = angle.value; + startAngle.value = angle.value; }) .onUpdate((event) => { - angle.value = startAngle.value + event.angle; + angle.value = startAngle.value + event.angle; }); const boxAnimatedStyles = useAnimatedStyle(() => ({ diff --git a/docs/src/examples/TapGestureBasic.jsx b/docs/static/examples/TapGestureBasic.js similarity index 100% rename from docs/src/examples/TapGestureBasic.jsx rename to docs/static/examples/TapGestureBasic.js diff --git a/docs/static/js/snack-helpers.js b/docs/static/js/snack-helpers.js new file mode 100644 index 0000000000..0e3bd71ca9 --- /dev/null +++ b/docs/static/js/snack-helpers.js @@ -0,0 +1,86 @@ +const DEFAULT_PLATFORM = 'android'; +const DEPENDENCIES = [ + 'react-native-reanimated@*', + 'react-native-gesture-handler@*', + '@shopify/flash-list@*', +]; + +function getSnackUrl(options) { + let label = options.label || document.title; + let codeId = options.templateId; + + let baseUrl = + `https://snack.expo.io?platform=${DEFAULT_PLATFORM}&name=` + + encodeURIComponent(label) + + '&dependencies=' + + encodeURIComponent(DEPENDENCIES.join(',')) + + '&hideQueryParams=true'; + + let templateUrl = `${document.location.origin}/react-native-gesture-handler/examples/${codeId}.js`; + return `${baseUrl}&sourceUrl=${encodeURIComponent(templateUrl)}`; +} + +let openIcon = + ''; + +function appendSnackLink() { + let samples = document.querySelectorAll('samp'); + + if (!samples.length) { + return; + } + + samples.forEach((samp) => { + var id = samp.getAttribute('id'); + + var snackLink = document.createElement('a'); + snackLink.href = getSnackUrl({ templateId: id }); + snackLink.target = '_blank'; + snackLink.innerHTML = `Try this example on Snack ${openIcon}`; + snackLink.className = 'snack-link'; + + var nextDiv = samp.nextElementSibling; + while ( + nextDiv && + !Array.from(nextDiv.classList).some((className) => + className.includes('codeBlockContainer') + ) + ) { + nextDiv = nextDiv.nextElementSibling; + } + + if (nextDiv) { + nextDiv.insertAdjacentElement('afterend', snackLink); + } else { + samp.parentNode.insertBefore(snackLink, samp.nextSibling); + } + + samp.remove(); + }); +} + +function transformExistingSnackLinks() { + document.querySelectorAll('a[href*="#example/"]').forEach((a) => { + let urlParts = a.href.split('#example/'); + let templateId = urlParts[urlParts.length - 1]; + a.href = getSnackUrl({ templateId }); + a.target = '_blank'; + }); +} + +function initializeSnackObservers() { + appendSnackLink(); + transformExistingSnackLinks(); + + const mutationObserver = new MutationObserver((mutations) => { + mutations.forEach(appendSnackLink); + mutations.forEach(transformExistingSnackLinks); + }); + + mutationObserver.observe(document.documentElement, { + childList: true, + subtree: true, + }); +} + +document.addEventListener('DOMContentLoaded', initializeSnackObservers); From 1af8f859af273eddad2211cbdcaef6368eba89d0 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Tue, 23 Apr 2024 13:12:52 +0200 Subject: [PATCH 03/21] lint --- docs/docs/gestures/fling-gesture.md | 7 ++++--- docs/docs/gestures/hover-gesture.md | 4 ++-- docs/docs/gestures/long-press-gesture.md | 7 ++++--- docs/docs/gestures/pan-gesture.md | 7 ++++--- docs/docs/gestures/pinch-gesture.md | 7 ++++--- docs/docs/gestures/rotation-gesture.md | 7 ++++--- docs/docs/gestures/tap-gesture.md | 7 ++++--- 7 files changed, 26 insertions(+), 20 deletions(-) diff --git a/docs/docs/gestures/fling-gesture.md b/docs/docs/gestures/fling-gesture.md index 27710c48f3..743d7d3a86 100644 --- a/docs/docs/gestures/fling-gesture.md +++ b/docs/docs/gestures/fling-gesture.md @@ -17,8 +17,8 @@ import FlingGestureBasic from '@site/static/examples/FlingGestureBasic'; import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic'; } - src={FlingGestureBasic} +component={} +src={FlingGestureBasic} /> import BaseEventData from './\_shared/base-gesture-event-data.md'; @@ -158,4 +158,5 @@ const styles = StyleSheet.create({ }, }); ``` -@site/static/examples/FlingGestureBasic \ No newline at end of file + +@site/static/examples/FlingGestureBasic diff --git a/docs/docs/gestures/hover-gesture.md b/docs/docs/gestures/hover-gesture.md index 815489ef87..89edd9548d 100644 --- a/docs/docs/gestures/hover-gesture.md +++ b/docs/docs/gestures/hover-gesture.md @@ -17,8 +17,8 @@ import HoverGestureBasic from '@site/static/examples/HoverGestureBasic'; import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic'; } - src={HoverGestureBasicSrc} +component={} +src={HoverGestureBasicSrc} /> import BaseEventData from './\_shared/base-gesture-event-data.md'; diff --git a/docs/docs/gestures/long-press-gesture.md b/docs/docs/gestures/long-press-gesture.md index 237ef994cd..6aa16aa139 100644 --- a/docs/docs/gestures/long-press-gesture.md +++ b/docs/docs/gestures/long-press-gesture.md @@ -17,8 +17,8 @@ import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic'; import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic'; } - src={LongPressGestureBasicSrc} +component={} +src={LongPressGestureBasicSrc} /> import BaseEventData from './\_shared/base-gesture-event-data.md'; @@ -135,4 +135,5 @@ const styles = StyleSheet.create({ }, }); ``` -@site/static/examples/LongPressGestureBasic \ No newline at end of file + +@site/static/examples/LongPressGestureBasic diff --git a/docs/docs/gestures/pan-gesture.md b/docs/docs/gestures/pan-gesture.md index 536f9f63d2..7f3305f9cd 100644 --- a/docs/docs/gestures/pan-gesture.md +++ b/docs/docs/gestures/pan-gesture.md @@ -17,8 +17,8 @@ import PanGestureBasic from '@site/static/examples/PanGestureBasic'; import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic'; } - src={PanGestureBasicSrc} +component={} +src={PanGestureBasicSrc} /> import BaseEventData from './\_shared/base-gesture-event-data.md'; @@ -239,4 +239,5 @@ const styles = StyleSheet.create({ }, }); ``` -@site/static/examples/PanGestureBasic \ No newline at end of file + +@site/static/examples/PanGestureBasic diff --git a/docs/docs/gestures/pinch-gesture.md b/docs/docs/gestures/pinch-gesture.md index 774f745cc3..bc60ab2e9d 100644 --- a/docs/docs/gestures/pinch-gesture.md +++ b/docs/docs/gestures/pinch-gesture.md @@ -17,8 +17,8 @@ import PinchGestureBasic from '@site/static/examples/PinchGestureBasic'; import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc'; } - src={PinchGestureBasicSrc} +component={} +src={PinchGestureBasicSrc} /> import BaseEventData from './\_shared/base-gesture-event-data.md'; @@ -89,7 +89,7 @@ Position expressed in points along Y axis of center anchor point of gesture ## Example -```jsx +````jsx import { StyleSheet } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; import Animated, { @@ -130,3 +130,4 @@ const styles = StyleSheet.create({ }, }); ```@site/static/examples/PinchGestureBasic +```` diff --git a/docs/docs/gestures/rotation-gesture.md b/docs/docs/gestures/rotation-gesture.md index 3b319515be..87684a9a74 100644 --- a/docs/docs/gestures/rotation-gesture.md +++ b/docs/docs/gestures/rotation-gesture.md @@ -17,8 +17,8 @@ import RotationGestureBasic from '@site/static/examples/RotationGestureBasic'; import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc'; } - src={RotationGestureBasicSrc} +component={} +src={RotationGestureBasicSrc} /> import BaseEventData from './\_shared/base-gesture-event-data.md'; @@ -86,7 +86,7 @@ Y coordinate, expressed in points, of the gesture's central focal point (anchor) ## Example -```jsx +````jsx import { StyleSheet } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; import Animated, { @@ -127,3 +127,4 @@ const styles = StyleSheet.create({ }, }); ```@site/static/examples/RotationGestureBasic +```` diff --git a/docs/docs/gestures/tap-gesture.md b/docs/docs/gestures/tap-gesture.md index 745d865ecb..4728e20b5c 100644 --- a/docs/docs/gestures/tap-gesture.md +++ b/docs/docs/gestures/tap-gesture.md @@ -17,8 +17,8 @@ import TapGestureBasic from '@site/static/examples/TapGestureBasic'; import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBasic'; } - src={TapGestureBasicSrc} +component={} +src={TapGestureBasicSrc} /> import BaseEventData from './\_shared/base-gesture-event-data.md'; @@ -128,7 +128,7 @@ Y coordinate, expressed in points, of the current position of the pointer (finge ## Example -```jsx +````jsx import { View, StyleSheet } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; @@ -163,3 +163,4 @@ const styles = StyleSheet.create({ }, }); ```@site/static/examples/TapGestureBasic +```` From 1f3f955b58029ce1e61eb9a4990ca112a31516ca Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 10:13:55 +0200 Subject: [PATCH 04/21] reformatting gestures markdowns --- docs/docs/gestures/fling-gesture.md | 16 ++++++++-------- docs/docs/gestures/hover-gesture.md | 16 ++++++++-------- docs/docs/gestures/long-press-gesture.md | 22 +++++++++++----------- docs/docs/gestures/pan-gesture.md | 16 ++++++++-------- docs/docs/gestures/pinch-gesture.md | 16 ++++++++-------- docs/docs/gestures/rotation-gesture.md | 16 ++++++++-------- docs/docs/gestures/tap-gesture.md | 16 ++++++++-------- 7 files changed, 59 insertions(+), 59 deletions(-) diff --git a/docs/docs/gestures/fling-gesture.md b/docs/docs/gestures/fling-gesture.md index 743d7d3a86..ba1158b738 100644 --- a/docs/docs/gestures/fling-gesture.md +++ b/docs/docs/gestures/fling-gesture.md @@ -5,14 +5,6 @@ sidebar_label: Fling gesture sidebar_position: 8 --- -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
- import FlingGestureBasic from '@site/static/examples/FlingGestureBasic'; import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic'; @@ -30,6 +22,14 @@ Gesture gets [ACTIVE](/docs/fundamentals/states-events#active) when movement is When gesture gets activated it will turn into [END](/docs/fundamentals/states-events#end) state when finger is released. The gesture will fail to recognize if the finger is lifted before being activated. +import useBaseUrl from '@docusaurus/useBaseUrl'; + +
+ +
+ Fling Gesture ## Reference diff --git a/docs/docs/gestures/hover-gesture.md b/docs/docs/gestures/hover-gesture.md index 89edd9548d..777f2ce980 100644 --- a/docs/docs/gestures/hover-gesture.md +++ b/docs/docs/gestures/hover-gesture.md @@ -5,14 +5,6 @@ sidebar_label: Hover gesture sidebar_position: 9 --- -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
- import HoverGestureBasic from '@site/static/examples/HoverGestureBasic'; import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic'; @@ -30,6 +22,14 @@ A continuous gesture that can recognize hovering above the view it's attached to On iOS additional visual effects may be configured. +import useBaseUrl from '@docusaurus/useBaseUrl'; + +
+ +
+ Hover Gesture ## Reference diff --git a/docs/docs/gestures/long-press-gesture.md b/docs/docs/gestures/long-press-gesture.md index 6aa16aa139..8e507cea8c 100644 --- a/docs/docs/gestures/long-press-gesture.md +++ b/docs/docs/gestures/long-press-gesture.md @@ -5,22 +5,14 @@ sidebar_label: Long press gesture sidebar_position: 5 --- -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
- -import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic'; -import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic'; - } src={LongPressGestureBasicSrc} /> +import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic'; +import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic'; + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; import BaseEventCallbacks from './\_shared/base-gesture-callbacks.md'; @@ -29,6 +21,14 @@ A discrete gesture that activates when the corresponding view is pressed for a s This gesture's state will turn into [END](/docs/fundamentals/states-events#end) immediately after the finger is released. The gesture will fail to recognize a touch event if the finger is lifted before the [minimum required time](/docs/gestures/long-press-gesture#mindurationvalue-number) or if the finger is moved further than the [allowable distance](/docs/gestures/long-press-gesture#maxdistancevalue-number). +import useBaseUrl from '@docusaurus/useBaseUrl'; + +
+ +
+ Long Press Gesture ## Reference diff --git a/docs/docs/gestures/pan-gesture.md b/docs/docs/gestures/pan-gesture.md index 7f3305f9cd..01dfb76590 100644 --- a/docs/docs/gestures/pan-gesture.md +++ b/docs/docs/gestures/pan-gesture.md @@ -5,14 +5,6 @@ sidebar_label: Pan gesture sidebar_position: 3 --- -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
- import PanGestureBasic from '@site/static/examples/PanGestureBasic'; import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic'; @@ -35,6 +27,14 @@ Configurations such as a minimum initial distance, specific vertical or horizont Gesture callback can be used for continuous tracking of the pan gesture. It provides information about the gesture such as its XY translation from the starting point as well as its instantaneous velocity. +import useBaseUrl from '@docusaurus/useBaseUrl'; + +
+ +
+ Pan Gesture ## Reference diff --git a/docs/docs/gestures/pinch-gesture.md b/docs/docs/gestures/pinch-gesture.md index bc60ab2e9d..80078d4020 100644 --- a/docs/docs/gestures/pinch-gesture.md +++ b/docs/docs/gestures/pinch-gesture.md @@ -5,14 +5,6 @@ sidebar_label: Pinch gesture sidebar_position: 7 --- -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
- import PinchGestureBasic from '@site/static/examples/PinchGestureBasic'; import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc'; @@ -36,6 +28,14 @@ Similarly, the scale factor decreases as the distance between the fingers decrea Pinch gestures are used most commonly to change the size of objects or content onscreen. For example, map views use pinch gestures to change the zoom level of the map. +import useBaseUrl from '@docusaurus/useBaseUrl'; + +
+ +
+ Pinch Gesture ## Reference diff --git a/docs/docs/gestures/rotation-gesture.md b/docs/docs/gestures/rotation-gesture.md index 87684a9a74..637acb6613 100644 --- a/docs/docs/gestures/rotation-gesture.md +++ b/docs/docs/gestures/rotation-gesture.md @@ -5,14 +5,6 @@ sidebar_label: Rotation gesture sidebar_position: 6 --- -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
- import RotationGestureBasic from '@site/static/examples/RotationGestureBasic'; import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc'; @@ -33,6 +25,14 @@ The gesture [activates](/docs/fundamentals/states-events#active) when fingers ar Gesture callback can be used for continuous tracking of the rotation gesture. It provides information about the gesture such as the amount rotated, the focal point of the rotation (anchor), and its instantaneous velocity. +import useBaseUrl from '@docusaurus/useBaseUrl'; + +
+ +
+ Rotation Gesture ## Reference diff --git a/docs/docs/gestures/tap-gesture.md b/docs/docs/gestures/tap-gesture.md index 4728e20b5c..b428acfc4d 100644 --- a/docs/docs/gestures/tap-gesture.md +++ b/docs/docs/gestures/tap-gesture.md @@ -5,14 +5,6 @@ sidebar_label: Tap gesture sidebar_position: 4 --- -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
- import TapGestureBasic from '@site/static/examples/TapGestureBasic'; import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBasic'; @@ -34,6 +26,14 @@ For example, you might configure tap gesture recognizers to detect single taps, In order for a gesture to [activate](/docs/fundamentals/states-events#active), specified gesture requirements such as minPointers, numberOfTaps, maxDist, maxDuration, and maxDelayMs (explained below) must be met. Immediately after the gesture [activates](/docs/fundamentals/states-events#active), it will [end](/docs/fundamentals/states-events#end). +import useBaseUrl from '@docusaurus/useBaseUrl'; + +
+ +
+ Tap Gesture ## Reference From e3f331e5226ddb44e2c1f3d73a0a8d4170d446cc Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 10:34:26 +0200 Subject: [PATCH 05/21] adding cursors & fixing touches --- docs/static/examples/FlingGestureBasic.js | 1 + docs/static/examples/HoverGestureBasic.js | 1 + docs/static/examples/LongPressGestureBasic.js | 1 + docs/static/examples/PanGestureBasic.js | 9 ++++++++- docs/static/examples/PinchGestureBasic.js | 3 +++ docs/static/examples/PinchGestureBasicSrc.js | 1 + docs/static/examples/RotationGestureBasic.js | 11 +++++++++-- docs/static/examples/TapGestureBasic.js | 1 + 8 files changed, 25 insertions(+), 3 deletions(-) diff --git a/docs/static/examples/FlingGestureBasic.js b/docs/static/examples/FlingGestureBasic.js index 1a637bbcd6..8afc5cc338 100644 --- a/docs/static/examples/FlingGestureBasic.js +++ b/docs/static/examples/FlingGestureBasic.js @@ -52,5 +52,6 @@ const styles = StyleSheet.create({ height: 100, borderRadius: 20, backgroundColor: '#b58df1', + cursor: 'grab', }, }); diff --git a/docs/static/examples/HoverGestureBasic.js b/docs/static/examples/HoverGestureBasic.js index d4c49b6742..05aaa0cd35 100644 --- a/docs/static/examples/HoverGestureBasic.js +++ b/docs/static/examples/HoverGestureBasic.js @@ -66,5 +66,6 @@ const styles = StyleSheet.create({ height: 100, borderRadius: 20, backgroundColor: '#b58df1', + cursor: 'pointer', }, }); diff --git a/docs/static/examples/LongPressGestureBasic.js b/docs/static/examples/LongPressGestureBasic.js index aaea732b0f..86830c0dd9 100644 --- a/docs/static/examples/LongPressGestureBasic.js +++ b/docs/static/examples/LongPressGestureBasic.js @@ -36,5 +36,6 @@ const styles = StyleSheet.create({ width: 100, height: 100, borderRadius: 20, + cursor: 'pointer', }, }); diff --git a/docs/static/examples/PanGestureBasic.js b/docs/static/examples/PanGestureBasic.js index 5300d8255f..6fe5cb4980 100644 --- a/docs/static/examples/PanGestureBasic.js +++ b/docs/static/examples/PanGestureBasic.js @@ -15,22 +15,29 @@ export default function App() { const translationY = useSharedValue(0); const prevTranslationX = useSharedValue(0); const prevTranslationY = useSharedValue(0); + const grabbing = useSharedValue(false); const animatedStyles = useAnimatedStyle(() => ({ transform: [ { translateX: translationX.value }, { translateY: translationY.value }, ], + cursor: grabbing.value ? 'grabbing' : 'grab', })); const pan = Gesture.Pan() - .onStart(() => { + .minDistance(1) + .onBegin(() => { + grabbing.value = true; prevTranslationX.value = translationX.value; prevTranslationY.value = translationY.value; }) .onUpdate((event) => { translationX.value = prevTranslationX.value + event.translationX; translationY.value = prevTranslationY.value + event.translationY; + }) + .onFinalize(() => { + grabbing.value = false; }); return ( diff --git a/docs/static/examples/PinchGestureBasic.js b/docs/static/examples/PinchGestureBasic.js index 459218ca32..77b1f91dec 100644 --- a/docs/static/examples/PinchGestureBasic.js +++ b/docs/static/examples/PinchGestureBasic.js @@ -41,9 +41,11 @@ export default function App() { React.useEffect(() => { window.addEventListener('resize', updateCenter); + window.addEventListener('scroll', updateCenter); return () => { window.removeEventListener('resize', updateCenter); + window.removeEventListener('scroll', updateCenter); }; }, []); @@ -124,6 +126,7 @@ const styles = StyleSheet.create({ aspectRatio: 1, borderRadius: 20, backgroundColor: '#b58df1', + cursor: 'pointer', }, dot: { width: 24, diff --git a/docs/static/examples/PinchGestureBasicSrc.js b/docs/static/examples/PinchGestureBasicSrc.js index 03c091c0ca..67211480ae 100644 --- a/docs/static/examples/PinchGestureBasicSrc.js +++ b/docs/static/examples/PinchGestureBasicSrc.js @@ -55,5 +55,6 @@ const styles = StyleSheet.create({ position: 'absolute', left: '50%', top: '50%', + pointerEvents: 'none', }, }); diff --git a/docs/static/examples/RotationGestureBasic.js b/docs/static/examples/RotationGestureBasic.js index 838ed87daa..9d307550d7 100644 --- a/docs/static/examples/RotationGestureBasic.js +++ b/docs/static/examples/RotationGestureBasic.js @@ -21,6 +21,7 @@ export default function App() { const negativePointerPositionX = useSharedValue(0); const negativePointerPositionY = useSharedValue(0); const touchOpacity = useSharedValue(0); + const grabbing = useSharedValue(false); const boxRef = React.useRef(null); @@ -39,15 +40,17 @@ export default function App() { React.useEffect(() => { window.addEventListener('resize', updateCenter); + window.addEventListener('scroll', updateCenter); return () => { window.removeEventListener('resize', updateCenter); + window.removeEventListener('scroll', updateCenter); }; }, []); const pan = Gesture.Pan() .minDistance(1) - .onStart((event) => { + .onBegin((event) => { startAngle.value = angle.value - Math.atan2( @@ -55,6 +58,7 @@ export default function App() { event.absoluteX - centerX.value ); touchOpacity.value = withTiming(0.4, { duration: 200 }); + grabbing.value = true; }) .onUpdate((event) => { angle.value = @@ -68,12 +72,14 @@ export default function App() { negativePointerPositionX.value = centerX.value - event.absoluteX - 12; negativePointerPositionY.value = centerY.value - event.absoluteY - 12; }) - .onEnd(() => { + .onFinalize(() => { touchOpacity.value = withTiming(0, { duration: 200 }); + grabbing.value = false; }); const boxAnimatedStyles = useAnimatedStyle(() => ({ transform: [{ rotate: `${angle.value}rad` }], + cursor: grabbing.value ? 'grabbing' : 'grab', })); return ( @@ -129,5 +135,6 @@ const styles = StyleSheet.create({ position: 'absolute', left: '50%', top: '50%', + pointerEvents: 'none', }, }); diff --git a/docs/static/examples/TapGestureBasic.js b/docs/static/examples/TapGestureBasic.js index 4d3b6c7e30..2690fb7957 100644 --- a/docs/static/examples/TapGestureBasic.js +++ b/docs/static/examples/TapGestureBasic.js @@ -36,5 +36,6 @@ const styles = StyleSheet.create({ width: 100, height: 100, borderRadius: 20, + cursor: 'pointer', }, }); From 725998c89555a72d8711684d1caba52cf95e7a76 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 11:44:03 +0200 Subject: [PATCH 06/21] adding bounds in pan gesture --- docs/docs/gestures/pan-gesture.md | 2 +- docs/static/examples/PanGestureBasic.js | 47 +++++++++++-- docs/static/examples/PanGestureBasicSrc.js | 76 ++++++++++++++++++++++ 3 files changed, 117 insertions(+), 8 deletions(-) create mode 100644 docs/static/examples/PanGestureBasicSrc.js diff --git a/docs/docs/gestures/pan-gesture.md b/docs/docs/gestures/pan-gesture.md index 01dfb76590..9e2c1824e5 100644 --- a/docs/docs/gestures/pan-gesture.md +++ b/docs/docs/gestures/pan-gesture.md @@ -35,7 +35,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; -Pan Gesture +Pan Gesture ## Reference diff --git a/docs/static/examples/PanGestureBasic.js b/docs/static/examples/PanGestureBasic.js index 6fe5cb4980..3a090d93f0 100644 --- a/docs/static/examples/PanGestureBasic.js +++ b/docs/static/examples/PanGestureBasic.js @@ -8,7 +8,11 @@ import { GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler'; -import { StyleSheet } from 'react-native'; +import { StyleSheet, View } from 'react-native'; + +function clamp(val, min, max) { + return Math.min(Math.max(val, min), max); +} export default function App() { const translationX = useSharedValue(0); @@ -16,6 +20,10 @@ export default function App() { const prevTranslationX = useSharedValue(0); const prevTranslationY = useSharedValue(0); const grabbing = useSharedValue(false); + const maxTranslateX = useSharedValue(0); + const maxTranslateY = useSharedValue(0); + + const containerRef = React.useRef(null); const animatedStyles = useAnimatedStyle(() => ({ transform: [ @@ -25,6 +33,29 @@ export default function App() { cursor: grabbing.value ? 'grabbing' : 'grab', })); + const updateWidthAndHeight = () => { + if (!containerRef.current) return; + + containerRef.current.measureInWindow((x, y, width, height) => { + maxTranslateX.value = width / 2 - 50; + maxTranslateY.value = height / 2 - 50; + }); + } + + React.useEffect(() => { + updateWidthAndHeight(); + }, [containerRef.current]); + + React.useEffect(() => { + window.addEventListener('resize', updateWidthAndHeight); + window.addEventListener('scroll', updateWidthAndHeight); + + return () => { + window.removeEventListener('resize', updateWidthAndHeight); + window.removeEventListener('scroll', updateWidthAndHeight); + }; + }, []); + const pan = Gesture.Pan() .minDistance(1) .onBegin(() => { @@ -33,18 +64,20 @@ export default function App() { prevTranslationY.value = translationY.value; }) .onUpdate((event) => { - translationX.value = prevTranslationX.value + event.translationX; - translationY.value = prevTranslationY.value + event.translationY; + translationX.value = clamp(prevTranslationX.value + event.translationX, -maxTranslateX.value, maxTranslateX.value); + translationY.value = clamp(prevTranslationY.value + event.translationY, -maxTranslateY.value, maxTranslateY.value); }) .onFinalize(() => { grabbing.value = false; }); return ( - - - - + + + + + + ); } diff --git a/docs/static/examples/PanGestureBasicSrc.js b/docs/static/examples/PanGestureBasicSrc.js new file mode 100644 index 0000000000..996a9aa937 --- /dev/null +++ b/docs/static/examples/PanGestureBasicSrc.js @@ -0,0 +1,76 @@ +import React from "react"; +import Animated, { + useSharedValue, + useAnimatedStyle, +} from "react-native-reanimated"; +import { + Gesture, + GestureDetector, + GestureHandlerRootView, +} from "react-native-gesture-handler"; +import { StyleSheet, Dimensions } from "react-native"; + +function clamp(val, min, max) { + 'worklet'; + return Math.min(Math.max(val, min), max); +} + +const { width, height } = Dimensions.get("screen"); + +export default function App() { + const translationX = useSharedValue(0); + const translationY = useSharedValue(0); + const prevTranslationX = useSharedValue(0); + const prevTranslationY = useSharedValue(0); + + const animatedStyles = useAnimatedStyle(() => ({ + transform: [ + { translateX: translationX.value }, + { translateY: translationY.value }, + ], + })); + + const pan = Gesture.Pan() + .minDistance(1) + .onStart(() => { + prevTranslationX.value = translationX.value; + prevTranslationY.value = translationY.value; + }) + .onUpdate((event) => { + const maxTranslateX = width / 2 - 50; + const maxTranslateY = height / 2 - 50; + + translationX.value = clamp( + prevTranslationX.value + event.translationX, + -maxTranslateX, + maxTranslateX + ); + translationY.value = clamp( + prevTranslationY.value + event.translationY, + -maxTranslateY, + maxTranslateY + ); + }); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + }, + box: { + width: 100, + height: 100, + backgroundColor: "#b58df1", + borderRadius: 20, + }, +}); From 828876996cb979e413eb6d8948a7a24950e1cf71 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 11:47:19 +0200 Subject: [PATCH 07/21] swm brand colors in tap gesture --- docs/static/examples/TapGestureBasic.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/static/examples/TapGestureBasic.js b/docs/static/examples/TapGestureBasic.js index 2690fb7957..d35ec28f15 100644 --- a/docs/static/examples/TapGestureBasic.js +++ b/docs/static/examples/TapGestureBasic.js @@ -7,7 +7,7 @@ import { } from 'react-native-gesture-handler'; import { StyleSheet } from 'react-native'; -const COLORS = ['#b58df1', '#f1b58d', '#8df1b5', '#8d8df1', '#f18d8d']; +const COLORS = ['#33488e', '#ffe04b', '#5bb9e0', '#fa7f7c', '#82cab2']; export default function App() { const [color, setColor] = React.useState(COLORS[0]); From b973405addcb5511b14a1d2e87fbcd72098754b1 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 12:18:35 +0200 Subject: [PATCH 08/21] long press gesture edit --- docs/static/examples/LongPressGestureBasic.js | 53 +++++++++++++++---- 1 file changed, 44 insertions(+), 9 deletions(-) diff --git a/docs/static/examples/LongPressGestureBasic.js b/docs/static/examples/LongPressGestureBasic.js index 86830c0dd9..297bea2050 100644 --- a/docs/static/examples/LongPressGestureBasic.js +++ b/docs/static/examples/LongPressGestureBasic.js @@ -1,26 +1,61 @@ import React from 'react'; -import { View } from 'react-native'; import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler'; -import { StyleSheet } from 'react-native'; +import { Easing, StyleSheet } from 'react-native'; +import Animated, { + interpolateColor, + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; -const COLORS = ['#b58df1', '#f1b58d', '#8df1b5', '#8d8df1', '#f18d8d']; +const COLORS = ['#33488e', '#ffe04b', '#5bb9e0', '#fa7f7c', '#82cab2']; export default function App() { - const [color, setColor] = React.useState(COLORS[0]); + const colorIndex = useSharedValue(0); + const scale = useSharedValue(1); - const longPress = Gesture.LongPress().onStart(() => { - const nextColorIndex = (COLORS.indexOf(color) + 1) % COLORS.length; - setColor(COLORS[nextColorIndex]); - }); + const longPress = Gesture.LongPress() + .onBegin(() => { + scale.value = withTiming(1.2, { + duration: 500, + easing: Easing.bezier(0.31, 0.04, 0.03, 1.04), + }); + }) + .onStart(() => { + colorIndex.value = withTiming( + (colorIndex.value + 1) % (COLORS.length + 1), + { duration: 200 }, + () => { + if (colorIndex.value === COLORS.length) { + colorIndex.value = 0; + } + } + ); + }) + .onFinalize(() => { + scale.value = withTiming(1, { + duration: 250, + easing: Easing.bezier(0.82, 0.06, 0.42, 1.01), + }); + }); + + const animatedStyle = useAnimatedStyle(() => ({ + backgroundColor: interpolateColor( + colorIndex.value, + [...COLORS.map((_, i) => i), COLORS.length], + [...COLORS, COLORS[0]] + ), + transform: [{ scale: scale.value }], + })); return ( - + ); From 50d92afe7f9e16a0bde77bd0387be94046d200a6 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 12:38:53 +0200 Subject: [PATCH 09/21] reducing height of pinch & pan gestures --- docs/static/examples/PanGestureBasic.js | 2 +- docs/static/examples/PinchGestureBasic.js | 102 +++++++++++-------- docs/static/examples/RotationGestureBasic.js | 5 + 3 files changed, 65 insertions(+), 44 deletions(-) diff --git a/docs/static/examples/PanGestureBasic.js b/docs/static/examples/PanGestureBasic.js index 3a090d93f0..b0593f203f 100644 --- a/docs/static/examples/PanGestureBasic.js +++ b/docs/static/examples/PanGestureBasic.js @@ -87,7 +87,7 @@ const styles = StyleSheet.create({ flex: 1, alignItems: 'center', justifyContent: 'center', - aspectRatio: 2, + aspectRatio: 3, }, box: { width: 100, diff --git a/docs/static/examples/PinchGestureBasic.js b/docs/static/examples/PinchGestureBasic.js index 77b1f91dec..365b169119 100644 --- a/docs/static/examples/PinchGestureBasic.js +++ b/docs/static/examples/PinchGestureBasic.js @@ -4,7 +4,7 @@ import { GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler'; -import { StyleSheet } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import Animated, { useSharedValue, useAnimatedStyle, @@ -16,36 +16,51 @@ const clamp = (val, min, max) => Math.min(Math.max(val, min), max); export default function App() { const boxWidth = useSharedValue(100); const distanceDifference = useSharedValue(0); + const centerX = useSharedValue(0); const centerY = useSharedValue(0); + const width = useSharedValue(0); + const height = useSharedValue(0); + const pointerPositionX = useSharedValue(0); const pointerPositionY = useSharedValue(0); const negativePointerPositionX = useSharedValue(0); const negativePointerPositionY = useSharedValue(0); + const touchOpacity = useSharedValue(0); + const containerRef = React.useRef(null); const boxRef = React.useRef(null); - function updateCenter() { - if (!boxRef.current) return; + function updateCenterAndDimensions() { + if (boxRef.current) { + boxRef.current.measureInWindow((x, y, width, height) => { + centerX.value = x + width / 2; + centerY.value = y + height / 2; + }); + } - boxRef.current.measureInWindow((x, y, width, height) => { - centerX.value = x + width / 2; - centerY.value = y + height / 2; - }); + if (containerRef.current) { + containerRef.current.measureInWindow((x, y, w, h) => { + width.value = w; + height.value = h; + }); + } + + boxWidth.value = clamp(boxWidth.value, 100, Math.min(width.value, height.value)); } React.useEffect(() => { - updateCenter(); - }, [boxRef.current]); + updateCenterAndDimensions(); + }, [boxRef.current, containerRef.current]); React.useEffect(() => { - window.addEventListener('resize', updateCenter); - window.addEventListener('scroll', updateCenter); + window.addEventListener('resize', updateCenterAndDimensions); + window.addEventListener('scroll', updateCenterAndDimensions); return () => { - window.removeEventListener('resize', updateCenter); - window.removeEventListener('scroll', updateCenter); + window.removeEventListener('resize', updateCenterAndDimensions); + window.removeEventListener('scroll', updateCenterAndDimensions); }; }, []); @@ -56,7 +71,6 @@ export default function App() { const distanceY = Math.abs(event.absoluteY - centerY.value); const width = Math.max(distanceX, distanceY) * 2; distanceDifference.value = boxWidth.value - width; - console.log(distanceDifference.value); touchOpacity.value = withTiming(0.4, { duration: 200 }); }) @@ -66,7 +80,7 @@ export default function App() { boxWidth.value = clamp( Math.max(distanceX, distanceY) * 2 + distanceDifference.value, 100, - 300 + Math.min(width.value, height.value) ); pointerPositionX.value = event.absoluteX - centerX.value - 12; @@ -83,34 +97,36 @@ export default function App() { })); return ( - - + + + + + + - - - + style={[ + styles.dot, + { + transform: [ + { translateX: negativePointerPositionX }, + { translateY: negativePointerPositionY }, + ], + opacity: touchOpacity, + }, + ]}> + ); } @@ -120,7 +136,7 @@ const styles = StyleSheet.create({ flex: 1, alignItems: 'center', justifyContent: 'center', - aspectRatio: 2, + aspectRatio: 3, }, box: { aspectRatio: 1, diff --git a/docs/static/examples/RotationGestureBasic.js b/docs/static/examples/RotationGestureBasic.js index 9d307550d7..878fd3fc0b 100644 --- a/docs/static/examples/RotationGestureBasic.js +++ b/docs/static/examples/RotationGestureBasic.js @@ -59,6 +59,11 @@ export default function App() { ); touchOpacity.value = withTiming(0.4, { duration: 200 }); grabbing.value = true; + + pointerPositionX.value = event.absoluteX - centerX.value - 12; + pointerPositionY.value = event.absoluteY - centerY.value - 12; + negativePointerPositionX.value = centerX.value - event.absoluteX - 12; + negativePointerPositionY.value = centerY.value - event.absoluteY - 12; }) .onUpdate((event) => { angle.value = From e49e9d57fcad10860418ee8ebb03b5bf9f7207bc Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 12:58:05 +0200 Subject: [PATCH 10/21] fixing md --- docs/docs/gestures/fling-gesture.md | 2 - docs/docs/gestures/hover-gesture.md | 2 +- docs/docs/gestures/long-press-gesture.md | 2 - docs/docs/gestures/pan-gesture.md | 2 - docs/docs/gestures/pinch-gesture.md | 5 +-- docs/docs/gestures/rotation-gesture.md | 5 +-- docs/docs/gestures/tap-gesture.md | 5 +-- docs/static/examples/PanGestureBasicSrc.js | 16 ++++---- docs/static/examples/PinchGestureBasicSrc.js | 39 +++++++++++++------- 9 files changed, 40 insertions(+), 38 deletions(-) diff --git a/docs/docs/gestures/fling-gesture.md b/docs/docs/gestures/fling-gesture.md index ba1158b738..825edc9fdb 100644 --- a/docs/docs/gestures/fling-gesture.md +++ b/docs/docs/gestures/fling-gesture.md @@ -158,5 +158,3 @@ const styles = StyleSheet.create({ }, }); ``` - -@site/static/examples/FlingGestureBasic diff --git a/docs/docs/gestures/hover-gesture.md b/docs/docs/gestures/hover-gesture.md index 777f2ce980..9796fa85e2 100644 --- a/docs/docs/gestures/hover-gesture.md +++ b/docs/docs/gestures/hover-gesture.md @@ -98,4 +98,4 @@ Y coordinate of the current position of the pointer relative to the window. The ## Remarks -- Don't rely on `Hover` gesture to continue after the mouse button is clicked or the stylus touches the screen. If you want to handle both cases, [compose](/docs/fundamentals/gesture-composition) it with [`Pan` gesture](/docs/gestures/pan-gesture).@site/static/examples/HoverGestureBasic +- Don't rely on `Hover` gesture to continue after the mouse button is clicked or the stylus touches the screen. If you want to handle both cases, [compose](/docs/fundamentals/gesture-composition) it with [`Pan` gesture](/docs/gestures/pan-gesture). diff --git a/docs/docs/gestures/long-press-gesture.md b/docs/docs/gestures/long-press-gesture.md index 8e507cea8c..695dc841e9 100644 --- a/docs/docs/gestures/long-press-gesture.md +++ b/docs/docs/gestures/long-press-gesture.md @@ -135,5 +135,3 @@ const styles = StyleSheet.create({ }, }); ``` - -@site/static/examples/LongPressGestureBasic diff --git a/docs/docs/gestures/pan-gesture.md b/docs/docs/gestures/pan-gesture.md index 9e2c1824e5..c776f4b43a 100644 --- a/docs/docs/gestures/pan-gesture.md +++ b/docs/docs/gestures/pan-gesture.md @@ -239,5 +239,3 @@ const styles = StyleSheet.create({ }, }); ``` - -@site/static/examples/PanGestureBasic diff --git a/docs/docs/gestures/pinch-gesture.md b/docs/docs/gestures/pinch-gesture.md index 80078d4020..f89a2c0e3f 100644 --- a/docs/docs/gestures/pinch-gesture.md +++ b/docs/docs/gestures/pinch-gesture.md @@ -89,7 +89,7 @@ Position expressed in points along Y axis of center anchor point of gesture ## Example -````jsx +```jsx import { StyleSheet } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; import Animated, { @@ -129,5 +129,4 @@ const styles = StyleSheet.create({ marginBottom: 30, }, }); -```@site/static/examples/PinchGestureBasic -```` +``` diff --git a/docs/docs/gestures/rotation-gesture.md b/docs/docs/gestures/rotation-gesture.md index 637acb6613..c3e5bafe3f 100644 --- a/docs/docs/gestures/rotation-gesture.md +++ b/docs/docs/gestures/rotation-gesture.md @@ -86,7 +86,7 @@ Y coordinate, expressed in points, of the gesture's central focal point (anchor) ## Example -````jsx +```jsx import { StyleSheet } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; import Animated, { @@ -126,5 +126,4 @@ const styles = StyleSheet.create({ marginBottom: 30, }, }); -```@site/static/examples/RotationGestureBasic -```` +``` diff --git a/docs/docs/gestures/tap-gesture.md b/docs/docs/gestures/tap-gesture.md index b428acfc4d..81b183df2d 100644 --- a/docs/docs/gestures/tap-gesture.md +++ b/docs/docs/gestures/tap-gesture.md @@ -128,7 +128,7 @@ Y coordinate, expressed in points, of the current position of the pointer (finge ## Example -````jsx +```jsx import { View, StyleSheet } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; @@ -162,5 +162,4 @@ const styles = StyleSheet.create({ marginBottom: 30, }, }); -```@site/static/examples/TapGestureBasic -```` +``` diff --git a/docs/static/examples/PanGestureBasicSrc.js b/docs/static/examples/PanGestureBasicSrc.js index 996a9aa937..2a7ae8c4ee 100644 --- a/docs/static/examples/PanGestureBasicSrc.js +++ b/docs/static/examples/PanGestureBasicSrc.js @@ -1,21 +1,21 @@ -import React from "react"; +import React from 'react'; import Animated, { useSharedValue, useAnimatedStyle, -} from "react-native-reanimated"; +} from 'react-native-reanimated'; import { Gesture, GestureDetector, GestureHandlerRootView, -} from "react-native-gesture-handler"; -import { StyleSheet, Dimensions } from "react-native"; +} from 'react-native-gesture-handler'; +import { StyleSheet, Dimensions } from 'react-native'; function clamp(val, min, max) { 'worklet'; return Math.min(Math.max(val, min), max); } -const { width, height } = Dimensions.get("screen"); +const { width, height } = Dimensions.get('screen'); export default function App() { const translationX = useSharedValue(0); @@ -64,13 +64,13 @@ export default function App() { const styles = StyleSheet.create({ container: { flex: 1, - alignItems: "center", - justifyContent: "center", + alignItems: 'center', + justifyContent: 'center', }, box: { width: 100, height: 100, - backgroundColor: "#b58df1", + backgroundColor: '#b58df1', borderRadius: 20, }, }); diff --git a/docs/static/examples/PinchGestureBasicSrc.js b/docs/static/examples/PinchGestureBasicSrc.js index 67211480ae..19dfbbdc3e 100644 --- a/docs/static/examples/PinchGestureBasicSrc.js +++ b/docs/static/examples/PinchGestureBasicSrc.js @@ -1,14 +1,20 @@ -import React from 'react'; -import { StyleSheet } from 'react-native'; +import React from "react"; +import { Dimensions, StyleSheet } from "react-native"; import { Gesture, GestureDetector, GestureHandlerRootView, -} from 'react-native-gesture-handler'; +} from "react-native-gesture-handler"; import Animated, { useSharedValue, useAnimatedStyle, -} from 'react-native-reanimated'; +} from "react-native-reanimated"; + +const { width, height } = Dimensions.get("screen"); + +function clamp(val, min, max) { + return Math.min(Math.max(val, min), max); +} export default function App() { const scale = useSharedValue(1); @@ -19,8 +25,13 @@ export default function App() { startScale.value = scale.value; }) .onUpdate((event) => { - scale.value = startScale.value * event.scale; - }); + scale.value = clamp( + startScale.value * event.scale, + 0.5, + Math.min(width / 100, height / 100) + ); + }) + .runOnJS(true); const boxAnimatedStyles = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }], @@ -38,23 +49,23 @@ export default function App() { const styles = StyleSheet.create({ container: { flex: 1, - alignItems: 'center', - justifyContent: 'center', + alignItems: "center", + justifyContent: "center", }, box: { width: 100, height: 100, borderRadius: 20, - backgroundColor: '#b58df1', + backgroundColor: "#b58df1", }, dot: { width: 24, height: 24, borderRadius: 12, - backgroundColor: '#ccc', - position: 'absolute', - left: '50%', - top: '50%', - pointerEvents: 'none', + backgroundColor: "#ccc", + position: "absolute", + left: "50%", + top: "50%", + pointerEvents: "none", }, }); From dc639a9700db29bea566d2488beec1784e7d073f Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 13:11:12 +0200 Subject: [PATCH 11/21] fling bounces --- docs/docs/gestures/fling-gesture.md | 2 +- docs/static/examples/FlingGestureBasic.js | 43 +++++++++++-- docs/static/examples/FlingGestureBasicSrc.js | 68 ++++++++++++++++++++ 3 files changed, 106 insertions(+), 7 deletions(-) create mode 100644 docs/static/examples/FlingGestureBasicSrc.js diff --git a/docs/docs/gestures/fling-gesture.md b/docs/docs/gestures/fling-gesture.md index 825edc9fdb..d1653baf40 100644 --- a/docs/docs/gestures/fling-gesture.md +++ b/docs/docs/gestures/fling-gesture.md @@ -30,7 +30,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; -Fling Gesture +Fling Gesture ## Reference diff --git a/docs/static/examples/FlingGestureBasic.js b/docs/static/examples/FlingGestureBasic.js index 8afc5cc338..964eef2b42 100644 --- a/docs/static/examples/FlingGestureBasic.js +++ b/docs/static/examples/FlingGestureBasic.js @@ -5,16 +5,45 @@ import { GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler'; -import { StyleSheet } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import Animated, { withTiming, useSharedValue, useAnimatedStyle, } from 'react-native-reanimated'; +function clamp(val, min, max) { + return Math.min(Math.max(val, min), max); +} + export default function App() { const translateX = useSharedValue(0); const startTranslateX = useSharedValue(0); + const containerWidth = useSharedValue(0); + + const containerRef = React.useRef(null); + + const updateContainerWidth = () => { + if (!containerRef.current) return; + + containerRef.current.measure((x, y, width, height) => { + containerWidth.value = width; + + translateX.value = clamp(translateX.value, containerWidth.value / -2 + 50, containerWidth.value / 2 - 50); + }); + }; + + React.useEffect(() => { + updateContainerWidth(); + }, [containerRef.current]); + + React.useEffect(() => { + window.addEventListener('resize', updateContainerWidth); + + return () => { + window.removeEventListener('resize', updateContainerWidth); + } + }, []); const fling = Gesture.Fling() .direction(Directions.LEFT | Directions.RIGHT) @@ -23,7 +52,7 @@ export default function App() { }) .onStart((event) => { translateX.value = withTiming( - translateX.value + event.x - startTranslateX.value, + clamp(translateX.value + event.x - startTranslateX.value, containerWidth.value / -2 + 50, containerWidth.value / 2 - 50), { duration: 200 } ); }); @@ -33,10 +62,12 @@ export default function App() { })); return ( - - - - + + + + + + ); } diff --git a/docs/static/examples/FlingGestureBasicSrc.js b/docs/static/examples/FlingGestureBasicSrc.js new file mode 100644 index 0000000000..e5b6dc161b --- /dev/null +++ b/docs/static/examples/FlingGestureBasicSrc.js @@ -0,0 +1,68 @@ +import React from "react"; +import { + Directions, + Gesture, + GestureDetector, + GestureHandlerRootView, +} from "react-native-gesture-handler"; +import { Dimensions, StyleSheet } from "react-native"; +import Animated, { + withTiming, + useSharedValue, + useAnimatedStyle, +} from "react-native-reanimated"; + +const { width } = Dimensions.get("screen"); + +function clamp(val, min, max) { + return Math.min(Math.max(val, min), max); +} + +export default function App() { + const translateX = useSharedValue(0); + const startTranslateX = useSharedValue(0); + + const fling = Gesture.Fling() + .direction(Directions.LEFT | Directions.RIGHT) + .onBegin((event) => { + startTranslateX.value = event.x; + }) + .onStart((event) => { + translateX.value = withTiming( + clamp( + translateX.value + event.x - startTranslateX.value, + width / -2 + 50, + width / 2 - 50 + ), + { duration: 200 } + ); + }) + .runOnJS(true); + + const boxAnimatedStyles = useAnimatedStyle(() => ({ + transform: [{ translateX: translateX.value }], + })); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + }, + box: { + width: 100, + height: 100, + borderRadius: 20, + backgroundColor: "#b58df1", + cursor: "grab", + }, +}); From 56748f387a8b6f90543eab5976d9538ddea201ea Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 13:15:32 +0200 Subject: [PATCH 12/21] fixing rotation example --- docs/static/examples/RotationGestureBasicSrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/static/examples/RotationGestureBasicSrc.js b/docs/static/examples/RotationGestureBasicSrc.js index a12979ceef..85dbdd9c78 100644 --- a/docs/static/examples/RotationGestureBasicSrc.js +++ b/docs/static/examples/RotationGestureBasicSrc.js @@ -19,7 +19,7 @@ export default function App() { startAngle.value = angle.value; }) .onUpdate((event) => { - angle.value = startAngle.value + event.angle; + angle.value = startAngle.value + event.rotation; }); const boxAnimatedStyles = useAnimatedStyle(() => ({ From fd1bbb92025edc96e8fa06f9bc3032bb32a46f40 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 13:17:45 +0200 Subject: [PATCH 13/21] prettier --- docs/static/examples/FlingGestureBasic.js | 17 ++++++++++--- docs/static/examples/FlingGestureBasicSrc.js | 18 +++++++------- docs/static/examples/PanGestureBasic.js | 14 ++++++++--- docs/static/examples/PinchGestureBasic.js | 6 ++++- docs/static/examples/PinchGestureBasicSrc.js | 26 ++++++++++---------- docs/static/examples/RotationGestureBasic.js | 2 +- 6 files changed, 52 insertions(+), 31 deletions(-) diff --git a/docs/static/examples/FlingGestureBasic.js b/docs/static/examples/FlingGestureBasic.js index 964eef2b42..333b681aae 100644 --- a/docs/static/examples/FlingGestureBasic.js +++ b/docs/static/examples/FlingGestureBasic.js @@ -29,7 +29,11 @@ export default function App() { containerRef.current.measure((x, y, width, height) => { containerWidth.value = width; - translateX.value = clamp(translateX.value, containerWidth.value / -2 + 50, containerWidth.value / 2 - 50); + translateX.value = clamp( + translateX.value, + containerWidth.value / -2 + 50, + containerWidth.value / 2 - 50 + ); }); }; @@ -42,7 +46,7 @@ export default function App() { return () => { window.removeEventListener('resize', updateContainerWidth); - } + }; }, []); const fling = Gesture.Fling() @@ -52,7 +56,11 @@ export default function App() { }) .onStart((event) => { translateX.value = withTiming( - clamp(translateX.value + event.x - startTranslateX.value, containerWidth.value / -2 + 50, containerWidth.value / 2 - 50), + clamp( + translateX.value + event.x - startTranslateX.value, + containerWidth.value / -2 + 50, + containerWidth.value / 2 - 50 + ), { duration: 200 } ); }); @@ -65,7 +73,8 @@ export default function App() { - + diff --git a/docs/static/examples/FlingGestureBasicSrc.js b/docs/static/examples/FlingGestureBasicSrc.js index e5b6dc161b..19bda17850 100644 --- a/docs/static/examples/FlingGestureBasicSrc.js +++ b/docs/static/examples/FlingGestureBasicSrc.js @@ -1,18 +1,18 @@ -import React from "react"; +import React from 'react'; import { Directions, Gesture, GestureDetector, GestureHandlerRootView, -} from "react-native-gesture-handler"; -import { Dimensions, StyleSheet } from "react-native"; +} from 'react-native-gesture-handler'; +import { Dimensions, StyleSheet } from 'react-native'; import Animated, { withTiming, useSharedValue, useAnimatedStyle, -} from "react-native-reanimated"; +} from 'react-native-reanimated'; -const { width } = Dimensions.get("screen"); +const { width } = Dimensions.get('screen'); function clamp(val, min, max) { return Math.min(Math.max(val, min), max); @@ -55,14 +55,14 @@ export default function App() { const styles = StyleSheet.create({ container: { flex: 1, - alignItems: "center", - justifyContent: "center", + alignItems: 'center', + justifyContent: 'center', }, box: { width: 100, height: 100, borderRadius: 20, - backgroundColor: "#b58df1", - cursor: "grab", + backgroundColor: '#b58df1', + cursor: 'grab', }, }); diff --git a/docs/static/examples/PanGestureBasic.js b/docs/static/examples/PanGestureBasic.js index b0593f203f..2d2c7b74eb 100644 --- a/docs/static/examples/PanGestureBasic.js +++ b/docs/static/examples/PanGestureBasic.js @@ -40,7 +40,7 @@ export default function App() { maxTranslateX.value = width / 2 - 50; maxTranslateY.value = height / 2 - 50; }); - } + }; React.useEffect(() => { updateWidthAndHeight(); @@ -64,8 +64,16 @@ export default function App() { prevTranslationY.value = translationY.value; }) .onUpdate((event) => { - translationX.value = clamp(prevTranslationX.value + event.translationX, -maxTranslateX.value, maxTranslateX.value); - translationY.value = clamp(prevTranslationY.value + event.translationY, -maxTranslateY.value, maxTranslateY.value); + translationX.value = clamp( + prevTranslationX.value + event.translationX, + -maxTranslateX.value, + maxTranslateX.value + ); + translationY.value = clamp( + prevTranslationY.value + event.translationY, + -maxTranslateY.value, + maxTranslateY.value + ); }) .onFinalize(() => { grabbing.value = false; diff --git a/docs/static/examples/PinchGestureBasic.js b/docs/static/examples/PinchGestureBasic.js index 365b169119..1398d3248c 100644 --- a/docs/static/examples/PinchGestureBasic.js +++ b/docs/static/examples/PinchGestureBasic.js @@ -47,7 +47,11 @@ export default function App() { }); } - boxWidth.value = clamp(boxWidth.value, 100, Math.min(width.value, height.value)); + boxWidth.value = clamp( + boxWidth.value, + 100, + Math.min(width.value, height.value) + ); } React.useEffect(() => { diff --git a/docs/static/examples/PinchGestureBasicSrc.js b/docs/static/examples/PinchGestureBasicSrc.js index 19dfbbdc3e..34a94a8a2a 100644 --- a/docs/static/examples/PinchGestureBasicSrc.js +++ b/docs/static/examples/PinchGestureBasicSrc.js @@ -1,16 +1,16 @@ -import React from "react"; -import { Dimensions, StyleSheet } from "react-native"; +import React from 'react'; +import { Dimensions, StyleSheet } from 'react-native'; import { Gesture, GestureDetector, GestureHandlerRootView, -} from "react-native-gesture-handler"; +} from 'react-native-gesture-handler'; import Animated, { useSharedValue, useAnimatedStyle, -} from "react-native-reanimated"; +} from 'react-native-reanimated'; -const { width, height } = Dimensions.get("screen"); +const { width, height } = Dimensions.get('screen'); function clamp(val, min, max) { return Math.min(Math.max(val, min), max); @@ -49,23 +49,23 @@ export default function App() { const styles = StyleSheet.create({ container: { flex: 1, - alignItems: "center", - justifyContent: "center", + alignItems: 'center', + justifyContent: 'center', }, box: { width: 100, height: 100, borderRadius: 20, - backgroundColor: "#b58df1", + backgroundColor: '#b58df1', }, dot: { width: 24, height: 24, borderRadius: 12, - backgroundColor: "#ccc", - position: "absolute", - left: "50%", - top: "50%", - pointerEvents: "none", + backgroundColor: '#ccc', + position: 'absolute', + left: '50%', + top: '50%', + pointerEvents: 'none', }, }); diff --git a/docs/static/examples/RotationGestureBasic.js b/docs/static/examples/RotationGestureBasic.js index 878fd3fc0b..8f0bc9370b 100644 --- a/docs/static/examples/RotationGestureBasic.js +++ b/docs/static/examples/RotationGestureBasic.js @@ -59,7 +59,7 @@ export default function App() { ); touchOpacity.value = withTiming(0.4, { duration: 200 }); grabbing.value = true; - + pointerPositionX.value = event.absoluteX - centerX.value - 12; pointerPositionY.value = event.absoluteY - centerY.value - 12; negativePointerPositionX.value = centerX.value - event.absoluteX - 12; From c52352984c4231b1e38724f51cb0f48cd162e7f7 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Wed, 24 Apr 2024 14:22:37 +0200 Subject: [PATCH 14/21] changing colors --- docs/static/examples/LongPressGestureBasic.js | 2 +- docs/static/examples/TapGestureBasic.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/static/examples/LongPressGestureBasic.js b/docs/static/examples/LongPressGestureBasic.js index 297bea2050..3f924f4db4 100644 --- a/docs/static/examples/LongPressGestureBasic.js +++ b/docs/static/examples/LongPressGestureBasic.js @@ -12,7 +12,7 @@ import Animated, { withTiming, } from 'react-native-reanimated'; -const COLORS = ['#33488e', '#ffe04b', '#5bb9e0', '#fa7f7c', '#82cab2']; +const COLORS = ['#fa7f7c', '#b58df1', '#ffe780', '#82cab2']; export default function App() { const colorIndex = useSharedValue(0); diff --git a/docs/static/examples/TapGestureBasic.js b/docs/static/examples/TapGestureBasic.js index d35ec28f15..b339ecfb74 100644 --- a/docs/static/examples/TapGestureBasic.js +++ b/docs/static/examples/TapGestureBasic.js @@ -7,7 +7,7 @@ import { } from 'react-native-gesture-handler'; import { StyleSheet } from 'react-native'; -const COLORS = ['#33488e', '#ffe04b', '#5bb9e0', '#fa7f7c', '#82cab2']; +const COLORS = ['#fa7f7c', '#b58df1', '#ffe780', '#82cab2']; export default function App() { const [color, setColor] = React.useState(COLORS[0]); From d2b0e768ec17982b1299093a38c79227bc412428 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Thu, 25 Apr 2024 13:37:08 +0200 Subject: [PATCH 15/21] responsiveness for elements in docs --- docs/docs/gestures/fling-gesture.md | 38 ++++++++---- docs/docs/gestures/hover-gesture.md | 34 +++++++---- docs/docs/gestures/long-press-gesture.md | 34 +++++++---- docs/docs/gestures/pan-gesture.md | 34 +++++++---- docs/docs/gestures/pinch-gesture.md | 34 +++++++---- docs/docs/gestures/rotation-gesture.md | 34 +++++++---- docs/docs/gestures/tap-gesture.md | 34 +++++++---- .../components/InteractiveExample/index.tsx | 61 ++++++++++--------- .../InteractiveExample/styles.module.css | 18 +++++- .../components/ResponsiveWrapper/index.tsx | 23 +++++++ .../ResponsiveWrapper/style.module.css | 17 ++++++ docs/static/examples/LongPressGestureBasic.js | 2 +- docs/static/examples/PinchGestureBasic.js | 12 ++-- docs/static/examples/TapGestureBasic.js | 2 +- 14 files changed, 257 insertions(+), 120 deletions(-) create mode 100644 docs/src/components/ResponsiveWrapper/index.tsx create mode 100644 docs/src/components/ResponsiveWrapper/style.module.css diff --git a/docs/docs/gestures/fling-gesture.md b/docs/docs/gestures/fling-gesture.md index d1653baf40..65f0be4eb1 100644 --- a/docs/docs/gestures/fling-gesture.md +++ b/docs/docs/gestures/fling-gesture.md @@ -5,13 +5,25 @@ sidebar_label: Fling gesture sidebar_position: 8 --- -import FlingGestureBasic from '@site/static/examples/FlingGestureBasic'; -import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic'; +import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; -} -src={FlingGestureBasic} -/> +import FlingGestureBasic from '@site/static/examples/FlingGestureBasic'; +import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc'; + + +
+ +
+ } + src={FlingGestureBasicSrc} + disableMarginBottom={true} + /> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -22,13 +34,13 @@ Gesture gets [ACTIVE](/docs/fundamentals/states-events#active) when movement is When gesture gets activated it will turn into [END](/docs/fundamentals/states-events#end) state when finger is released. The gesture will fail to recognize if the finger is lifted before being activated. -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
+ +
+ +
+ Fling Gesture diff --git a/docs/docs/gestures/hover-gesture.md b/docs/docs/gestures/hover-gesture.md index 9796fa85e2..835686b010 100644 --- a/docs/docs/gestures/hover-gesture.md +++ b/docs/docs/gestures/hover-gesture.md @@ -5,13 +5,25 @@ sidebar_label: Hover gesture sidebar_position: 9 --- +import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; + import HoverGestureBasic from '@site/static/examples/HoverGestureBasic'; import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic'; -} -src={HoverGestureBasicSrc} -/> + +
+ +
+ } + src={HoverGestureBasicSrc} + disableMarginBottom={true} + /> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -22,13 +34,13 @@ A continuous gesture that can recognize hovering above the view it's attached to On iOS additional visual effects may be configured. -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
+ +
+ +
+ Hover Gesture diff --git a/docs/docs/gestures/long-press-gesture.md b/docs/docs/gestures/long-press-gesture.md index 695dc841e9..a1d82089fe 100644 --- a/docs/docs/gestures/long-press-gesture.md +++ b/docs/docs/gestures/long-press-gesture.md @@ -5,14 +5,26 @@ sidebar_label: Long press gesture sidebar_position: 5 --- -} -src={LongPressGestureBasicSrc} -/> +import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic'; import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic'; + +
+ +
+ } + src={LongPressGestureBasicSrc} + disableMarginBottom={true} + /> + + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; import BaseEventCallbacks from './\_shared/base-gesture-callbacks.md'; @@ -21,13 +33,13 @@ A discrete gesture that activates when the corresponding view is pressed for a s This gesture's state will turn into [END](/docs/fundamentals/states-events#end) immediately after the finger is released. The gesture will fail to recognize a touch event if the finger is lifted before the [minimum required time](/docs/gestures/long-press-gesture#mindurationvalue-number) or if the finger is moved further than the [allowable distance](/docs/gestures/long-press-gesture#maxdistancevalue-number). -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
+ +
+ +
+ Long Press Gesture diff --git a/docs/docs/gestures/pan-gesture.md b/docs/docs/gestures/pan-gesture.md index c776f4b43a..b30d6b9f7c 100644 --- a/docs/docs/gestures/pan-gesture.md +++ b/docs/docs/gestures/pan-gesture.md @@ -5,13 +5,25 @@ sidebar_label: Pan gesture sidebar_position: 3 --- +import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; + import PanGestureBasic from '@site/static/examples/PanGestureBasic'; import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic'; -} -src={PanGestureBasicSrc} -/> + +
+ +
+ } + src={PanGestureBasicSrc} + disableMarginBottom={true} + /> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -27,13 +39,13 @@ Configurations such as a minimum initial distance, specific vertical or horizont Gesture callback can be used for continuous tracking of the pan gesture. It provides information about the gesture such as its XY translation from the starting point as well as its instantaneous velocity. -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
+ +
+ +
+ Pan Gesture diff --git a/docs/docs/gestures/pinch-gesture.md b/docs/docs/gestures/pinch-gesture.md index f89a2c0e3f..186a34d27e 100644 --- a/docs/docs/gestures/pinch-gesture.md +++ b/docs/docs/gestures/pinch-gesture.md @@ -5,13 +5,25 @@ sidebar_label: Pinch gesture sidebar_position: 7 --- +import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; + import PinchGestureBasic from '@site/static/examples/PinchGestureBasic'; import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc'; -} -src={PinchGestureBasicSrc} -/> + +
+ +
+ } + src={PinchGestureBasicSrc} + disableMarginBottom={true} + /> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -28,13 +40,13 @@ Similarly, the scale factor decreases as the distance between the fingers decrea Pinch gestures are used most commonly to change the size of objects or content onscreen. For example, map views use pinch gestures to change the zoom level of the map. -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
+ +
+ +
+ Pinch Gesture diff --git a/docs/docs/gestures/rotation-gesture.md b/docs/docs/gestures/rotation-gesture.md index c3e5bafe3f..e807022a5d 100644 --- a/docs/docs/gestures/rotation-gesture.md +++ b/docs/docs/gestures/rotation-gesture.md @@ -5,13 +5,25 @@ sidebar_label: Rotation gesture sidebar_position: 6 --- +import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; + import RotationGestureBasic from '@site/static/examples/RotationGestureBasic'; import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc'; -} -src={RotationGestureBasicSrc} -/> + +
+ +
+ } + src={RotationGestureBasicSrc} + disableMarginBottom={true} + /> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -25,13 +37,13 @@ The gesture [activates](/docs/fundamentals/states-events#active) when fingers ar Gesture callback can be used for continuous tracking of the rotation gesture. It provides information about the gesture such as the amount rotated, the focal point of the rotation (anchor), and its instantaneous velocity. -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
+ +
+ +
+ Rotation Gesture diff --git a/docs/docs/gestures/tap-gesture.md b/docs/docs/gestures/tap-gesture.md index 81b183df2d..33b6eb50bf 100644 --- a/docs/docs/gestures/tap-gesture.md +++ b/docs/docs/gestures/tap-gesture.md @@ -5,13 +5,25 @@ sidebar_label: Tap gesture sidebar_position: 4 --- +import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; + import TapGestureBasic from '@site/static/examples/TapGestureBasic'; import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBasic'; -} -src={TapGestureBasicSrc} -/> + +
+ +
+ } + src={TapGestureBasicSrc} + disableMarginBottom={true} + /> + import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -26,13 +38,13 @@ For example, you might configure tap gesture recognizers to detect single taps, In order for a gesture to [activate](/docs/fundamentals/states-events#active), specified gesture requirements such as minPointers, numberOfTaps, maxDist, maxDuration, and maxDelayMs (explained below) must be met. Immediately after the gesture [activates](/docs/fundamentals/states-events#active), it will [end](/docs/fundamentals/states-events#end). -import useBaseUrl from '@docusaurus/useBaseUrl'; - -
- -
+ +
+ +
+ Tap Gesture diff --git a/docs/src/components/InteractiveExample/index.tsx b/docs/src/components/InteractiveExample/index.tsx index 8a89da64ed..19468ce3f9 100644 --- a/docs/src/components/InteractiveExample/index.tsx +++ b/docs/src/components/InteractiveExample/index.tsx @@ -21,6 +21,7 @@ interface Props { label?: string; showCode?: boolean; // whether to show code by default larger?: boolean; // should the view be enlarged? + disableMarginBottom?: boolean; } export default function InteractiveExample({ @@ -29,6 +30,7 @@ export default function InteractiveExample({ label, showCode = false, larger = false, + disableMarginBottom }: Props) { const [_, copy] = useCopyToClipboard(); const [key, setKey] = React.useState(0); @@ -47,7 +49,8 @@ export default function InteractiveExample({ className={clsx( styles.container, larger && styles.largerContainer, - !showPreview ? styles.code : '' + !showPreview ? styles.code : '', + !disableMarginBottom ? styles.marginBottom : '' )} data-ispreview={showPreview}> {showPreview && prefersReducedMotion && } @@ -88,37 +91,35 @@ export default function InteractiveExample({ /> )} -
- {showPreview ? ( - <> - {component} + {showPreview ? ( + <> + {component} -
-
- {label &&
{label}
} - } - iconDark={} - animation={Animation.FADE_IN_OUT} - onClick={(actionPerformed, setActionPerformed) => { - if (!actionPerformed) { - resetExample(); - setActionPerformed(true); - } - }} - /> -
- - ) : ( -
- {src} +
+
+ {label &&
{label}
} + } + iconDark={} + animation={Animation.FADE_IN_OUT} + onClick={(actionPerformed, setActionPerformed) => { + if (!actionPerformed) { + resetExample(); + setActionPerformed(true); + } + }} + />
- )} -
+ + ) : ( +
+ {src} +
+ )}
)} diff --git a/docs/src/components/InteractiveExample/styles.module.css b/docs/src/components/InteractiveExample/styles.module.css index db85c38b84..245e1171ee 100644 --- a/docs/src/components/InteractiveExample/styles.module.css +++ b/docs/src/components/InteractiveExample/styles.module.css @@ -6,6 +6,12 @@ background-color: var(--swm-off-background); border: 1px solid var(--swm-border); + + width: 100%; + align-self: stretch; +} + +.marginBottom { margin-bottom: var(--ifm-leading); } @@ -15,7 +21,7 @@ /* Preferred height in code section of container. */ .container[data-ispreview='false'] { - height: 400px; + height: 360px; } /* Classes used to omit default docusaurus styling. */ @@ -23,8 +29,13 @@ box-shadow: none; } +.interactiveCodeBlock { + overflow-y: auto; +} + .interactiveCodeBlock [class*='codeBlockContent'] pre { border: none; + padding: 16px 20px; } .interactiveCodeBlock [class*='codeBlockContent'] code { @@ -32,6 +43,7 @@ width: 100%; padding: 0; border: none; + text-wrap: wrap; } /* Hide default action buttons, displayed by Docusaurus */ @@ -93,9 +105,9 @@ } } -.previewContainer { +/* .previewContainer { flex: 1 1 auto; -} +} */ /* Style preview only when user is in the 'code' section. */ .container[data-ispreview='false'] .previewContainer { diff --git a/docs/src/components/ResponsiveWrapper/index.tsx b/docs/src/components/ResponsiveWrapper/index.tsx new file mode 100644 index 0000000000..541f7424c0 --- /dev/null +++ b/docs/src/components/ResponsiveWrapper/index.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import styles from './style.module.css'; + +export const [appearOnMobile, vanishOnMobile] = [ + styles.appearOnMobile, + styles.vanishOnMobile, +]; + +function ResponsiveWrapperComponent({ children, ...props }) { + return ( +
+ {children} +
+ ); +} + +function ResponsiveWrapper(props) { + return ( + + ); +} + +export default ResponsiveWrapper; \ No newline at end of file diff --git a/docs/src/components/ResponsiveWrapper/style.module.css b/docs/src/components/ResponsiveWrapper/style.module.css new file mode 100644 index 0000000000..7e29a4f2ac --- /dev/null +++ b/docs/src/components/ResponsiveWrapper/style.module.css @@ -0,0 +1,17 @@ +.vanishOnMobile { + display: flex !important; +} + +.appearOnMobile { + display: none !important; +} + +@media (max-width: 1440px) { + .vanishOnMobile { + display: none !important; + } + + .appearOnMobile { + display: flex !important; + } +} \ No newline at end of file diff --git a/docs/static/examples/LongPressGestureBasic.js b/docs/static/examples/LongPressGestureBasic.js index 3f924f4db4..6df3275205 100644 --- a/docs/static/examples/LongPressGestureBasic.js +++ b/docs/static/examples/LongPressGestureBasic.js @@ -12,7 +12,7 @@ import Animated, { withTiming, } from 'react-native-reanimated'; -const COLORS = ['#fa7f7c', '#b58df1', '#ffe780', '#82cab2']; +const COLORS = ['#b58df1', '#fa7f7c', '#ffe780', '#82cab2']; export default function App() { const colorIndex = useSharedValue(0); diff --git a/docs/static/examples/PinchGestureBasic.js b/docs/static/examples/PinchGestureBasic.js index 1398d3248c..8b87072dff 100644 --- a/docs/static/examples/PinchGestureBasic.js +++ b/docs/static/examples/PinchGestureBasic.js @@ -44,14 +44,14 @@ export default function App() { containerRef.current.measureInWindow((x, y, w, h) => { width.value = w; height.value = h; + + boxWidth.value = clamp( + boxWidth.value, + 100, + Math.min(w, h) + ); }); } - - boxWidth.value = clamp( - boxWidth.value, - 100, - Math.min(width.value, height.value) - ); } React.useEffect(() => { diff --git a/docs/static/examples/TapGestureBasic.js b/docs/static/examples/TapGestureBasic.js index b339ecfb74..2be598df7b 100644 --- a/docs/static/examples/TapGestureBasic.js +++ b/docs/static/examples/TapGestureBasic.js @@ -7,7 +7,7 @@ import { } from 'react-native-gesture-handler'; import { StyleSheet } from 'react-native'; -const COLORS = ['#fa7f7c', '#b58df1', '#ffe780', '#82cab2']; +const COLORS = ['#b58df1', '#fa7f7c', '#ffe780', '#82cab2']; export default function App() { const [color, setColor] = React.useState(COLORS[0]); From 1fb965210a3b7c1800b483906f4cf6472ae8831a Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Thu, 25 Apr 2024 13:42:40 +0200 Subject: [PATCH 16/21] fixing pan src --- docs/docs/gestures/pan-gesture.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/gestures/pan-gesture.md b/docs/docs/gestures/pan-gesture.md index b30d6b9f7c..46f9650582 100644 --- a/docs/docs/gestures/pan-gesture.md +++ b/docs/docs/gestures/pan-gesture.md @@ -10,7 +10,7 @@ import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/com import useBaseUrl from '@docusaurus/useBaseUrl'; import PanGestureBasic from '@site/static/examples/PanGestureBasic'; -import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic'; +import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasicSrc';
From 533981b4aadf05aa9ea5c30f82fa33a7879d034c Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Thu, 25 Apr 2024 13:44:55 +0200 Subject: [PATCH 17/21] changing worklet with runOnJS --- docs/static/examples/PanGestureBasicSrc.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/static/examples/PanGestureBasicSrc.js b/docs/static/examples/PanGestureBasicSrc.js index 2a7ae8c4ee..9331b2eabe 100644 --- a/docs/static/examples/PanGestureBasicSrc.js +++ b/docs/static/examples/PanGestureBasicSrc.js @@ -11,7 +11,6 @@ import { import { StyleSheet, Dimensions } from 'react-native'; function clamp(val, min, max) { - 'worklet'; return Math.min(Math.max(val, min), max); } @@ -50,7 +49,8 @@ export default function App() { -maxTranslateY, maxTranslateY ); - }); + }) + .runOnJS(true); return ( From 67c36df1fe59915588e9e4c183d065d67ae15396 Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Thu, 25 Apr 2024 15:16:58 +0200 Subject: [PATCH 18/21] adding interpolateColor to TapGesture --- docs/static/examples/TapGestureBasic.js | 29 ++++++++++++++++++++----- 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/docs/static/examples/TapGestureBasic.js b/docs/static/examples/TapGestureBasic.js index 2be598df7b..f3de4da413 100644 --- a/docs/static/examples/TapGestureBasic.js +++ b/docs/static/examples/TapGestureBasic.js @@ -1,26 +1,43 @@ import React from 'react'; -import { View } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler'; -import { StyleSheet } from 'react-native'; +import Animated, { + interpolateColor, + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; const COLORS = ['#b58df1', '#fa7f7c', '#ffe780', '#82cab2']; export default function App() { - const [color, setColor] = React.useState(COLORS[0]); + const colorIndex = useSharedValue(1); const tap = Gesture.Tap().onEnd(() => { - const nextColorIndex = (COLORS.indexOf(color) + 1) % COLORS.length; - setColor(COLORS[nextColorIndex]); + if (colorIndex.value > COLORS.length) { + colorIndex.value = colorIndex.value % 1 === 0 ? 1 : colorIndex.value % 1; + } + + const nextIndex = Math.ceil(colorIndex.value + 1); + colorIndex.value = withTiming(nextIndex, { duration: 1000 }); }); + const animatedStyle = useAnimatedStyle(() => ({ + backgroundColor: interpolateColor( + colorIndex.value, + [0, ...COLORS.map((_, i) => i + 1), COLORS.length + 1], + [COLORS[COLORS.length - 1], ...COLORS, COLORS[0]] + ), + })); + return ( - + ); From dd5d467dff5791970f0cd7785b0a6c78e52cd5bc Mon Sep 17 00:00:00 2001 From: Marek Kotarba Date: Thu, 25 Apr 2024 15:34:57 +0200 Subject: [PATCH 19/21] adding hover gesture color interpolation --- docs/static/examples/HoverGestureBasic.js | 23 ++++++++++++++++++++--- docs/static/examples/TapGestureBasic.js | 2 +- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/docs/static/examples/HoverGestureBasic.js b/docs/static/examples/HoverGestureBasic.js index 05aaa0cd35..3f7b110161 100644 --- a/docs/static/examples/HoverGestureBasic.js +++ b/docs/static/examples/HoverGestureBasic.js @@ -7,15 +7,20 @@ import { import { StyleSheet } from 'react-native'; import Animated, { Easing, + interpolateColor, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated'; +const EASING = Easing.bezier(1, -1, 0.3, 1.43); + export default function App() { const translateX = useSharedValue(0); const translateY = useSharedValue(0); + const progress = useSharedValue(0); + const startX = useSharedValue(0); const startY = useSharedValue(0); @@ -27,15 +32,23 @@ export default function App() { .onUpdate((event) => { translateX.value = (event.x - startX.value) * 0.3; translateY.value = (event.y - startY.value) * 0.3; + + const distance = Math.sqrt(Math.pow(translateX.value, 2) + Math.pow(translateY.value, 2)); + + progress.value = distance / 35; }) .onEnd(() => { translateX.value = withTiming(0, { duration: 400, - easing: Easing.bezier(1, -1, 0.3, 1.43), + easing: EASING, }); translateY.value = withTiming(0, { duration: 400, - easing: Easing.bezier(1, -1, 0.3, 1.43), + easing: EASING, + }); + progress.value = withTiming(0, { + duration: 400, + easing: EASING, }); }); @@ -44,6 +57,11 @@ export default function App() { { translateX: translateX.value }, { translateY: translateY.value }, ], + backgroundColor: interpolateColor( + progress.value, + [0, 1], + ['#b58df1', '#fa7f7c'] + ) })); return ( @@ -65,7 +83,6 @@ const styles = StyleSheet.create({ width: 100, height: 100, borderRadius: 20, - backgroundColor: '#b58df1', cursor: 'pointer', }, }); diff --git a/docs/static/examples/TapGestureBasic.js b/docs/static/examples/TapGestureBasic.js index f3de4da413..5553a50fec 100644 --- a/docs/static/examples/TapGestureBasic.js +++ b/docs/static/examples/TapGestureBasic.js @@ -1,5 +1,5 @@ import React from 'react'; -import { StyleSheet, View } from 'react-native'; +import { StyleSheet } from 'react-native'; import { Gesture, GestureDetector, From eba35b2a5e52c3c16b9d8c4f014db86a5a5c6e12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= Date: Tue, 7 May 2024 09:33:17 +0200 Subject: [PATCH 20/21] Change of duration --- docs/static/examples/TapGestureBasic.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/static/examples/TapGestureBasic.js b/docs/static/examples/TapGestureBasic.js index 5553a50fec..96f6657af5 100644 --- a/docs/static/examples/TapGestureBasic.js +++ b/docs/static/examples/TapGestureBasic.js @@ -23,7 +23,7 @@ export default function App() { } const nextIndex = Math.ceil(colorIndex.value + 1); - colorIndex.value = withTiming(nextIndex, { duration: 1000 }); + colorIndex.value = withTiming(nextIndex, { duration: 250 }); }); const animatedStyle = useAnimatedStyle(() => ({ From 97554d718da5e6adda2fa274b313c8ec7086ca34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= Date: Tue, 7 May 2024 11:46:39 +0200 Subject: [PATCH 21/21] Remove unnecessary component and move reusable styles to utils for better management --- docs/docs/gestures/fling-gesture.md | 8 +++--- docs/docs/gestures/hover-gesture.md | 9 +++---- docs/docs/gestures/long-press-gesture.md | 12 ++++----- docs/docs/gestures/pan-gesture.md | 8 +++--- docs/docs/gestures/pinch-gesture.md | 8 +++--- docs/docs/gestures/rotation-gesture.md | 8 +++--- docs/docs/gestures/tap-gesture.md | 8 +++--- .../components/ResponsiveWrapper/index.tsx | 23 ---------------- .../ResponsiveWrapper/style.module.css | 17 ------------ docs/src/utils/getGestureStyles.tsx | 7 +++++ docs/src/utils/style.module.css | 26 +++++++++++++++++++ 11 files changed, 57 insertions(+), 77 deletions(-) delete mode 100644 docs/src/components/ResponsiveWrapper/index.tsx delete mode 100644 docs/src/components/ResponsiveWrapper/style.module.css create mode 100644 docs/src/utils/getGestureStyles.tsx create mode 100644 docs/src/utils/style.module.css diff --git a/docs/docs/gestures/fling-gesture.md b/docs/docs/gestures/fling-gesture.md index 65f0be4eb1..86733b8732 100644 --- a/docs/docs/gestures/fling-gesture.md +++ b/docs/docs/gestures/fling-gesture.md @@ -5,14 +5,14 @@ sidebar_label: Fling gesture sidebar_position: 8 --- -import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; +import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles'; import useBaseUrl from '@docusaurus/useBaseUrl'; import FlingGestureBasic from '@site/static/examples/FlingGestureBasic'; import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc'; - +
import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -34,13 +34,11 @@ Gesture gets [ACTIVE](/docs/fundamentals/states-events#active) when movement is When gesture gets activated it will turn into [END](/docs/fundamentals/states-events#end) state when finger is released. The gesture will fail to recognize if the finger is lifted before being activated. -
- Fling Gesture diff --git a/docs/docs/gestures/hover-gesture.md b/docs/docs/gestures/hover-gesture.md index 835686b010..3135cbf2b5 100644 --- a/docs/docs/gestures/hover-gesture.md +++ b/docs/docs/gestures/hover-gesture.md @@ -5,14 +5,15 @@ sidebar_label: Hover gesture sidebar_position: 9 --- -import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; +import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles'; import useBaseUrl from '@docusaurus/useBaseUrl'; import HoverGestureBasic from '@site/static/examples/HoverGestureBasic'; import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic'; - +
+
import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -34,13 +35,11 @@ A continuous gesture that can recognize hovering above the view it's attached to On iOS additional visual effects may be configured. -
- Hover Gesture diff --git a/docs/docs/gestures/long-press-gesture.md b/docs/docs/gestures/long-press-gesture.md index a1d82089fe..eb3e4f5c0f 100644 --- a/docs/docs/gestures/long-press-gesture.md +++ b/docs/docs/gestures/long-press-gesture.md @@ -5,14 +5,14 @@ sidebar_label: Long press gesture sidebar_position: 5 --- -import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; +import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles'; import useBaseUrl from '@docusaurus/useBaseUrl'; import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic'; import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic'; - +
import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -33,13 +33,11 @@ A discrete gesture that activates when the corresponding view is pressed for a s This gesture's state will turn into [END](/docs/fundamentals/states-events#end) immediately after the finger is released. The gesture will fail to recognize a touch event if the finger is lifted before the [minimum required time](/docs/gestures/long-press-gesture#mindurationvalue-number) or if the finger is moved further than the [allowable distance](/docs/gestures/long-press-gesture#maxdistancevalue-number). - -
+
-
- +
Long Press Gesture diff --git a/docs/docs/gestures/pan-gesture.md b/docs/docs/gestures/pan-gesture.md index 46f9650582..4123e1b591 100644 --- a/docs/docs/gestures/pan-gesture.md +++ b/docs/docs/gestures/pan-gesture.md @@ -5,14 +5,14 @@ sidebar_label: Pan gesture sidebar_position: 3 --- -import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; +import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles'; import useBaseUrl from '@docusaurus/useBaseUrl'; import PanGestureBasic from '@site/static/examples/PanGestureBasic'; import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasicSrc'; - +
import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -39,13 +39,11 @@ Configurations such as a minimum initial distance, specific vertical or horizont Gesture callback can be used for continuous tracking of the pan gesture. It provides information about the gesture such as its XY translation from the starting point as well as its instantaneous velocity. -
- Pan Gesture diff --git a/docs/docs/gestures/pinch-gesture.md b/docs/docs/gestures/pinch-gesture.md index 186a34d27e..bfeda8d81a 100644 --- a/docs/docs/gestures/pinch-gesture.md +++ b/docs/docs/gestures/pinch-gesture.md @@ -5,14 +5,14 @@ sidebar_label: Pinch gesture sidebar_position: 7 --- -import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; +import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles'; import useBaseUrl from '@docusaurus/useBaseUrl'; import PinchGestureBasic from '@site/static/examples/PinchGestureBasic'; import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc'; - +
import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -40,13 +40,11 @@ Similarly, the scale factor decreases as the distance between the fingers decrea Pinch gestures are used most commonly to change the size of objects or content onscreen. For example, map views use pinch gestures to change the zoom level of the map. -
- Pinch Gesture diff --git a/docs/docs/gestures/rotation-gesture.md b/docs/docs/gestures/rotation-gesture.md index e807022a5d..bedab4064c 100644 --- a/docs/docs/gestures/rotation-gesture.md +++ b/docs/docs/gestures/rotation-gesture.md @@ -5,14 +5,14 @@ sidebar_label: Rotation gesture sidebar_position: 6 --- -import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; +import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles'; import useBaseUrl from '@docusaurus/useBaseUrl'; import RotationGestureBasic from '@site/static/examples/RotationGestureBasic'; import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc'; - +
import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -37,13 +37,11 @@ The gesture [activates](/docs/fundamentals/states-events#active) when fingers ar Gesture callback can be used for continuous tracking of the rotation gesture. It provides information about the gesture such as the amount rotated, the focal point of the rotation (anchor), and its instantaneous velocity. -
- Rotation Gesture diff --git a/docs/docs/gestures/tap-gesture.md b/docs/docs/gestures/tap-gesture.md index 33b6eb50bf..b718f4f1e7 100644 --- a/docs/docs/gestures/tap-gesture.md +++ b/docs/docs/gestures/tap-gesture.md @@ -5,14 +5,14 @@ sidebar_label: Tap gesture sidebar_position: 4 --- -import ResponsiveWrapper, { vanishOnMobile, appearOnMobile } from '@site/src/components/ResponsiveWrapper'; +import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles'; import useBaseUrl from '@docusaurus/useBaseUrl'; import TapGestureBasic from '@site/static/examples/TapGestureBasic'; import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBasic'; - +
import BaseEventData from './\_shared/base-gesture-event-data.md'; import BaseEventConfig from './\_shared/base-gesture-config.md'; @@ -38,13 +38,11 @@ For example, you might configure tap gesture recognizers to detect single taps, In order for a gesture to [activate](/docs/fundamentals/states-events#active), specified gesture requirements such as minPointers, numberOfTaps, maxDist, maxDuration, and maxDelayMs (explained below) must be met. Immediately after the gesture [activates](/docs/fundamentals/states-events#active), it will [end](/docs/fundamentals/states-events#end). -
- Tap Gesture diff --git a/docs/src/components/ResponsiveWrapper/index.tsx b/docs/src/components/ResponsiveWrapper/index.tsx deleted file mode 100644 index 541f7424c0..0000000000 --- a/docs/src/components/ResponsiveWrapper/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import styles from './style.module.css'; - -export const [appearOnMobile, vanishOnMobile] = [ - styles.appearOnMobile, - styles.vanishOnMobile, -]; - -function ResponsiveWrapperComponent({ children, ...props }) { - return ( -
- {children} -
- ); -} - -function ResponsiveWrapper(props) { - return ( - - ); -} - -export default ResponsiveWrapper; \ No newline at end of file diff --git a/docs/src/components/ResponsiveWrapper/style.module.css b/docs/src/components/ResponsiveWrapper/style.module.css deleted file mode 100644 index 7e29a4f2ac..0000000000 --- a/docs/src/components/ResponsiveWrapper/style.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.vanishOnMobile { - display: flex !important; -} - -.appearOnMobile { - display: none !important; -} - -@media (max-width: 1440px) { - .vanishOnMobile { - display: none !important; - } - - .appearOnMobile { - display: flex !important; - } -} \ No newline at end of file diff --git a/docs/src/utils/getGestureStyles.tsx b/docs/src/utils/getGestureStyles.tsx new file mode 100644 index 0000000000..567d35a7f6 --- /dev/null +++ b/docs/src/utils/getGestureStyles.tsx @@ -0,0 +1,7 @@ +import styles from './style.module.css'; + +export const [appearOnMobile, vanishOnMobile, webContainer] = [ + styles.appearOnMobile, + styles.vanishOnMobile, + styles.container, +]; diff --git a/docs/src/utils/style.module.css b/docs/src/utils/style.module.css new file mode 100644 index 0000000000..6dbd29d9e0 --- /dev/null +++ b/docs/src/utils/style.module.css @@ -0,0 +1,26 @@ +.vanishOnMobile { + display: flex !important; +} + +.appearOnMobile { + display: none !important; +} + +@media (max-width: 1440px) { + .vanishOnMobile { + display: none !important; + } + + .appearOnMobile { + display: flex !important; + } +} + +.container { + display: flex; + gap: 1rem; + justify-content: stretch; + width: 100%; + align-items: stretch; + margin-bottom: 1rem; +}