William thanks for the video, great content as always! I caught something in the video that I think might be a violation to the rules of hooks, and that's the useAnimatedStyle inside the map, it's fine here because the number of cards is static but this breaks in any dynamic scenario.
I was thinking the same. If he were to use eslint-plugin-react-hooks (extremely useful eslint plugin) I think it would give a error. Could probably move useAmimatedStule out and then have an equivalent map inside of it to make a keyed object for lookup in render? Edit: duhh I just realized there is an eslint error there already.
Hey willian, thanks for updating us about Reanimated 2. The 'withTransiction' set one value 0 to 1 and 1 to 0, there's a way to set a value 0 to 1 and after that, set that value to 0 without transition, like a reset? T Thank you (or someone) for helping me.
Hello William! I was wondering if the Animated Text is fixed in re-animated 2. I am using your re-text function for showing animated texts. Is re-text still neded for re-animated 2? :)
Hi William, as always - great content ! Do you plan to recreate some of your example ideas ( like Instagram Pinch Zoom ) with Reanimated 2 ? :) It would be really helpful! If not here so maybe on your platform ? :) Either way I plan to sign up for it soon.
Nice work, looks really good. One thing I'm wondering, I guess the red underline under useAnimatedStyle is ESLint complaining that you are not using the hook at the top level of the React component, right?
hi, I tried to make the component also from createAnimatedComponent, but I don't know all the props in that component ... I use typescript for passing props, but I also don't know the correct way i made it like this .. @wcandillon `const AnimatedFlatList: React.FC = Animated.createAnimatedComponent(FlatList)`
hello sir. just come from free code camp video in that video you are using the react-native redash with reanimated v1 and using usePanGestureHandler from redash. can you please make the video to use of redash with v3 reanimated.(heart):)
William, I need your advice, over the past few days, I have been trying to get box shadows work the same on iOS and Android. I have had no luck. iOS shadow does not work if you set overflow hidden and android elevation doesn't offer any control. I have tried using an ImageBackground as shadow but that fails if your view height or width change with animation. I would love to know if there's something or if you could do a video. Thank you!!!
You can use the SVG shadow: github.com/879479119/react-native-shadow That works, but has some quirks. You can also implement your own shadow with views. I have done this. It requires you to create X amounts of Views with the same background color, and a small opacity value, layered on top of each other with a offset in position. This creates the illusion of a fading color. I use this for glow effects around my components. It works great and you only need 5 views or max 10 views to stack on top of eachother to get a really nice effect. But this is much, much, much more difficult to implement than to just use the svg shadow package.
@@shakofarhad876 thanks for your reply. The SVG thing I have tried but found to have certain limitations and sometimes behaves unpredictably. The other trick like you mentioned, or perhaps using PNG images and then display just 1 view on top of it. Well all of these start to break down when you play around with complex animations.
@@majrohi1 No, not the approach that I mentioned. I am currently animating glow fade in and fade out. You are simply animating all the Views as one View not each individual View because all the Views are becoming one glow/shadow together. I am having no issue with animations. On my phone and on the emulators it runs at 60 FPS. And I am just using normal react native animations, not even re-animated. :)
@@majrohi1 Yes, I would like to share my code with you directly, but I am writing using Clojurescript which is a functional programming language that might be a bit confusing to look at without explanation. But basically what you do is to define views with a certain shape and size underneath another component with an offset in position and a low opacity value so that stacking multiple of that view gives a fade effect. I did this just have a glow effect around input fields and buttons because that is what is not supported in android. And it works great and looks great! :)
Hello ! It's awesome. I would like to create in my react native project a part of discussions as for Wathsapp. But I'm stuck. Can you orient me. Thank you
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
Thanks for keeping us up to dated, glad this version 2 came out just when I had started to learn animations in React Native.
Haha perfect timing indeed :)
Where are you learning it from? There arent much resources on animations. I would appreciate if you can ping me at codetraxx10@gmail.com
Unbelievable that you are already going to update your course soon. So so exciting. The new illustrations are so cool, btw :D
hi William! great stuff! i'm a purchaser of your first reanimated couse, cant wait for reanimated 2 updates!
best react-native developer by far! great tutorial once again!
Thanks for the great video, can you do a video showing installation of reanimated 2 please.
William thanks for the video, great content as always!
I caught something in the video that I think might be a violation to the rules of hooks, and that's the useAnimatedStyle inside the map, it's fine here because the number of cards is static but this breaks in any dynamic scenario.
I was thinking the same. If he were to use eslint-plugin-react-hooks (extremely useful eslint plugin) I think it would give a error. Could probably move useAmimatedStule out and then have an equivalent map inside of it to make a keyed object for lookup in render? Edit: duhh I just realized there is an eslint error there already.
Well said William! (in the intro)
Really great content and awesome work with the library `react-native-redash`
Really love it 😍 !!
Good video, as always! 👍
Thank you!
Hey willian, thanks for updating us about Reanimated 2.
The 'withTransiction' set one value 0 to 1 and 1 to 0, there's a way to set a value 0 to 1 and after that, set that value to 0 without transition, like a reset?
T
Thank you (or someone) for helping me.
Forget it, i was reading the docs and found timing(), that do what i want. I was think only with withTiming() that forgot the timing() function. rsrs
Hello William!
I was wondering if the Animated Text is fixed in re-animated 2. I am using your re-text function for showing animated texts. Is re-text still neded for re-animated 2? :)
I will install Reanimated 2 right now
Nice video William! I have one question, I have access to v1 course I'll have the version 2 in the same account for free too or I'll have to buy?
Everything will be available under the same subscription. These two course and I have other plans ;-)
Nice intro message
Thank you Shawn 🙌🏻
@@wcandillon Yes, thank you for that introduction!
awesome, wonderful.
Hi William, as always - great content ! Do you plan to recreate some of your example ideas ( like Instagram Pinch Zoom ) with Reanimated 2 ? :)
It would be really helpful!
If not here so maybe on your platform ? :) Either way I plan to sign up for it soon.
Nice work, looks really good. One thing I'm wondering, I guess the red underline under useAnimatedStyle is ESLint complaining that you are not using the hook at the top level of the React component, right?
Exactly :) need to refactor this in a component.
@@wcandillon great, thanks for confirming this.
When the stable version will be available for react native, how much longer will we need to wait to use it with expo?
hi, I tried to make the component also from createAnimatedComponent, but I don't know all the props in that component ... I use typescript for passing props, but I also don't know the correct way
i made it like this ..
@wcandillon
`const AnimatedFlatList: React.FC = Animated.createAnimatedComponent(FlatList)`
hello sir. just come from free code camp video in that video you are using the react-native redash with reanimated v1 and using usePanGestureHandler from redash. can you please make the video to use of redash with v3 reanimated.(heart):)
William, I need your advice, over the past few days, I have been trying to get box shadows work the same on iOS and Android. I have had no luck. iOS shadow does not work if you set overflow hidden and android elevation doesn't offer any control. I have tried using an ImageBackground as shadow but that fails if your view height or width change with animation. I would love to know if there's something or if you could do a video. Thank you!!!
You can use the SVG shadow: github.com/879479119/react-native-shadow
That works, but has some quirks.
You can also implement your own shadow with views. I have done this. It requires you to create X amounts of Views with the same background color, and a small opacity value, layered on top of each other with a offset in position. This creates the illusion of a fading color. I use this for glow effects around my components. It works great and you only need 5 views or max 10 views to stack on top of eachother to get a really nice effect. But this is much, much, much more difficult to implement than to just use the svg shadow package.
@@shakofarhad876 thanks for your reply. The SVG thing I have tried but found to have certain limitations and sometimes behaves unpredictably. The other trick like you mentioned, or perhaps using PNG images and then display just 1 view on top of it. Well all of these start to break down when you play around with complex animations.
@@majrohi1 No, not the approach that I mentioned. I am currently animating glow fade in and fade out. You are simply animating all the Views as one View not each individual View because all the Views are becoming one glow/shadow together. I am having no issue with animations. On my phone and on the emulators it runs at 60 FPS. And I am just using normal react native animations, not even re-animated. :)
@@shakofarhad876 :) great to hear that. Does it work seamlessly with border radiuses as well?
@@majrohi1 Yes, I would like to share my code with you directly, but I am writing using Clojurescript which is a functional programming language that might be a bit confusing to look at without explanation.
But basically what you do is to define views with a certain shape and size underneath another component with an offset in position and a low opacity value so that stacking multiple of that view gives a fade effect.
I did this just have a glow effect around input fields and buttons because that is what is not supported in android. And it works great and looks great! :)
Great video.. Thank you... ( still waiting for bubble background transition on instagram DMs ^^ )
Thank you !!!
Thank You for your watching 😃
Hello ! It's awesome. I would like to create in my react native project a part of discussions as for Wathsapp. But I'm stuck. Can you orient me. Thank you
o/
Merci! Leurs doc est moyenne.