I received a lot of comments that this is not visible on Android devices. Here's the fix for it: snack.expo.io/@catalinmiron/react-native-movie-2.0-carousel-for-android. Thanks a ton!
I have managed to try and works on android, don't know the implication but I make the { useNativeDriver:false} in Animate.Flatlist} and follow the above code link, and made some changes as the input range is const inputRange = [ (index - 1.5) * ITEM_SIZE, (index - 1) * ITEM_SIZE ] and const translateX = scrollX.interpolate({ inputRange, outputRange:[0, width], extrapolate:'clamp' })
Ohhhh... I can't express how happy I am like I can do all that stuff in css or framer motion but I was struggling to do that in react native and thought that I lost all my progress but your channel gave me hope to continue working on react native.
Thanku so much bro I will be implementing this animation in my project, I will share your video in my friend circle I think you deserve more subscribers,🙂👍
Glad you like them and it's my pleasure Erik. I am involved in this community for more than 6 years and I simply love it. Thank you for sharing your thoughts ✌️
@Catalin Miron hi can you please make a video on how use graphes in react native and how to show them on mobile it will be helpful for my project thank you for hearing me.
@@collocheru Since January 2015 (I had access to the private React Native repository). You can listen to my React Native Radio session to find out more about me and my work: dev.to/reactnativeradio/rnr-122-react-native-animations-feat-catalin-miron dev.to/reactnativeradio/rnr-168-animations-and-micro-interactions-in-react-native-with-catalin-miron Thank you Cheruiyot ✌️
I'm pretty impressed with this tutorial and your way to teach is so good... Cam you please make a video on instgram stories animation that will be appreciated ❤️
instead of using if statement to check and add view u can directly add view to before an after flatlist using listHeaderComponent and listFooterComponent
if you could do some tutorials for firebase with react native from scratch would be awasome, there are not many of them and the available ones are not so good as well. Thanks for your work!
I already have a series where I create a Habits app frok scratch with GraphQL (backend and mobile) but I will definitely consider expanding the content here. Thanks Felix ✌️
Nice tut on react native 🤘. I'm noob to react native . Dude u explain amazingly about all stuff.... I would suggest to try building from scratch.. Overall nice tuts dude🤘
Great tutorial. I am wondering, how can I loop this content, in the Flatlist. Really finding hard on how to get the Flatlist items to loop. Thanks a lot. Your videos have helped me understand React Native and Animations better every time. Thanks!!
Hello dear, thank you for all the work you have done. But for fix the flatlist active component in the middle of screen, you can use another smooth way. You can create a Empty component that will contain an empty view which must have SPACER_ITEM_SIZE as width value. Then put this component as listHeaderComponent and listFooterComponent for your flatlist. That is all. Sorry for my bad english guys. Please, have you a store of paid react-native advanced animations courses for people who want it?
Maybe next year, I’m not yet finished with Animated API and most probably you’ll see Reanimated2 content after I’ll publish my Reanimated2 course. Cheers Hritik ✌️
ty for the video i always watch the anim and try to make it by my own and then watch your solution , about the spacer it would be better if you have added paddingHorizontal to the flatlist container instead of creating a spacer element , ty for your videos again
Hi man, great work! Is it possible to add a swipe up and down to the centered item? Would be a great feature! Or if possible could you point me in the right direction on how to do this, thanks
Hey Catalin! Firstly, thanks for the tutorials, I've seen a lot of them already. I have a doubt, I'm trying to animate the FlatList using the Reanimated v2, but I'm getting frame drops, which is making me start using the AnimatedAPI. Do you know how can I avoid frame drops on FlatLists using Reanimated v2? Anyone who sees this comment and is experiencing the same problem, know how to fix it?
Had the same problem yesterday. I solved it by building some limitor algorithms for the data being passed into the list. What's weird is that if you map the same data in a scrollview, you dont get the frame rate drop.
@@smilecat9623 copy-pasting the code in a RN CLI bootstrap project should work. I'm not using any specific expo API so that why this should work. lease let me know if you have any issues. Thanks!
hello! awesome video can you helpe, please? I`m also animating opacity of the items to 0.5 when they are not in the center, but whenever I set a state on this screen, it messes with the opacity. I guess it re renders the list and reapply the opacity, so if im a the 3rd item up, they become invisible would you know how to fix it? thanks!
Great work!! Can you help me with the Dynamic Input fields Adding to the array as an object. And showing it on click of plus button, with Animation? I'm not getting it write or tell me where to look for it...
Great Tutorial, I used the fixed version on Android and I wasn't able to run at 60fps I got frames dropped . this is due my phone?? or just because animated on android works like that?
hi thanks for the video really usefull, i know nothing about reanimated v1 and v2 and i want to learn one of them should i start with v2 or v1 what do you suggest?
Thanks Kreb. To be honest, Reanimated2 is great and powerful, the only downside I'll say is that it is still in beta/alpha so is not that mature compared to Reanimated1. I'll create a course that will walk you through everything that you need to know about Reanimated2. I'll announce it here on the channel once it is ready!. Thanks!
We can make this infinity? Like a linked list? The last item is linked to the first and this idea. Well, i think this is better than the spacer in start and the end. The right spacer shows the first items and the left-spacer of the first item show the last. You can do this in another tutorial?
hi i have Question : setMovies([{ key: 'empty-left' }, ...movies, { key: 'empty-right' }]); what's that mean ?. i tryed to run it but give me tha worng: " Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. "
go to his discord I found a solution to this that I posted under help. However, it makes it run slower so theres a hopefully a better solution out there
// Pack Index const [packIndex,setPackIndex] = React.useState(0) const scrollX = React.useRef(new Animated.Value(0)).current const Item_Size = new Animated.Value(ITEM_SIZE) React.useEffect(() => { scrollX.addListener(val => { // Divides Scrollx by the size of each item const x = Animated.divide(scrollX,Item_Size); // Gives index number of each const indexNum= Math.round(Number.parseFloat(JSON.stringify(x))); setPackIndex(indexNum) }); }, []);
Brother, I need help can u tell me how did u master react native and how much time did it take u. Also, I am planning an app and decided to make it with react native, will it be good and is it necessary to learn JavaScript before react native. Or should I make it with React.js? What should I do please 🙏 reply? I found your channel thought Reddit and this channel is GOLD.
Hi, I had access to React Native before it was released and I build the very first complete application with it after 3 months after the release, but all of this because I knew React. This is the app v1: github.com/catalinmiron/react-native-dribbble-app And app v2: zribbble.com
The app was launched in the AppStore but Dribbble cut the whole API I think that knowing JavaScript and a little bit of CSS can help you out, knowing React is definitely a plus because will make your transition smoother. Yes, you can write cross-platform solutions in React/React Native I’m working at Skype which is a cross-platform application built with React and React Native. Thanks 🙏
No, sorry :( I don't have a full working app for this carousel but this is also going to be part of 10 React Native challenges which I am doing now and it's the last video. Here's the Patreon post to see what we are going to build: www.patreon.com/posts/10-types-of-41446571
