Видео

This is by far the most interesting, the most explanatory, the most creative and the most step-by-step tutorial for bottom sheet I've came across. Thanks!

At 11:50 you made a crucial mistake, this callback runs on JS Thread and you should be using the `useAnimatedScrollHandler` from React Native Reanimated to run it directly the UI Thread (aka native side) and change FlatList to be an Animated.FlatList and modify the shared value inside the callback and keep everything on the UI Thread. Most probably Android is screaming in performance regression now :)

Hi please make tutorial for react native music app transition

Do you have drag and drop item to react native flatlist?

I guess, react-native-gesture-handler keep updating, the code is using deprecated one.

It would be wonderful if implemented dot press functionilty to scroll its own screen, but amazing tutorial, thanks for sharing your wisdom with us

I doubt anybody can name a better tutorial for this.Thanks G.

0:24, i mean, bold claim. i have been able to make such thing with no js directly just html + css. maybe i just didn't quite get how you meant it but directly, just with modern css, this is totally possible

amazing content, thank you from israel ! i would love to learn more about skia! can we add a text and views inside the blur cards of react-native on top of canvas of skia?

Great Work bro! 🎉 Amazing animation! 😃

This is awesome 🎇

Your tutorials are very practical for real world animations. Subtle small designs brings comfortable engagement.

Hello there 👋 I hope you'll enjoy this tutorial 🎥 If you want to dive deeper into Skia, Reanimated, and Gesture Handler, this is the last month to enroll in my course: reanimate.dev/ Registration closes on November 8th and will reopen in 2025 👀

How to create a animated custom Drawer withe animated Bottom Tabs having same 4-5 items to toggle between. (My suggestion for new Video), because I loved loved your animation videos specially in TS.

Works like a charm! that you have the source code available in github aswell is awsome. Thx!

Outdated, doesnt work with v3

There isn't much skia tutorials pls go on with them. Thanx👌

I was using React Native CLI and I faced some challanges with the Linear gradient. This should resolve the issue when using React Native CLI instead of Expo. Install react-native-linear-gradient: npm install react-native-linear-gradient Replace all instances of: import { LinearGradient } from 'expo-linear-gradient' with: import { LinearGradient } from 'react-native-linear-gradient' Files where the change is needed: node_modules/moti/src/skeleton/expo.tsx node_modules/moti/src/skeleton/skeleton.tsx node_modules/moti/src/skeleton/types.ts node_modules/moti/build/skeleton/expo.js

holy crap THANK YOU SO MUCH for providing a written version of this tutorial. you have NO idea how incredibly helpful that is for those of us who are hard of hearing (and also, just, like, really really bad at youtube tutorials)!!!!

it's crazy, I am new at react native but this Skia and Reanimated are revolutionary for react native animations otherwise it would be so hard to implement them and pretty sure not quite performant, it takes a lot of practice I guess to be good with these tools, thanks for this great tutorial

Great video! Learning so much, every video!

Sir kindly bring drawing, panting, animation etc complete skia playlist like you've made RN Reanimated.

Great tutorial that combines skia and reanimated ! Thank you !

Why are you using by startAnimated useDerivedValue and not useSharedValue? What's the difference. And how to know when I should use useDerived or useShared?

@4:50 what extension are you using for code suggestions like that.

Great tutorial. Never tried Skia. This makes me want to try it

vscode theme please?

Very good tutorial 👏

Hello there 👋 I hope you'll enjoy this tutorial 🎥 If you want to dive deeper into Skia, Reanimated & Gesture Handler, check out my course with step-by-step tutorials starting from scratch reanimate.dev

is this optimize or not?

please add gesture swap to this button

مبدع

🔝🔝🔝 best out there

Thanks!

Damn another day another great tutorial thanks I just have one question would it make any difference to pass paingEnabled instead of snapToAlignment and deceleration rate?

😮🤯

Awesome. But I’m curious, what does border curve do???

Your work is amazing and love it

amazing as always

Brother i am waiting for more with Skia plz

Thank you Enzo.

Goddamn man, the designer on an app i'm building have done this and I was wondering how I can do it. THANKS A LOT

Does passing a UI thread shared value via props move som load to the JS thread or is it just passed as a reference?

Very useful 🔝 thank youuu

Beautifully explained

wow, really good work!

Great tutorials what would happen if create multiple instances of this BottomSheep components , i mean use it in varios page inside the app, it creates multiples instances or just one with different content inside?

Nice tutorial. Keep it up💯

import { StatusBar } from "expo-status-bar"; import { FlatList, StyleSheet, Text, View } from "react-native"; import CompListItem from "./components/CompListItems"; import { useSharedValue } from "react-native-reanimated"; const data = new Array(50).fill(0).map((_, index) => ({ id: index })); export default function App() { const viewableItems = useSharedValue([]); return ( <View style={styles.container}> <FlatList data={data} contentContainerStyle={{ paddingTop: 40 }} onViewableItemsChanged={({ viewableItems: vItems }) => { viewableItems.value = vItems; }} renderItem={({ item }) => { return <CompListItem item={item} viewableItems={viewableItems} />; }} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", }, }); import { useEffect } from "react"; import { View } from "react-native"; import Animated, { useAnimatedStyle, withTiming, } from "react-native-reanimated"; export default function CompListItem({ item, viewableItems }) { const rStyle = useAnimatedStyle(() => { const isVisible = Boolean( viewableItems.value .filter((viewableItem) => viewableItem.isViewable) .find((viewableItem) => viewableItem.item.id === item.id) ); return { opacity: withTiming(isVisible ? 1 : 0), transform: [ { scale: withTiming(isVisible ? 1 : 0.6), }, ], }; }, []); // Use useEffect to ensure the component reacts to changes in viewableItems useEffect(() => { rStyle; // Trigger a re-render when viewableItems changes }, [viewableItems.value]); return ( <Animated.View style={[ { height: 80, width: "90%", backgroundColor: "red", marginTop: 15, borderRadius: 15, alignSelf: "center", }, rStyle, ]} ></Animated.View> ); } I had a problem with isViewable, I solved it this way.

Great Work , thank you 😍