- 37
- 104 180
Massive Educator - Shorts
India
Приєднався 23 вер 2022
FlatList Item Viewability Animation in React Native
List Item Visibility/Viewability Animation in React Native using Reanimated, Moti & build-in Animated API.
Source code: patreon.com/posts/93473536
📚 Chapters
- (00:00) Intro
- (00:18) Reanimated - I
- (02:32) Reanimated - II
- (03:05) Reanimated - III
- (04:20) Usage with Moti
- (04:48) Animated - I
- (06:23) Animated - II
- (06:44) Animated - III
- (07:27) A Little Tip!
➡️ Connect with me: bio.link/ashud
🌐 Other distributions:
Hindi: ua-cam.com/video/kDewN81AoYQ/v-deo.html
#reactnative #reactjs #animation #1127
Source code: patreon.com/posts/93473536
📚 Chapters
- (00:00) Intro
- (00:18) Reanimated - I
- (02:32) Reanimated - II
- (03:05) Reanimated - III
- (04:20) Usage with Moti
- (04:48) Animated - I
- (06:23) Animated - II
- (06:44) Animated - III
- (07:27) A Little Tip!
➡️ Connect with me: bio.link/ashud
🌐 Other distributions:
Hindi: ua-cam.com/video/kDewN81AoYQ/v-deo.html
#reactnative #reactjs #animation #1127
Переглядів: 823
Відео
Animated Scrollable Masked TabBar • React Native
Переглядів 2,7 тис.5 місяців тому
In this video we will learn how to apply Masking effect on Top TabBar in react-native using 4 different solutions. 1. react-navigation 2. expo-router 3. react-native-tab-view 4. react-native-pager-view 📚 Chapters - (00:00) Intro - (00:12) react-navigation solution - (02:05) Final Demo (5 platforms) - react-navigation - (02:21) expo-router solution - (03:22) Final Demo - expo-router - (03:34) re...
How to implement an Accordion in react-native?
Переглядів 1,7 тис.6 місяців тому
Source code: patreon.com/posts/tutorial-custom-98669964 📚 Chapters - (00:00) Initial Demo - (00:04) Reanimated solution - (02:49) Final Demo - reanimated - (03:01) Advance Examples - (03:18) Changes when using Moti - (03:55) Using built-in Animated API - (05:07) Animated Demo in Android, iOS, Web, macOS & Windows ➡️ Connect with me: bio.link/ashud 🌐 Other distributions: Hindi version: ua-cam.co...
Elastic Scroll List Animation • React Native
Переглядів 6 тис.7 місяців тому
Source code: patreon.com/posts/tutorial-or-for-97363251 Shorts Version: ua-cam.com/users/shortsRkyDn-Z9KSA 📚 Chapters - (00:00) Initial Demo - (00:12) Reanimated solution - (02:10) Final Demo - reanimated - (02:22) Usage of Reanimated with Moti - (02:51) Moti Demo - (03:06) Using built-in Animated API without external packages - (03:47) Animated Demo - (03:54) A Little Tip!! ➡️ Connect with me:...
Apply Blur on Bottom NavBar • React Native
Переглядів 9 тис.9 місяців тому
Full Source code: patreon.com/posts/create-blurred-92171969?Link& Shorts Version: ua-cam.com/users/shortsNxUIT-GiRgU 📚 Chapters - (00:00) Initial Demo - (00:04) The main change required - (00:12) Why we made these changes? - (00:36) But That's not it! - (00:45) Here's a fix - (00:56) Result on iOS, Android & Web - (01:05) Feel Free to Play With the Blur - (01:17) What if you're not using Expo? ...
React Native Animations - Cards Rotation (Reanimated & gesture-handler)
Переглядів 6589 місяців тому
React Native Animations - Cards Rotation (Reanimated & gesture-handler)
React Native Animations - Custom Toolbar (Reanimated & gesture-handler)
Переглядів 1,2 тис.9 місяців тому
React Native Animations - Custom Toolbar (Reanimated & gesture-handler)
Free React Native responsive UI template | Open Source
Переглядів 1,1 тис.Рік тому
Free React Native responsive UI template | Open Source
Full video link
Can you do for flutter
Hi sir please create tutorial for this
Source Code Please
Do you have a source code with Nested Accordion on your Patreon?
Isn't it annoying that we have to add padding bottom height on every component inside the bottomTab ? i tried to add it on the sceneContainerStyle at the tab level but bottomTabBarHeight hook is not recognized as inside the bottomTab
Isn't it annoying that we have to add padding bottom height on every component inside the bottomTab ? i tried to add it on the sceneContainerStyle at the tab level but bottomTabBarHeight hook is not recognized as inside the bottomTab
Bro please Upload tutorial videos on react native animations
Full video pls
Where is link
so eyecandy
Thanks for this… but this seems to be a workaround, the scrollbar indicator behind the tab bar when scrolling down seems to be a bug or an amateur app, is there a way to fix it?
nice
Musica?
wsdow
Great … finally not expo 🔥💯👍
flutter? 😮. Speed code? Where?
where is the source code? i dont know the imports and styles part
plz make tutorial on it
it is not working
can you make a serie?
Man, code on git this, please.
where is the Repo for this?
Thanks it’s very helpful, I will be able to do that too 😊
Awesome man. Do you have some tutorial about drag and sort or drag and drop ? Thank you!
Hello great work. I would much appreciate if you could do an infinite bidirectional horizontal list in react native. Something like a week calendar where a week fills the screen width of the screen. Scrolling left or right would load the next or previous week.
Thanks for suggestion, do you have any example or visual demo so I can get some better idea?
do we have tutorial for this
Yes, please check the channel, also attached to the video!
Yummm, spaghetti?
whats the font name?
It's Inter & Poppins, depending on the fontWeight. The tutorials for this might give you a better idea: ua-cam.com/play/PLpnMM6hhRccigVfEO2Ynj6DQB9MbW5CaF.html
@@massive.educator-shorts😊
github ????
Not open sourced to github yet, but the code is currently available on my Patreon - www.patreon.com/posts/implementing-in-92470296 - www.patreon.com/posts/tutorial-custom-98669964
Can you please tell me how i implement this actually this what I looking for
it's an SVG animation under-the-hood, where the TabBar background is the custom SVG, the initial and the curved one, so it's a transition between the two. Also the original inspiration is a Flutter project which is open source, so you can look at the code to understand the approach used there: github.com/mitesh77/Best-Flutter-UI-Templates/blob/master/best_flutter_ui_templates/lib/fitness_app/bottom_navigation_view/bottom_bar_view.dart
Awesome dude
well done Sir 💪
Thanks for being active didn't really expect this 😅😅 .sorry btw
I would be cool if u made an gulid video of how to code it , insted of just giving the source code
Would be, but I don't have plans for it's tutorial as of now, source code is open source, so you can learn from there, and I do have other tutorials in react-native that might help!
Update: The Moti solution can be more simplified, as we can change AnimatedStyle to DerivedValue and we can use it directly in MotiView's animate property. See here for it's visual presentation: twitter.com/aashudubey_ad/status/1765073367496024517
How edit like this video which software are you using?
Apple Keynote
Holy shit
Your videos are very clear and to the point. Please continue.
Beautiful
awaitng for more
Glad you do! There are more demoes shared in the channel, also they are usually first shared on my Twitter, so you can follow me there to stay updated if you want!
Is it possible to do it with expo router?
Yes, expo-route is built on top of react-navigation so the approach is gonna be pretty much same, you just have to use it's provided 'Tabs' component and for tab screen create their specific file in the same folder. Just release a video with it's expo-router version, do have a look: ua-cam.com/users/shortsVNrEfUlwy_M
detailed video please
Detailed video is available on the channel, and also attached to the short (play button below the channel name) Here's the url: ua-cam.com/video/w9gPW_cXWHo/v-deo.html
great, Btw how to approach a collapsible header when we are scrolling in a MaterialTopTabNavigator, especially when a use navigate in each tab,
I think to use collapsible header with Top Tab bar, you might need to hack around some solution using scrolling value and animate the header height. Or there's also an existing package for this, 'react-native-collapsible-tab-view' which is built on top of 'react-native-tab-view' package used by react-navigation under the hook, you can give it a try. package: github.com/PedroBern/react-native-collapsible-tab-view
wow, good solution, I used to add an imaginary View with a height in footer component for a Flatlist
more plz
Thanks! Nice solution.
🎉
not working with expo-router =(
Hi, late reply, but published a short with it's expo-router version, do have a look: ua-cam.com/users/shortsVNrEfUlwy_M
You are the best bro. I just subscribe and I hope see more video animation in React Native. Thanks for your dedication
Thanks for the sub, more stuff is work in progress! :)