Hi, it’s Takuya. New video is out on YouTube. It presents how I usually code React Native apps with vim and tmux setup by building a skeuomorphic button from scratch.
I hope you will find it helpful for your happy programming life :)
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.
 built with React Native](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F6896%2F1%2AZMyl3w-C_5hYI024fTxx7g.png)
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 looks like many people felt the same.
Michal Malewicz calls it ‘Neumorphism’ which means new skeuomorphism.
](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F6268%2F1%2AArtPzCLWzLMnxUIoY39NvQ.png)
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:
craftzdog
/
react-native-skeuomorphism-ui-example
Neo-skeuomorphism style UI Example for React Native
Neo-skeuomorphism style UI Example for React Native
It is a React Native implementation of the skeuomorphic button. Inspired by the fantastic work done by Alexander Plyuto on Dribbble.
Follow me online
Top comments (5)
Cool vid!
My MacBook Pro 13 inch display can't render editor string human readable size.(this is all coding video problem not your fault)
But 5K 27 Inch external display render pretty well, I could easy to follow exercise!
Do you have any blog post, video content etc that useful reference of record or live stream coding video?
Yeah, that's hard to show actual coding process unlike any other teaching vids.
I use only QuickTime Player to record the screencasts at the moment.
Holy shit, I underestimated the QuickTime Player...
Thank you!
No, it doesn't work unfortunately. Actually I didn't know that and assumed it works on Android as well