So I Built my own React Native Button

I didn’t want to install a whole UI library

Button

I needed a simple button and don’t want to go over the hassle of installing a whole new UI library to just do that. Just a simple flat button with rounded corners. sleek. And maybe an outlined one too.

Don’t want to go over full article here is the whole source code for you Button.js

So what we need

1. TouchableOpacity
2. View

We need TouchableOpacity so we can pass button onPress callback to call once touched. We need a View to render the children passed and we will be styling this View to be our button.

Let’s define some defaults style for our button

Now let’s jump in and write some code for our Button

We imported View & TouchableOpacity from react-native. We created our Button component. Right now, it only takes a children prop nothing else. Inside the render, we are storing our defaultStyle in inlineStyle and passing it to our View which will make our View looks like a button.

The reason we are doing this is we will be adding different types of styles to the button for e.g rounded, outlined etc.

Let’s modify our component to receive two new props rounded and outlined

We passed two new props now rounded & outlined. We converted inlineStyle to an array to hold multiple styles at once.

In line 22 we are appending our default style for Button. We put checks for both rounded and outlined props if present their corresponding style will be appended to inlineStyle and then will be applied to our button View.

Now we need style which will make our button rounded or outlined

Now we have one new property added borderColor which will control the color of the border when an outlined button will be rendered. We have new roundBorder and outlined style.

roundBorder just set a border radius so Button will look rounded from the edges. outlined sets the background color to transparent and border width to 1 to make the Button look like an outlined button with a transparent background.

This button will not be of a good use if our user can’t modify the default styles given to the button.

Let’s define a new prop customStyle which will be directly passed to our View

We added a new prop customStyle if the customStyle is present we will append it the style which will be going to pass to our View.

Using customeStyle we can overwrite the default style and also added new ones.

The last thing remaining is onPress callback which will be called when user will tap on the button. Just to be sure that we can use all of the props which can be used with TouchableOpacity we will store all other props in restProps variable and then pass it to our TouchableOpacity

We store all other props which can be passed to our Button ( for e.g onPress , onFocus etc ) inside restProps and then pass restProps to TouchableOpacity so automatically onPress will be passed with other props.

That’s it

You can find the whole source code of this Button component here. The inspiration to create my own Button component was to avoid installing UI libraries to react-native. I prefer more from scratch approach. Fewer dependencies lead to better management of the project in the future.

Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follow me at Twitter or Medium.

I am available to give a public talk or for a meetup hit me up at justanothermanoj@gmail.com if you want to meet me.

Really loved this article ?

Please subscribe to my blog. You will receive articles like this one directly in your Inbox frequently.

Here are more articles for you.

1. Throttle function in javascript with the example
2. React Context API Explained
3. Introduction to Haskell Ranges
4. HOC ( Higher-order components ) in ReactJS explained

Peace.