From c4d44dc607e1eafd47221de1cc5c0334444f4599 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 23 Dec 2025 18:19:24 +0100 Subject: [PATCH 1/6] Update quickstart --- .../docs/guides/quickstart/_steps/step1.md | 19 ++-- .../docs/guides/quickstart/_steps/step2.md | 21 +++- .../docs/guides/quickstart/_steps/step3.md | 4 +- .../docs/guides/quickstart/_steps/step4.md | 4 +- .../docs/guides/quickstart/_steps/step5.md | 32 ++---- .../docs/guides/quickstart/_steps/step6.md | 11 ++ .../docs/guides/quickstart/index.md | 104 +++++++++++++++--- 7 files changed, 142 insertions(+), 53 deletions(-) create mode 100644 packages/docs-gesture-handler/docs/guides/quickstart/_steps/step6.md diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md index 6e5c8de76b..9010bed131 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md @@ -1,13 +1,12 @@ ```jsx -import { StyleSheet } from 'react-native'; +import { GestureHandlerRootView } from 'react-native-gesture-handler'; +import Animated from 'react-native-reanimated'; -const styles = StyleSheet.create({ - ball: { - width: 100, - height: 100, - borderRadius: 100, - backgroundColor: 'blue', - alignSelf: 'center', - }, -}); +export default function Ball() { + return ( + + + + ); +} ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md index 7292504d92..18996cbca9 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md @@ -1,12 +1,23 @@ ```jsx -import { GestureDetector } from 'react-native-gesture-handler'; +import { StyleSheet } from 'react-native'; +import { GestureHandlerRootView } from 'react-native-gesture-handler'; import Animated from 'react-native-reanimated'; -function Ball() { +export default function Ball() { return ( - - - + + + ); } + +const styles = StyleSheet.create({ + ball: { + width: 100, + height: 100, + borderRadius: 100, + backgroundColor: 'blue', + alignSelf: 'center', + }, +}); ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md index ac49f59bd9..08f4e2f9db 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md @@ -1,11 +1,11 @@ ```jsx import { - useSharedValue, useAnimatedStyle, + useSharedValue, withSpring, } from 'react-native-reanimated'; -function Ball() { +export default function Ball() { const isPressed = useSharedValue(false); const offset = useSharedValue({ x: 0, y: 0 }); diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md index 7750e97e3b..f75641e27f 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md @@ -1,9 +1,9 @@ ```jsx {4} // ... return ( - + - + ); // ... ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md index a2ab8eb776..b585db2a02 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md @@ -1,38 +1,30 @@ ```jsx -import { Gesture } from 'react-native-gesture-handler'; +import { usePanGesture } from 'react-native-gesture-handler'; function Ball() { // ... const start = useSharedValue({ x: 0, y: 0 }); - const gesture = Gesture.Pan() - .onBegin(() => { + + const gesture = usePanGesture({ + onBegin: () => { isPressed.value = true; - }) - .onUpdate((e) => { + }, + onUpdate: (e) => { offset.value = { x: e.translationX + start.value.x, y: e.translationY + start.value.y, }; - }) - .onEnd(() => { + }, + onDeactivate: () => { start.value = { x: offset.value.x, y: offset.value.y, }; - }) - .onFinalize(() => { + }, + onFinalize: () => { isPressed.value = false; - }); + }, + }); // ... } ``` - -```jsx {3} -// ... -return ( - - - -); -// ... -``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step6.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step6.md new file mode 100644 index 0000000000..75107330d2 --- /dev/null +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step6.md @@ -0,0 +1,11 @@ +```jsx {4} +// ... +return ( + + + + + +); +// ... +``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/index.md b/packages/docs-gesture-handler/docs/guides/quickstart/index.md index 555fde1258..b40bec9308 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/index.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/index.md @@ -11,46 +11,122 @@ import Step2 from './\_steps/step2.md'; import Step3 from './\_steps/step3.md'; import Step4 from './\_steps/step4.md'; import Step5 from './\_steps/step5.md'; +import Step6 from './\_steps/step6.md'; -RNGH2 provides much simpler way to add gestures to your app. All you need to do is wrap the view that you want your gesture to work on with [`GestureDetector`](/docs/gestures/gesture-detector), define the gesture and pass it to detector. That's all! +RNGH3 offers a straightforward way to add gestures to your app. Simply wrap your target view with the [GestureDetector](/docs/fundamentals/gesture-detectors#gesture-detector) component, define your gesture, and pass it in. That’s it! -To demonstrate how you would use the new API, let's make a simple app where you can drag a ball around. You will need to add `react-native-gesture-handler` (for gestures) and `react-native-reanimated` (for animations) modules. +To see the new API in action, let's build a simple app where you can drag a ball around the screen. To follow along, you'll need both `react-native-gesture-handler` (to handle gestures) and `react-native-reanimated` (to handle the animations). -
First let's define styles we will need to make the app:
+
Start by defining the basic structure of the application:
 -
Then we can start writing our Ball component:
+
Next, let's add the necessary styles:
- We also need to define{' '} - - shared values - {' '} - to keep track of the ball position and create animated styles in order to be - able to position the ball on the screen: +Next, define the shared values to track the ball's position and create the animated styles required to position the ball on the screen:
-
And add it to the ball's styles:
+
Apply the animated styles to the ball component:
- The only thing left is to define the pan gesture and assign it to the - detector: + Now, define the Pan gesture logic:
+ +
+Finally, assign the Pan gesture to the GestureDetector: +
+ + + Note the `start` shared value. We need it to store the position of the ball at the moment we grab it to be able to correctly position it later, because we only have access to translation relative to the starting point of the gesture. -Now you can just add `Ball` component to some view in the app and see the results! (Or you can just check the code [here](https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/new_api/velocityTest/index.tsx) and see it in action in the Example app.) +The complete implementation is shown below: + +```jsx +import { StyleSheet } from 'react-native'; +import { + GestureDetector, + GestureHandlerRootView, + usePanGesture, +} from 'react-native-gesture-handler'; +import Animated, { + useAnimatedStyle, + useSharedValue, + withSpring, +} from 'react-native-reanimated'; + +export default function Ball() { + const isPressed = useSharedValue(false); + const offset = useSharedValue({ x: 0, y: 0 }); + const start = useSharedValue({ x: 0, y: 0 }); + + const gesture = usePanGesture({ + onBegin: () => { + 'worklet'; + isPressed.value = true; + }, + onUpdate: (e) => { + 'worklet'; + offset.value = { + x: e.translationX + start.value.x, + y: e.translationY + start.value.y, + }; + }, + onDeactivate: () => { + 'worklet'; + start.value = { + x: offset.value.x, + y: offset.value.y, + }; + }, + onFinalize: () => { + 'worklet'; + isPressed.value = false; + }, + }); + + const animatedStyles = useAnimatedStyle(() => { + return { + transform: [ + { translateX: offset.value.x }, + { translateY: offset.value.y }, + { scale: withSpring(isPressed.value ? 1.2 : 1) }, + ], + backgroundColor: isPressed.value ? 'yellow' : 'blue', + }; + }); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + ball: { + width: 100, + height: 100, + borderRadius: 100, + backgroundColor: 'blue', + alignSelf: 'center', + }, +}); +``` From c3d0441fd3141d29cf29376b02506f135b1ec09c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 13 Jan 2026 18:21:44 +0100 Subject: [PATCH 2/6] Merge 2 steps --- .../docs/guides/quickstart/_steps/step1.md | 13 ++++++- .../docs/guides/quickstart/_steps/step2.md | 38 +++++++++--------- .../docs/guides/quickstart/_steps/step3.md | 32 ++++----------- .../docs/guides/quickstart/_steps/step4.md | 37 ++++++++++++++---- .../docs/guides/quickstart/_steps/step5.md | 39 +++++-------------- .../docs/guides/quickstart/_steps/step6.md | 11 ------ .../docs/guides/quickstart/index.md | 20 ++++------ 7 files changed, 86 insertions(+), 104 deletions(-) delete mode 100644 packages/docs-gesture-handler/docs/guides/quickstart/_steps/step6.md diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md index 9010bed131..18996cbca9 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md @@ -1,12 +1,23 @@ ```jsx +import { StyleSheet } from 'react-native'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import Animated from 'react-native-reanimated'; export default function Ball() { return ( - + ); } + +const styles = StyleSheet.create({ + ball: { + width: 100, + height: 100, + borderRadius: 100, + backgroundColor: 'blue', + alignSelf: 'center', + }, +}); ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md index 18996cbca9..08f4e2f9db 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md @@ -1,23 +1,25 @@ ```jsx -import { StyleSheet } from 'react-native'; -import { GestureHandlerRootView } from 'react-native-gesture-handler'; -import Animated from 'react-native-reanimated'; +import { + useAnimatedStyle, + useSharedValue, + withSpring, +} from 'react-native-reanimated'; export default function Ball() { - return ( - - - - ); -} + const isPressed = useSharedValue(false); + const offset = useSharedValue({ x: 0, y: 0 }); + + const animatedStyles = useAnimatedStyle(() => { + return { + transform: [ + { translateX: offset.value.x }, + { translateY: offset.value.y }, + { scale: withSpring(isPressed.value ? 1.2 : 1) }, + ], + backgroundColor: isPressed.value ? 'yellow' : 'blue', + }; + }); -const styles = StyleSheet.create({ - ball: { - width: 100, - height: 100, - borderRadius: 100, - backgroundColor: 'blue', - alignSelf: 'center', - }, -}); + // ... +} ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md index 08f4e2f9db..f75641e27f 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md @@ -1,25 +1,9 @@ -```jsx -import { - useAnimatedStyle, - useSharedValue, - withSpring, -} from 'react-native-reanimated'; - -export default function Ball() { - const isPressed = useSharedValue(false); - const offset = useSharedValue({ x: 0, y: 0 }); - - const animatedStyles = useAnimatedStyle(() => { - return { - transform: [ - { translateX: offset.value.x }, - { translateY: offset.value.y }, - { scale: withSpring(isPressed.value ? 1.2 : 1) }, - ], - backgroundColor: isPressed.value ? 'yellow' : 'blue', - }; - }); - - // ... -} +```jsx {4} +// ... +return ( + + + +); +// ... ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md index f75641e27f..b585db2a02 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md @@ -1,9 +1,30 @@ -```jsx {4} -// ... -return ( - - - -); -// ... +```jsx +import { usePanGesture } from 'react-native-gesture-handler'; + +function Ball() { + // ... + const start = useSharedValue({ x: 0, y: 0 }); + + const gesture = usePanGesture({ + onBegin: () => { + isPressed.value = true; + }, + onUpdate: (e) => { + offset.value = { + x: e.translationX + start.value.x, + y: e.translationY + start.value.y, + }; + }, + onDeactivate: () => { + start.value = { + x: offset.value.x, + y: offset.value.y, + }; + }, + onFinalize: () => { + isPressed.value = false; + }, + }); + // ... +} ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md index b585db2a02..75107330d2 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md @@ -1,30 +1,11 @@ -```jsx -import { usePanGesture } from 'react-native-gesture-handler'; - -function Ball() { - // ... - const start = useSharedValue({ x: 0, y: 0 }); - - const gesture = usePanGesture({ - onBegin: () => { - isPressed.value = true; - }, - onUpdate: (e) => { - offset.value = { - x: e.translationX + start.value.x, - y: e.translationY + start.value.y, - }; - }, - onDeactivate: () => { - start.value = { - x: offset.value.x, - y: offset.value.y, - }; - }, - onFinalize: () => { - isPressed.value = false; - }, - }); - // ... -} +```jsx {4} +// ... +return ( + + + + + +); +// ... ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step6.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step6.md deleted file mode 100644 index 75107330d2..0000000000 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step6.md +++ /dev/null @@ -1,11 +0,0 @@ -```jsx {4} -// ... -return ( - - - - - -); -// ... -``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/index.md b/packages/docs-gesture-handler/docs/guides/quickstart/index.md index b40bec9308..89a7c58559 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/index.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/index.md @@ -11,7 +11,6 @@ import Step2 from './\_steps/step2.md'; import Step3 from './\_steps/step3.md'; import Step4 from './\_steps/step4.md'; import Step5 from './\_steps/step5.md'; -import Step6 from './\_steps/step6.md'; RNGH3 offers a straightforward way to add gestures to your app. Simply wrap your target view with the [GestureDetector](/docs/fundamentals/gesture-detectors#gesture-detector) component, define your gesture, and pass it in. That’s it! @@ -23,34 +22,29 @@ To see the new API in action, let's build a simple app where you can drag a ball -
Next, let's add the necessary styles:
- - - -
Next, define the shared values to track the ball's position and create the animated styles required to position the ball on the screen:
- + - +
Apply the animated styles to the ball component:
- + - +
Now, define the Pan gesture logic:
- + - +
Finally, assign the Pan gesture to the GestureDetector:
- + Note the `start` shared value. We need it to store the position of the ball at the moment we grab it to be able to correctly position it later, because we only have access to translation relative to the starting point of the gesture. From eccaa37b732a0753f7c39a3658c8d71e84ab40f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 13 Jan 2026 18:22:31 +0100 Subject: [PATCH 3/6] Better phrasing --- packages/docs-gesture-handler/docs/guides/quickstart/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/index.md b/packages/docs-gesture-handler/docs/guides/quickstart/index.md index 89a7c58559..4cb73c4250 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/index.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/index.md @@ -42,7 +42,7 @@ Next, define the
-Finally, assign the Pan gesture to the GestureDetector: +Finally, wrap the component responsible for rendering the ball with a GestureDetector, and attach the Pan gesture to it:
From c82771ea0f0e62ea037b394ddd61cbb371dcfc67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Wed, 14 Jan 2026 17:02:43 +0100 Subject: [PATCH 4/6] Explain SharedValue earlier --- .../docs-gesture-handler/docs/guides/quickstart/index.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/index.md b/packages/docs-gesture-handler/docs/guides/quickstart/index.md index 4cb73c4250..80fa2fe880 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/index.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/index.md @@ -23,7 +23,7 @@ To see the new API in action, let's build a simple app where you can drag a ball
-Next, define the shared values to track the ball's position and create the animated styles required to position the ball on the screen: + Next, define the `SharedValues` to track the ball's position and create the animated styles required to position the ball on the screen:
@@ -35,20 +35,18 @@ Next, define the
- Now, define the Pan gesture logic: + Now, define the Pan gesture logic. We need `SharedValue` to store the position of the ball at the moment we grab it to be able to correctly position it later, because we only have access to translation relative to the starting point of the gesture.
-Finally, wrap the component responsible for rendering the ball with a GestureDetector, and attach the Pan gesture to it: + Finally, wrap the component responsible for rendering the ball with a GestureDetector, and attach the Pan gesture to it:
-Note the `start` shared value. We need it to store the position of the ball at the moment we grab it to be able to correctly position it later, because we only have access to translation relative to the starting point of the gesture. - The complete implementation is shown below: ```jsx From f3dd31132608f449ef169d854a69d6eecff31c31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Wed, 14 Jan 2026 17:06:55 +0100 Subject: [PATCH 5/6] Link to reanimated --- packages/docs-gesture-handler/docs/guides/quickstart/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/index.md b/packages/docs-gesture-handler/docs/guides/quickstart/index.md index 80fa2fe880..4059348a5c 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/index.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/index.md @@ -14,7 +14,7 @@ import Step5 from './\_steps/step5.md'; RNGH3 offers a straightforward way to add gestures to your app. Simply wrap your target view with the [GestureDetector](/docs/fundamentals/gesture-detectors#gesture-detector) component, define your gesture, and pass it in. That’s it! -To see the new API in action, let's build a simple app where you can drag a ball around the screen. To follow along, you'll need both `react-native-gesture-handler` (to handle gestures) and `react-native-reanimated` (to handle the animations). +To see the new API in action, let's build a simple app where you can drag a ball around the screen. To follow along, you'll need both `react-native-gesture-handler` (to handle gestures) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) (to handle the animations).
Start by defining the basic structure of the application:
From 7b9317bfe6435e7d0f69e655d124cd7733f48d6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 20 Jan 2026 09:25:22 +0100 Subject: [PATCH 6/6] Update guide --- .../docs/guides/quickstart/_steps/step4.md | 12 ++---------- .../docs/guides/quickstart/index.md | 17 +++-------------- 2 files changed, 5 insertions(+), 24 deletions(-) diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md index b585db2a02..a7260cb8bb 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md @@ -3,22 +3,14 @@ import { usePanGesture } from 'react-native-gesture-handler'; function Ball() { // ... - const start = useSharedValue({ x: 0, y: 0 }); - const gesture = usePanGesture({ onBegin: () => { isPressed.value = true; }, onUpdate: (e) => { offset.value = { - x: e.translationX + start.value.x, - y: e.translationY + start.value.y, - }; - }, - onDeactivate: () => { - start.value = { - x: offset.value.x, - y: offset.value.y, + x: offset.value.x + e.changeX, + y: offset.value.y + e.changeY, }; }, onFinalize: () => { diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/index.md b/packages/docs-gesture-handler/docs/guides/quickstart/index.md index 4059348a5c..cbfa9bbbd2 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/index.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/index.md @@ -35,7 +35,7 @@ To see the new API in action, let's build a simple app where you can drag a ball
- Now, define the Pan gesture logic. We need `SharedValue` to store the position of the ball at the moment we grab it to be able to correctly position it later, because we only have access to translation relative to the starting point of the gesture. + Now, define the Pan gesture logic.
@@ -65,29 +65,18 @@ import Animated, { export default function Ball() { const isPressed = useSharedValue(false); const offset = useSharedValue({ x: 0, y: 0 }); - const start = useSharedValue({ x: 0, y: 0 }); const gesture = usePanGesture({ onBegin: () => { - 'worklet'; isPressed.value = true; }, onUpdate: (e) => { - 'worklet'; offset.value = { - x: e.translationX + start.value.x, - y: e.translationY + start.value.y, - }; - }, - onDeactivate: () => { - 'worklet'; - start.value = { - x: offset.value.x, - y: offset.value.y, + x: offset.value.x + e.changeX, + y: offset.value.y + e.changeY, }; }, onFinalize: () => { - 'worklet'; isPressed.value = false; }, });