Neumorphism in React Native
Вставка
- Опубліковано 28 чер 2024
- Source code: github.com/Shopify/react-nati...
Learn React Native Gestures and Animations at start-react-native.dev/
Chapters:
0:00 Intro
1:18 Button
18:06 Switch
24:49 Progress Bar - Наука та технологія
I will match donations to any organization helping Ukraine up to 5K USD. Send an email to wcandillon@gmail.com with a proof of donating to any legit org helping Ukraine (examples: facebook.com/fundraisers/explore/search/charities/?query=ukraine) and the equal amount will be donated Unicef (www.unicef.org/ukraine/en).
It's criminal that you don't have more subscribers. Your content is incredible and the way you can build beautiful animations whilst writing extremely clean code is so cool!
Thank you for the kind words Niall, you've made my day 🙌🏼
unbelievable, i really don't know how to appreciate what you've done with react-native-skia🙏
Great Content William, love the UI/UX! - Keep up the Good Work! 💪
let's go 🙌🏼
Thank you for the work you guys do 🙏🏻 this is so exciting and can’t wait to use it when expo upgrades RN in SDK 45!
Came here from the Codecademy React Native course. I love your videos, this content is gold 👏
While working through your videos to learn skia, I got a whole new apreciation for proper naming conventions, and what not to do in order to make code maintainable. Kidding aside, thanks for the work you do and making a lot of things a lot easier with the SKIA library.
Thanks for you Skia instructional video! Good teacher!
Nice job on expanding react native borders 👌❤
I love this... Hoping to start using this for react native animations
Just wow!!!! Good job! thanks a lot
Great to have you on react native in community
This is actually insane
Amazing work broo loving this lib so much
@@muhammadmehdi1304 wtf
Skia is the future! Will is becoming a React Native prophet.
Any plans on creating/adding a skia course? (possibly to the existing start-react-native as a separate module?) This looks awesome
Why do you need to wait?
HI, Nice work man. thanks for the video.
can you tell what is the VScode theme you are using?
This is amaaaazing!!!!!
ur a legend
How to handle the position of the text when the width change dynamically to maintain the text center?
When I wrap these two rounded rectangles in FitBox at 4:50 , they don't appear on screen , but when I wrap them in Group they are appearing, please helpp @William Candillon ..
could it be because the fitbox properties are wrong? Which version of Skia are you using? We had a regression with this which has been fixed. The best place is to file a github issue with a small reproducable example
@@wcandillon Thanks for reply. I am using skia version 0.1.125 and I don't think fitbox properties are wrong, because I followed your tutorial , I just wrote the exact same code till 4:50 of your video, the rounded rectangles are appearing on screen when they are wrapped inside Group, but when I use Fitbox, nothing appears on screen. I am testing on an android device btw.
Hi William. You inspired me to start my own UA-cam channel on React Native animations. I'd like to collaborate with you and post a video on your channel about a cool animation. What do you think?
Is there any reason why this measureText function is not avialable in the latest release of this library?
When's the course coming?
May u start the react native redash tuturial ,kindly !
Amazing 🔥
neumorphism is insanely underrated, i can't believe just a few apps use this, glassmorphism is also underrated these days
Because it isn't accessible. The subtly of it makes it hard on people with low vision or cognitive disabilities, and even non-disabled users can have a hard time discerning between interactive and non-interactive UI, since everything looks the same.
@@dealloc i didn't think about the ux, i guess you have a point
@@dealloc not exactly. A bad code can result in a bad ux for these people, not this great UI. Flat was made to optimize the low-res displays that do not exist anymore, so we do not have any reason to keep flat as a standard.
Is there a neumorphism library that passes accessibility tests?
I doubt it, since the style is very much hard on the eyes for with low vision. Then there's the fact that everything has the same or very similar style. For example buttons typically end up looking the same as a non-interactive panel with content. It makes it difficult to discern what is interactive, and how to distinguish these interaction.
As William said, use it sparingly. Don't make it the identity of your brand, product or app.
its very good tutorial but sadly shadows don't work well with android. Can you also do it an android tutorial with react native?
boxShadow don't work on my project ? Why ? I don't working shadow for Neumorphism with many librairy.
Could it be because of these issues: github.com/Shopify/react-native-skia/issues/1188 github.com/Shopify/react-native-skia/issues/1194 We are working on fixes these but please comment directly on the issue if you are affected by it. It will allow you to know when a fix for it is available.
@@wcandillon check ! Thank !
Which vs code theme is this ????
Let me know if you find out 😬
I want to know too
I like React Native Skia as a drawing library. But my concern is that it doesn't provide accessibility. I couldn't find any resources on the subject for Skia, which is not surprising to me, since it's not a UI library.
Do you happen to have any insight in how accessibility could be achieved and if it may have a negative impact on user experience?
please compress video by expo
Vscode theme?
marketplace.visualstudio.com/items?itemName=pmndrs.pmndrs
Imagine the next facebook competitor using this and knocking out fb with its own RN framework on steroids 🤣
measureText was so much easier, i'm trying to get both width and height but i can't
When Bogdanoff does a tutorial.
Hello pourquoi tu fais pas tes video en francais ?
Tu toucherai une grand communauté aussi
La plupart des devs maîtrisent l'anglais. La plupart des devs ne maîtrisent pas le français.