Creating a React Native Custom Button

I was searching for many button where we can customized it but does not match the desired result so now we will create custom button so follow me.

First, you have to install the packages in the react native command prompt

Styled Component

styled-component is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS using a technique called CSS-in-JS.

npm install --save styled-components

Refer this blog for styled-components:

https://rossbulat.medium.com/how-to-use-styled-components-in-react-native-3543c97cb485

Vector Icons

React Native Vector Icon allows you to customize every icon for your app. You can change its color, size, position, multiple styling, etc. These icons can be placed anywhere in the react app and configured for a certain task.Vector icons are much convenient when you have to reduce the space occupied.

Refer this blog for Icons:

https://dev.to/quikieapps/react-native-vector-icons-quikieapps-oni

For, icons install

npm install react-native-vector-icons --save

Now, you have to create a file naming CustomButton.js for writing the code for customizing button and then import the libraries

Then, you have to create a function and pass the props into it under it define the variables by using let the button as shown below.

Now, you have return the variables assign in curly braces {} and if you want to convert a button to clickable use onPress where a condition is given if the button is clicked then the opacity of the wrapped view is decreased, dimming it. And, same assign the rest of the variables for the icon and text and give the condition using ternary operator.

The iconNameLeft means the icon will be placed on the left side and iconNameRight means the icon will be placed on the right side and text can be placed on left and right.

In, the iconNameLeft you have to give the properties of the icon and later on you can just write the property name and value that changes the icon design which will be explained later, so keep calm and wait as we go on further.

Now, we have to create a custom component of a button by using styled component and assign the variables of the properties you have written. The or condition given in the assign item is because you have to give the default value for every property written if you have not given your own values for the button.The below props is coming from the above const CustomButton.

Now, we have to import the CustomButton to access all the properties we have written. In, the App.js write the import statement.

First, importing the CustomButton

Then, you have to create a function and open the CustomButton tag and write the properties and their values of the button you want to create as per your desired customized button.

You can refer to my full source code here

So, Now you are ready to make your own custom button🤗.