#2 Slider - React Native Fashion
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- In this series, we are building a React Native App from 0 to 1.
The source code is available via the Start React Native Subscription at start-react-native.dev.
The app is based on the Outfitr - Fashion UI Kit from Flexin Studio (gumroad.com/l/sfEm)
Are you sometimes asking yourself, "Can it be done in React Native"? Send me your suggestions at wcandillon@gmail.com
VSCode theme: Palenight Operator - วิทยาศาสตร์และเทคโนโลยี
react native developers are blessed to have you on board. thank you bro
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.
Nice background music! very relaxing! Thank you very much for your hard work, William!
One of the best tutorial for react native and animations I have found till now great work William 👍🏻
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!
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.
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!
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.
every every second shows your struggle towards your field..a lot of learning behind every concept..knows exactly what he is doing ..
I really like the UI you have choose!
Thank so much!
Already loving this series! Keep it up!
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
I really enjoy watching this and also love ❤️ the background music 🎶
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.
Guilty of liking the video and watching after that.but never regretted .Thanks a bunch.
I smile while watching you Code.
I love this series.
You can rename the fonts to ”bold” ”normal” and ”regular” to avoid always going back to the app.js. Great job btw
This is sooo good, exactly what I was searching for, I learn a lot of things from this
It works perfectly !! Keep doing the great work
Thank you, William. Love your content
Thanks for everything. Good job
Great content. Thank you William
Thanks for this incredible series - very inspiring!
I wish I could follow along, but can't figure out the right redash / reanimated import...
King of ReactNative
Great work!
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
Awesome, really appreciated video
Thanks, William!
great work.
Awesome video as per usual William. Have you been tempted to use styled-components?
Been waiting for this all day mannn 😆 first viewww
Amazing! I thought it was going to be a weekly video.
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
Hi William, have you ever thought of using "Styled Components" for styling your React Native Components?
Keep up the good work 👍👍
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
You make it look so easy... ;)
to bring the setting sheet in the simulator , i think you can press cmd + r
I would probably keep all the moving content inside.1 Slide component, but either way it's an awesome tutorial!
Where did you get the background instrumentals they are so cool
Great! What about footer borders on scrolling? The first page looks good but it does disappear on scrolling to next pages
Thank you so much!
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) => {} ?
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
Thanks for video! Just have a question. How can I get current index of ScrollView element when i using const { scrollHandler, x } = useScrollHandler();???
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.
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.
Amazing !!!
Great! Amazing
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.
Awesome!
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? :)
Nice one.
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
Nice! Thanks
Hi William, do you know a way to use `styled-components/native` with `Animated` ?
You’re so good men
amazing
Thank you
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?
Hello, could you explain please why we use i * width instead of just i in input range? 22:30
can you tell me what tool snippets did you use, thank you
@William , what is setting of your vscode. It shows all autocomplete behaviour.
thank you willy can
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.
Sensacional !
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
I can't say I'm a react native developper after watching your videos
Hello william, please how can I get the images you used on the sliders
Where can I have the link of the background songs?
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?
i cant get the redash bit to work especially "useValue()"...seems its been updated
the variable backgroundColor error: Type 'AnimatedNode' is not assignable to type 'false. Help? The screen is all white.
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?
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'm here for the fast forward music XD
Hi, interpolation doesnt work with Reanimated 2, is there any workaround?
🙏🏽 very nice, thnx
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
What font do you use in vscode?
what font do you use in Vscode?
Can you pls do calendar like in Microsoft teams in react native??
regard to the animated.view , it is not working for me ,
Great 👍🏻👍👍
I am not able to use useValue with react-native-redash.
How to change the color of Statusbar in Android with respect to the theme's color
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
Still don't know how multiply(x, -1) worked actully - can anyone explain ??
Did you fix it ?
I was trying this in javascript way but i stucked on redash..is there another way
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
Why don't you use styled-components?
Name of closing song?
BackgroundColor thing doesn't work anymore :(
how i can remove the slider for one use
I sometimes confused how to translate your typescript into normal javascript 😔
redash api's are working
or updated correct me if wrong
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
can you share your git repository?