React Native tutorial: Making skeuomorphic smooth button!
Tags: reactnative, tutorial, tmux, vim
Published: 2020-02-13 13:37:56


Hi, it’s [Takuya](https://twitter.com/inkdrop_app). 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 :)

{% youtube 9It1KchDkCo %}

#### 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](https://www.youtube.com/watch?v=sSOfr2MtRU8).
Check it out if you haven’t watched yet.

I’m developing an app called [Inkdrop](https://inkdrop.app/), 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.

![[Inkdrop for mobile](https://inkdrop.app/) built with React Native](https://cdn-images-1.medium.com/max/6896/1*ZMyl3w-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.

![skeuomorphic design by Alexander Plyuto](https://cdn-images-1.medium.com/max/6400/1*MP1JAecgDLH25G9s7mCjoA.png)

![skeuomorphic design by Alexander Plyuto](https://cdn-images-1.medium.com/max/6400/1*-zD3d3spj2IlZmajOhzAfA.png)

Michal Malewicz calls it ‘_Neumorphism’_ which means new skeuomorphism.

![[https://neumorphism.io/](https://neumorphism.io/#55b9f3)](https://cdn-images-1.medium.com/max/6268/1*ArtPzCLWzLMnxUIoY39NvQ.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.

![](https://cdn-images-1.medium.com/max/4006/0*C53J2rlFMw7COo3E)

![](https://cdn-images-1.medium.com/max/5382/1*2l7erkqRnUbVbS6uVR8RFA.png)

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:

{% github craftzdog/react-native-skeuomorphism-ui-example %}

## Follow me online

- [Twitter](https://twitter.com/inkdrop_app)
- [Instagram](https://instagram.com/craftzdog)

[![](https://cdn-images-1.medium.com/max/3000/1*Qu0SaHaerZEXEkcehN9EHg.png)](https://inkdrop.app/)

[![](https://cdn-images-1.medium.com/max/2372/1*-J5tp1_lulY9QknoLEv6zA.png)](http://eepurl.com/dNgJo6)

[![](https://cdn-images-1.medium.com/max/3000/1*r-daItizHpAU-fQZk3ISag.png)](https://www.youtube.com/c/devaslife)