Back to Browse

How to create beautiful glowing components on React Native 0.76+

78.6K views
Dec 28, 2024
1:09:45

▶ Looking for a Markdown note-taking app? Check out my app Inkdrop https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=Ecq2kcubTnY ▶ Source code https://github.com/craftzdog/react-native-beautiful-glowing-components-example ▶ Article version https://www.devas.life/how-to-create-beautiful-glowing-components-on-react-native-0-76/ Info ▶ My equipment http://uses.craftz.dog/ ▶ My dotfiles https://github.com/craftzdog/dotfiles-public ▶ My wallpaper packs are now available🥳 Check out serene imagery from my coding tutorials here: https://www.craftz.dog/wallpapers Follow me online here: ▶ Subscribe to my newsletter https://www.devas.life/ ▶ 𝕏 https://x.com/inkdrop_app ▶ Instagram https://instagram.com/craftzdog ▶ My second channel https://www.youtube.com/@craftzdog 00:00 Intro 01:17 Creare a new expo app 03:45 Install dependencies 05:13 Clean up screens 07:16 Create a glaring segment component 11:39 Add styles 13:10 Add an additional border using box shadow 14:11 Add footer and blue bloom 17:57 Add blooms 22:38 Gradient Button 28:19 Add shadows 29:33 Add an inset shadow 31:22 Add a gradient 35:43 Resize the gradient to fit to the button size 38:27 Handle press state 40:15 Duplicate the glowing button component 42:03 Fix the button styles 43:52 Make space for adding a glow effect 45:14 Inner reflection effect 52:20 Spin the reflection effect 53:45 Outer glow effect 58:59 Make the glow effect spin 01:01:12 Add text 01:02:21 Add form inputs 01:05:30 Animate form 01:08:53 Demo

Download

0 formats

No download links available.

How to create beautiful glowing components on React Native 0.76+ | NatokHD