Lines Matching refs:the
13 It uses the platform's native touch handling system to recognize pan, tap, rotation, and other gest…
15 In this chapter, we are going to add two different gestures using the React Native Gesture Handler …
17 - Double tap to scale the size of the emoji sticker.
18 - Pan to move the emoji sticker around the screen so that the user can place the sticker anywhere o…
24 The React Native Gesture Handler library provides a way to interact with the native platform's gest…
25 To animate between gesture states, we will use the [Reanimated library](https://docs.swmansion.com/…
27 To install them, stop the development server by pressing <kbd>Ctrl</kbd> + <kbd>c</kbd> and run the…
31 …abel/plugin-proposal-export-namespace-from`, which is required to configure the Reanimated library:
43 /* @info Add the plugins array and inside it, add the plugins.*/
53 Now, start the development server again:
57 > **Tip**: We are using `-c` option here because we modified the **babel.config.js** file.
59 …in the app, we'll render `<GestureHandlerRootView>` from `react-native-gesture-handler` to wrap th…
61 To accomplish this, replace the root level `<View>` component in the **App.js** with `<GestureHandl…
69 …/* @info Replace the root level View component with GestureHandlerRootView. */<GestureHandlerRootV…
70 /* ...rest of the code remains */
82 Open the **EmojiSticker.js** file in the **components** directory. Inside it, import `Animated` fro…
88 … tap gesture work, we will apply animations to the `<Image>` component by passing it as an argumen…
91 // after import statements, add the following line
96 The `createAnimatedComponent()` can wrap any component. It looks at the `style` prop of the compone…
98 Replace the `<Image>` component with `<AnimatedImage>`.
105 /* @info Replace the Image component with AnimatedImage. */<AnimatedImage /* @end */
123 In the **EmojiSticker.js** file, import `TapGestureHandler` from `react-native-gesture-handler` and…
124 These hooks will animate the style on the `<AnimatedImage>` component for the sticker when the tap …
136 Inside the `<EmojiSticker>` component, create a reference called `scaleImage` using the `useSharedV…
142 … value using the `useSharedValue()` hook has many advantages. It helps to mutate a piece of data a…
143 …sed and modified using the `.value` property. It will scale the initial value of `scaleImage` so t…
144 … create a function and call it `onDoubleTap()`, and this function will use the `useAnimatedGesture…
145 to animate the transition while scaling the sticker image.
147 Create the following function in the `<EmojiSticker>` component:
159 To animate the transition, let's use a spring-based animation. This will make it feel alive because…
160 We will use the `withSpring()` hook provided by `react-native-reanimated`.
162 …eact-native-reanimated` is used to create a style object that will be applied to the sticker image.
163 It will update styles using the shared values when the animation happens. In this case, we are scal…
164 which is done by manipulating the `width` and `height` properties. The initial values of these prop…
165 Create an `imageStyle` variable and add it to the `EmojiSticker` component:
176 Next, wrap the `<AnimatedImage>` component that displays the sticker on the screen with the `<TapGe…
202 // ...rest of the code remains same
205 …/* @info Wrap the AnimatedImage component with TapGestureHandler*/ <TapGestureHandler onGestureEve…
209 …/* @info Modify the style prop on the AnimatedImage to pass the imageStyle.*/ style={[imageStyle, …
219 In the above snippet, the `onGestureEvent` prop takes the value of the `onDoubleTap()` function and…
222 Let's take a look at our app on iOS, Android and the web:
226 > For a complete reference on the tap gesture API, refer to the [React Native Gesture Handler](http…
234 …e and tracking its movement. We will use this gesture handler to drag the sticker across the image.
236 In the **EmojiSticker.js**, import `PanGestureHandler` from the `react-native-gesture-handler` libr…
243 …component using the `Animated.createAnimatedComponent()` method. Then use it to wrap the `<TapGest…
247 // ...rest of the code remains same
251 // ...rest of the code remains same
254 …/* @info Replace the View component with AnimatedView */<AnimatedView style={{ top: -350 }}>/* @en…
256 {/* ...rest of the code remains same */}
270 // ...rest of the code remains same
274 … translation values will move the sticker around the screen. Since the sticker moves along both ax…
276 In the `useSharedValue()` hooks, we have set both translation variables to have an initial position…
277 …s that the position the sticker is initially placed is considered the starting point. This value s…
279 In the previous step, we triggered the `onActive()` callback for the tap gesture inside the `useAni…
280 Similarly, for the pan gesture, we have to specify two callbacks:
282 - `onStart()`: when the gesture starts or is at its initial position
283 - `onActive()`: when the gesture is active and is moving
285 Create an `onDrag()` method to handle the pan gesture.
301 …the `onStart` and `onActive` methods accept `event` and `context` as parameters. In the `onStart` …
303 …the `useAnimatedStyle()` hook to return an array of transforms.For the `<AnimatedView>` component,…
321 Then add the `containerStyle` from the above snippet on the `<AnimatedView>` component to apply the…
322 Also, update the `<EmojiSticker>` component so that the `<PanGestureHandler>` component becomes the…
348 // rest of the code
352 …/* @info Add containerStyle to the AnimatedView style prop. */<AnimatedView style={[containerStyle…
368 Let's take a look at our app on iOS, Android and the web:
381 …description="In the next chapter, we'll learn how to take a screenshot of the image and the sticke…