Use these imports at below guys for problem at minute 20:00 onscrollEvent,useValue etc It worked for me hope it helps. ----------IMPORTS---------- import Animated from "react-native-reanimated"; import { useValue, interpolateColor, onScrollEvent, } from "react-native-redash/lib/module/v1";
Really like the new concept, using a design from Figma and making it a reality, combining more real life application with beautiful animations 👍 keep on the great work!
I just love how you animate things without relying on slider components. I'm working on a react-native app and every time we need to use a slider we just go and install a slider component :( And we are lacking so many animations. Thanks to your course I hope to be able to add some more life to the app :) Thank you for the great content.
For the people who are having problems with Animated, background colors missing, and so on, it is necessary to use old versions of some libs like "react-native-reanimated": "1.9.0", "react-native-redash": "14.2.1". When you get a white background, don't forget to add # before the color name.
17:20 I am sorry, but I could not find a solution. I get this error when using onScroll: "this.props.onScroll" is not a function". How do I fix this easily?
you are indeed the most perfect with animations. i havent seen such varieties of animations and gestures tutorials in any other channel. thanks for making such free stuff for us 🥳
excellent! Developing now for more than 3 years and I'm surprised that I learned something new. I like your code styling and the calm approach to solve problems! Keep on.
Awesome this is the best series for RN!! One thing I noticed is if I swipe fast sometimes it swipes two slides at once. Also, each screen has a border-radius of 75 in start and end but in your video, it shows only in the first. Can't wait for next episode :D
Is there anyone has issue with 35:13? I am using android and when I add transform: [{transformX: multiply(x,-1) },] the footer doesn't move along with slide. Any suggestions would be appreciated. Got stuck at that point for a long time now.
@@wcandillon any reason why we don't add the footer in the Slide component, so each slide had both top and footer part and both slide together by the scrollview
Is there any particular benefit of setting defaultProps on component at 38:32 in place of marking variant as optional in props and using default value when destructuring props, like so: ({ variant = "default", label }: ButtonProps) => {} ?
Because the outside container stretches to full width and that’s the one holding the radius. You basically just need to apply the border radius onto the inner container
Hi William, really like your video. Can you please also do a video for what VS code extensions do you use? And walk through the key features of them? Thanks
Hi all, I'm stuck in a strange bug at 20:50, just after removing backgroundColor: 'cyan' and implementing the backgroundAnimation with interpolateColor. All my backgrounds are white... Does someone have this problem too ? i'll appreciate some help, I really want to continue this tutorial. Thanks for your time
I had this problem too. i made an issue on github. Tell me if you need more details : github.com/wcandillon/react-native-redash/issues/302#issuecomment-657208057
Beautiful slider!!!!! Nice Hey William! Why you don't create a package or separete component with this slider. I'm planning an app and I'd like to use it :D
hello William, say you have a pagination indicator (dot indicator) at the bottom, how would keep track of what screen you are currently on in order to update which screen is currently showing? :)
Anyone having this error? At 35:00, when translateX: multiply(x, -1) I get: Exception in HostFunction: Malformed calls from JS: field sizes are different.
Thanks for video! Just have a question. How can I get current index of ScrollView element when i using const { scrollHandler, x } = useScrollHandler();???
Hello William, I am stuck at react native redash issue :( could you please help ? I tried package downgrading ("react-native-reanimated": "1.9.0", "react-native-redash": "14.2.1") and neither this worked Try this import { useValue, interpolateColor, onScrollEvent } from "react-native-redash/lib/module/v1"; 🙏requesting you to please help
Awesome series Wlliam. Just want to point out one thing i.e. the curve after first screen is missing. If it's fixed in future videos than ignore this comment please. Really appreciate your efforts. Thanks for making such a great series. I'm going very slow with lectures but I'm learned a lot in first 3 videos.
some one have problems with the LoadAssets.tsx in [Font.loadAsync(fonts), ...assets.map((asset) => Asset.loadAsync(asset))], () => setReady(true). the error say : Type 'Promise' is not assignable to type 'Promise'. Type 'Asset[]' is not assignable to type 'void | void[]'. Type 'Asset[]' is not assignable to type 'void[]'. Type 'Asset' is not assignable to type 'void'. and problems with the react react-native-redash 😪
Hey william am getting this error when trying to implement the transtions Module '"../../../node_modules/react-native-redash/lib/typescript"' has no exported member 'useValue' useValue and onScrollEvent are not exported from react-native-redash
Bro I have created a app with onboarding screen and when I log out on first installation it crash but after words it's work perfectly. On first installation in log out I clear context which leads to the error and shows that previous stack is null while cleaning up in log out. But on second launch after wards it's work as normal on log out it come back to log in screen why it occurs?
Hello, I need a flat list with optimization for the contact list. could you create a video for this? I didn't find a single thing on this. I have tried all the given solutions on the internet and perform all the optimization.
Hi man, import { onScrollEvent, useValue } from "react-native-redash"; const x = useValue(0); const onScroll = onScrollEvent({ x }); const backgroundColor = interpolateColor(x, { inputRange: [0, width, width * 2, width * 3], outputRange: ["#BFEAF5", "#BEECCA", "#FFE4DG", "FFDDDD"] }); Module '"react-native-redash"' has no exported member 'onScrollEvent'. react-native-reanimated.d.ts(476, 7): An argument for 'outputRange' was not provided. I am facing issue above Please help
hi, thanks for these great videos. I have a question . why the expo react native app minmum apk size is 40 MB. is there are any solution to reduce the size.
Thank you for this series! I am really loving it. As a new RN developer I am looking foward for the next episodes. By the way, what is the name of that plugin that highlights the values for hexadecimal colors?
After removing backgroundColor: 'cyan' and implementing the backgroundAnimation with interpolateColor. All my backgrounds are white. How can I fix this ?
Try this import { useValue, interpolateColor, onScrollEvent } from "react-native-redash/lib/module/v1"; it worked for me instead of using react-native-redash. Hope it helps
Please look at the v1 instructions: github.com/wcandillon/react-native-redash#%EF%B8%8F-v1-users-%EF%B8%8F We will update the project to v2 with SDK 39 in the next video.
@@wcandillon please I don't still understand, how do I get the useValue and other functionality from this version (15.4.0) I have installed v1 still the same error, how I get over the error please
@@stancobridge its funny how I was stopped by error and found you with same exact queries also there is issue with "onScroll , onScrollEvent, interpolateColor
Suggestion: 'Optional chaining' can be a nice feature when using refs. i.e. ``` scroll.current?.getNode().scrollTo({ x: width * (index + 1), animated: true }); ``` instead of wrapping it in a if-statement. Read more: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
@@yoyo26-34 the x is not a primitive, but Animated value (from react-native-reanimated), therefore he has to use the multiply function from the reanimated library.
Use these imports at below guys for problem at minute 20:00
onscrollEvent,useValue etc
It worked for me hope it helps.
----------IMPORTS----------
import Animated from "react-native-reanimated";
import {
useValue,
interpolateColor,
onScrollEvent,
} from "react-native-redash/lib/module/v1";
Valeu, me ajudou bastante!
react native developers are blessed to have you on board. thank you bro
Really like the new concept, using a design from Figma and making it a reality, combining more real life application with beautiful animations 👍 keep on the great work!
Thanks for making me feel bad. RN developer for 3 years and I can't even center things without stackoverflow.
Looooool
Dude, same!
🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣
hahaha the harsh reality
i feel the same. he is just so good.
I just love how you animate things without relying on slider components. I'm working on a react-native app and every time we need to use a slider we just go and install a slider component :( And we are lacking so many animations. Thanks to your course I hope to be able to add some more life to the app :) Thank you for the great content.
For the people who are having problems with Animated, background colors missing, and so on, it is necessary to use old versions of some libs like "react-native-reanimated": "1.9.0", "react-native-redash": "14.2.1". When you get a white background, don't forget to add # before the color name.
every every second shows your struggle towards your field..a lot of learning behind every concept..knows exactly what he is doing ..
Nice background music! very relaxing! Thank you very much for your hard work, William!
You can rename the fonts to ”bold” ”normal” and ”regular” to avoid always going back to the app.js. Great job btw
One of the best tutorial for react native and animations I have found till now great work William 👍🏻
17:20 I am sorry, but I could not find a solution. I get this error when using onScroll: "this.props.onScroll" is not a function". How do I fix this easily?
UPD: I fixed this by deleting "Animated" from react-native and adding it to react-native-reanimated, hope it helps!
@@someuser257 just move "Animated" from react-native to react-native-reanimated ??that's not working on me
sorry ma bad, I'm using {} before, thanks bro
you are indeed the most perfect with animations.
i havent seen such varieties of animations and gestures tutorials in any other channel.
thanks for making such free stuff for us 🥳
excellent! Developing now for more than 3 years and I'm surprised that I learned something new. I like your code styling and the calm approach to solve problems! Keep on.
Awesome this is the best series for RN!! One thing I noticed is if I swipe fast sometimes it swipes two slides at once. Also, each screen has a border-radius of 75 in start and end but in your video, it shows only in the first. Can't wait for next episode :D
Is there anyone has issue with 35:13? I am using android and when I add transform: [{transformX: multiply(x,-1) },] the footer doesn't move along with slide. Any suggestions would be appreciated. Got stuck at that point for a long time now.
I think it might be fixed in later videos, it tooks us a while to get it working 😅I tested it on Android and it worked well
@@wcandillon Thank you very much for your reply!
@@wcandillon any reason why we don't add the footer in the Slide component, so each slide had both top and footer part and both slide together by the scrollview
I smile while watching you Code.
Is there any particular benefit of setting defaultProps on component at 38:32 in place of marking variant as optional in props and using default value when destructuring props, like so: ({ variant = "default", label }: ButtonProps) => {} ?
Guilty of liking the video and watching after that.but never regretted .Thanks a bunch.
Thanks for this incredible series - very inspiring!
I wish I could follow along, but can't figure out the right redash / reanimated import...
Love it, just one thing, why the other screens excepts the first one does not have the borderTopLeftRadius of footer?
Because the outside container stretches to full width and that’s the one holding the radius. You basically just need to apply the border radius onto the inner container
Where did you get the background instrumentals they are so cool
Hello, could you explain please why we use i * width instead of just i in input range? 22:30
the border top radius is applied just in the first slide. In your mockup is applied in all the slides.
After adding translateX:multiply(X,-1) to SubSlide container broke this
I really like the UI you have choose!
Thank so much!
Hi William, really like your video. Can you please also do a video for what VS code extensions do you use? And walk through the key features of them? Thanks
Already loving this series! Keep it up!
Hi all,
I'm stuck in a strange bug at 20:50, just after removing backgroundColor: 'cyan' and implementing the backgroundAnimation with interpolateColor. All my backgrounds are white... Does someone have this problem too ? i'll appreciate some help, I really want to continue this tutorial.
Thanks for your time
same
@@ogulcankarayel5625 please let me know if you find a solution. i can share my code if needed. but i really want to finish this tutorial
@@martins.8401 Yeah me too. Also I've been getting onScroll error
I had this problem too. i made an issue on github. Tell me if you need more details : github.com/wcandillon/react-native-redash/issues/302#issuecomment-657208057
@@martins.8401 Many thanks to you. Have you figured the backgrandColor issue out ?
This is sooo good, exactly what I was searching for, I learn a lot of things from this
I really enjoy watching this and also love ❤️ the background music 🎶
Beautiful slider!!!!! Nice
Hey William!
Why you don't create a package or separete component with this slider.
I'm planning an app and I'd like to use it :D
It works perfectly !! Keep doing the great work
hello William, say you have a pagination indicator (dot indicator) at the bottom, how would keep track of what screen you are currently on in order to update which screen is currently showing? :)
Anyone having this error? At 35:00, when translateX: multiply(x, -1) I get:
Exception in HostFunction: Malformed calls from JS: field sizes are different.
be sure to => import Animated from "react-native-reanimated"
@@kareemarafa Thank you so much! This was the problem.
quick question, I'm trying to write along with you, and useValue doesn't exist in the modern redash library, what can I do instead?
Oh so is not just me, you also have the bug on vscode adding a double comma on save.
I have a question, any reason you don't use React.FC?
Awesome video as per usual William. Have you been tempted to use styled-components?
I love this series.
Hi William, have you ever thought of using "Styled Components" for styling your React Native Components?
I would probably keep all the moving content inside.1 Slide component, but either way it's an awesome tutorial!
Thanks for video! Just have a question. How can I get current index of ScrollView element when i using const { scrollHandler, x } = useScrollHandler();???
Been waiting for this all day mannn 😆 first viewww
Thank you, William. Love your content
to bring the setting sheet in the simulator , i think you can press cmd + r
Great! What about footer borders on scrolling? The first page looks good but it does disappear on scrolling to next pages
Hi William, can you please make it bouncing when swiping to left on the first slide or swiping to the right on the last slide.
Hello William, I am stuck at react native redash issue :( could you please help ? I tried package downgrading ("react-native-reanimated": "1.9.0", "react-native-redash": "14.2.1") and neither this worked Try this import { useValue, interpolateColor, onScrollEvent } from "react-native-redash/lib/module/v1"; 🙏requesting you to please help
Hi Sir, i cannot find useValue anymore from 'react-native-redash' :(
same here, was paused at that level, even useScrollEvent
@@stancobridge same here I tried useValue from react-native-reanimation instead but now useScrollEvent is creating unresolved errors 😅
same here, someone can solve?
@@juanignacio383 use this
import {
useValue
} from "react-native-redash/lib/module/v1";
@@juanignacio383 I mentioned it a week ago haven't you check the comment section 😅😅
the variable backgroundColor error: Type 'AnimatedNode' is not assignable to type 'false. Help? The screen is all white.
Awesome series Wlliam. Just want to point out one thing i.e. the curve after first screen is missing. If it's fixed in future videos than ignore this comment please.
Really appreciate your efforts. Thanks for making such a great series. I'm going very slow with lectures but I'm learned a lot in first 3 videos.
some one have problems with the LoadAssets.tsx in [Font.loadAsync(fonts), ...assets.map((asset) => Asset.loadAsync(asset))],
() => setReady(true).
the error say : Type 'Promise' is not assignable to type 'Promise'.
Type 'Asset[]' is not assignable to type 'void | void[]'.
Type 'Asset[]' is not assignable to type 'void[]'.
Type 'Asset' is not assignable to type 'void'.
and problems with the react react-native-redash 😪
i cant get the redash bit to work especially "useValue()"...seems its been updated
Hey william am getting this error when trying to implement the transtions Module '"../../../node_modules/react-native-redash/lib/typescript"' has no exported member 'useValue'
useValue and onScrollEvent are not exported from react-native-redash
Bro I have created a app with onboarding screen and when I log out on first installation it crash but after words it's work perfectly. On first installation in log out I clear context which leads to the error and shows that previous stack is null while cleaning up in log out. But on second launch after wards it's work as normal on log out it come back to log in screen why it occurs?
Hello, I need a flat list with optimization for the contact list. could you create a video for this? I didn't find a single thing on this. I have tried all the given solutions on the internet and perform all the optimization.
Still don't know how multiply(x, -1) worked actully - can anyone explain ??
Did you fix it ?
regard to the animated.view , it is not working for me ,
Hi, interpolation doesnt work with Reanimated 2, is there any workaround?
Hi William, do you know a way to use `styled-components/native` with `Animated` ?
King of ReactNative
Can you pls do calendar like in Microsoft teams in react native??
Hi man,
import { onScrollEvent, useValue } from "react-native-redash";
const x = useValue(0);
const onScroll = onScrollEvent({ x });
const backgroundColor = interpolateColor(x, {
inputRange: [0, width, width * 2, width * 3],
outputRange: ["#BFEAF5", "#BEECCA", "#FFE4DG", "FFDDDD"]
});
Module '"react-native-redash"' has no exported member 'onScrollEvent'.
react-native-reanimated.d.ts(476, 7): An argument for 'outputRange' was not provided.
I am facing issue above Please help
hi, thanks for these great videos. I have a question . why the expo react native app minmum apk size is 40 MB. is there are any solution to reduce the size.
Hello william, please how can I get the images you used on the sliders
@William , what is setting of your vscode. It shows all autocomplete behaviour.
Great content. Thank you William
Hi bro can u please help me out that I am not able to use "react-native-redash" without this I am not able to use useValue and onScrollEvent
Thank you for this series! I am really loving it. As a new RN developer I am looking foward for the next episodes. By the way, what is the name of that plugin that highlights the values for hexadecimal colors?
My guess is Color Highlight by Sergii Naumov
Why don't you use styled-components?
can you tell me what tool snippets did you use, thank you
Thanks for everything. Good job
After removing backgroundColor: 'cyan' and implementing the backgroundAnimation with interpolateColor. All my backgrounds are white. How can I fix this ?
{...scrollHandler} instead of {...{scrollHandler} } is the case
@@ogulcankarayel5625 where should do the change?
did you find answer?
redash api's are working
or updated correct me if wrong
I sometimes confused how to translate your typescript into normal javascript 😔
Where can I have the link of the background songs?
I am not able to use useValue with react-native-redash.
I can't say I'm a react native developper after watching your videos
I was trying this in javascript way but i stucked on redash..is there another way
how i can remove the slider for one use
BackgroundColor thing doesn't work anymore :(
Amazing! I thought it was going to be a weekly video.
getting error on {useValue} while importing
What font do you use in vscode?
Awesome, really appreciated video
Name of closing song?
How to change the color of Statusbar in Android with respect to the theme's color
Great work!
can you share your git repository?
You make it look so easy... ;)
btw @william what do keep drinking. :P
Try this import { useValue, interpolateColor, onScrollEvent } from "react-native-redash/lib/module/v1"; it worked for me instead of using react-native-redash. Hope it helps
this worked for me too.. thanks
Keep up the good work 👍👍
great work.
Thanks, William!
useValue no more in redas, please how do I get over this
Please look at the v1 instructions: github.com/wcandillon/react-native-redash#%EF%B8%8F-v1-users-%EF%B8%8F
We will update the project to v2 with SDK 39 in the next video.
Thanks a bunch let me take a look
So I have to do mix.useValue(0)
@@wcandillon please I don't still understand, how do I get the useValue and other functionality from this version (15.4.0) I have installed v1 still the same error, how I get over the error please
@@stancobridge its funny how I was stopped by error and found you with same exact queries also there is issue with "onScroll , onScrollEvent, interpolateColor
I'm here for the fast forward music XD
Здарова, ты там рассол пьешь?)
Suggestion: 'Optional chaining' can be a nice feature when using refs. i.e.
```
scroll.current?.getNode().scrollTo({ x: width * (index + 1), animated: true });
```
instead of wrapping it in a if-statement.
Read more:
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
Please share git if possible
how multiply(x, -1) worked ?
Because 'x' offset is positive, and translation on x axis would be negative
German Alzate make sense. Thanks
@@reactnativeandexpo but why just not using x*1 ? what is the point of using the multiply function?
@@yoyo26-34 if you multiply any number by - 1 you switch the sign (from negative to positive and vice versa)
@@yoyo26-34 the x is not a primitive, but Animated value (from react-native-reanimated), therefore he has to use the multiply function from the reanimated library.
Nice one.