Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit 00ce65c

Browse files
committed
Formatting 🚀
1 parent b4f317e commit 00ce65c

File tree

1 file changed

+9
-7
lines changed

1 file changed

+9
-7
lines changed

src/posts/2024-12-31-carousel-parallax-circular-loop-react-native-expo.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,15 @@ leveraging the power of React Native Reanimated.*
1717

1818
Recently, during a one-to-one meeting with my engineering manager, [Luca D'antona](https://www.linkedin.com/in/lucadantona/),
1919
we discussed some exciting animations we’d like to bring to our mobile apps at [lastminute.com](https://corporate.lastminute.com).
20-
In particular, Luca pointed out how captivating the carousel on the home screen of the official
21-
[Apple TV app](https://www.apple.com/apple-tv-app/) is. This carousel stands out for its stunning parallax animation.
22-
Essentially, as you scroll through the images of TV shows/movies, the images shift based on the scroll position,
20+
In particular, Luca pointed out how captivating the carousel on the home screen of the official
21+
[Apple TV app](https://www.apple.com/apple-tv-app/) is.
22+
This carousel stands out for its stunning parallax animation.
23+
Essentially, as you scroll through the images of TV shows and movies, the images shift based on the scroll position,
2324
adding a dynamic sense of motion to the entire experience.
2425
In our apps we have been using [React Native](/2018/07/04/react-native-typescript-existing-app/) for quite some
2526
time, but animations often have a bad reputation within this framework.
26-
Luca challenged the team, asking: “Do you think it’s possible to implement such a cool animation on our daily deals carousel? ChatGPT says it should be possible!”
27+
Luca challenged the team, asking: “Do you think it’s possible to implement such a cool animation on our daily deals
28+
carousel? ChatGPT says it should be possible!”.
2729
I took this challenge personally because I’m passionate about animations—a natural consequence of my love for
2830
[computer graphics](/2017/08/25/how-to-calculate-reflection-vector/)).
2931
And here I am today, having successfully implemented the challenge and enhanced our daily deals carousel with this
@@ -152,10 +154,9 @@ export const useCircularCarousel = (items: ParallaxCarouselItemData[]) => {
152154
Now that we have our carousel in `FlatList` iin place, we can implement the `ParallaxCarouselItem` component. This
153155
component receive the `scrollX` offset from the parent, and pass it to the `useParallaxWithOpacityAnimations` hook
154156
to calculate the animation needed.
155-
In terms strictly of UI, the component is quite straight forward.
157+
In terms strictly of UI, the component is quite straight forward.
156158
It has an image fullscreen, wrapped by a `Animated.View` that we will use to apply the parallax animation.
157-
A `LinearGradient` is used to add som contrast with the texts at the bottom of the item, created using `Animated.
158-
Text` views.
159+
A `LinearGradient` is used to add som contrast with the texts at the bottom of the item, created using `Animated.Text` views.
159160

160161
```tsx
161162
import Animated, {SharedValue} from "react-native-reanimated";
@@ -292,6 +293,7 @@ data.
292293

293294
```tsx
294295
import {ParallaxCarousel} from "@/parallax-carousel/parallax-carousel";
296+
295297
const items = [
296298
{
297299
id: '1',

0 commit comments

Comments
 (0)