React Native tutorial: Making skeuomorphic smooth button!
Hi, it’s Takuya. New video is out on YouTube.
Hi, it’s Takuya. New video is out on YouTube.
Timeline
0:22 Intro
1:33 What you will learn from this video
2:12 Let the hacking begin!
7:07 Import Neumorphism CSS to RN
8:04 Make a typo and fix it
8:57 Build background view, get a strange result and fix it
10:42 Button does look weird…
11:37 Search for how to implement event handling of the button
14:43 Google how to add linear gradients
15:19 Struggle to install react-native-linear-gradient
17:30 Struggle to understand how to add an angle to the gradient
19:59 It looks great!
20:53 Wrap up
I love skeuomorphic UI
In this video, I’m gonna show you my development workflow for building React Native apps. I posted a video about my tmux and vim setup before.
Check it out if you haven’t watched yet.
I’m developing an app called Inkdrop, a Markdown note-taking app that helps organize your Markdown notes across devices. I also built the mobile version with React Native which lets you build an app that runs on iOS and Android. As you can see, it works very smoothly like a native app. It’s very easy to make it support both iOS and Android.
So, I’d like to show you how I usually code react native apps with vim and tmux setup. As an exmaple, let’s make a simple soft looking button.
I personally love skeuomorphic UI. It was very popular GUI design taste until 2013. Interface objects of Skeuomorphism mimic real-world counterparts in how they appear and/or how the user can interact with them. And recently, I found a great skeuomorphic design by Alexander Plyuto. He suggested a vision what applications would look like, if we live in a dimension where skeuomorph is still alive and continued its evolution in mobile interfaces.
I love it. And many people felt the same.
Michal Malewicz calls it ‘Neumorphism’ which means new skeuomorphism.
He also made a website which allows you to generate a CSS code for building soft UI. In this video, I’m gonna build it on React Native. And here is the end result.
Cool, right? It took about 40 minutes to build. What I’d like to show you in this video is not just about how to build but also how to find a way to build. So it will be my process on building things while making some mistakes, struggling with errors, searching for a hint on google, and solving them. Please copy and steal how I find a way to solve from it. I hope you enjoy it!
You can get my code on GitHub here:
