{"componentChunkName":"component---src-templates-blog-post-js","path":"/creating-custom-buttons-in-react-native","result":{"data":{"markdownRemark":{"id":"909fe9fc-9e82-5ca0-bf0a-ad4a82feda65","html":"

Introduction

\n

React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use React's framework along with native platform capabilities. React Native is one of the best platforms to create a cross-platform application that works on both Android as well as iOS. The core UI components in react native help us to speed up and scale up the development

\n

But.. this core UI element Looks different in a different platform as in android and iOS same goes with the Button component look different on each platform, and there are limited styling and customization options to these components. For this and many other reasons, it’s critical to know how to create buttons that look consistent regardless of the operating system.

\n

\n \n \n \n \n
Buttons in different OS
\n

\n

For a user interface to look seamless and the same on every platform it becomes very important to create our custom components. In this blog, we will be dealing with several methods to create our custom button.

\n\n\n

Setting Up

\n

Assuming you all guys know the basics of React and React-native let's get right into constructing custom buttons component in react-native.

\n

Start with setting up a general React native app by typing the following in the command prompt

\n\n
npm react-native init AviateButtonDemo
\n\n

Clear down the all default code written in the App.js and start with the fresh window. Then type the following to get the basic component of a button in react-native

\n\n
import React from \"react\";\nimport { View, Button, StyleSheet } from \"react-native\";\n\nconst App = () => {\n  return (\n    <View style={styles.Container}>\n      <Button title=\"Hii dev!\" />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  Container: {\n    flex: 1,\n    justifyContent: \"center\",\n    padding: 18\n  }\n});\n\nexport default App;
\n\n

In the above code, we have created a button that is the core UI component of the react-native which is wrapped inside the container which is the View component of the react-native. In react-native, we are provided with the Stylesheet where we can style our component we can say it comes as an analogy of CSS or abstraction to CSS stylesheets.

\n\n\n

The Custom Button Component

\n

As we have now done with the home page set up with the general button component and in this, you can see how it appears different on different OS. Now to cope up with this we will make our custom button which will be a functional component.

\n\n
const CustomButton = () => (\n   \n)
\n\n

Name the custom button as CustomButton

\n

As we are going to make a custom button so we will make use of the TouchableOpacity component to make a touchable component and manipulate it as we need so for this we will be required to import certain components which are

\n

<TouchableOpacity/> and we have to include <Text/>component to add text in it. So import them from react-native.

\n\n
 import { View, Button, StyleSheet, TouchableOpacity, Text } from \"react-native\";
\n\n

Now, let's code the custom button. In this, we need to add onPress to the TouchableOpacity and add the text we need to have on button.

\n\n
const CustomButton = ({ onPress, title }) => (\n  <TouchableOpacity onPress={onPress} style={styles.customButton}>\n    <Text style={styles.customButtonText}>{title}</Text>\n  </TouchableOpacity>\n);
\n\n

<TouchableOpacity/> this component provides a robust behavior of change in opacity while clicking or touching we can customize that too with its properties one such property is activeOpacity. So we can control opacity by bypassing this prop to the component. Similarly, we can add various props to these components as per our needs and customize them. Go through the doc of the same for more props and its feature.

\n\n
const CustomButton = ({ onPress, title }) => (\n  <TouchableOpacity\n    activeOpacity={0.6}\n    onPress={onPress}\n    style={styles.appButtonContainer}\n  >\n    <Text style={styles.appButtonText}>{title}</Text>\n  </TouchableOpacity>\n);
\n\n

Styling

\n

As our main motive is to make our UI consistent and seamless in both OS so let's start styling the custom button component.

\n\n
const styles = StyleSheet.create({\ncustomButton: {\n    elevation: 10,\n    backgroundColor: \"#FFFE00\",\n    borderRadius: 15,\n    paddingVertical: 10,\n    paddingHorizontal: 10 \n  },\n  customButtonText: {\n   fontSize: 25,\n    color: \"#000000\",\n    fontWeight: \"bold\",\n    alignSelf: \"center\",\n    \n  }\n});
\n\n

It should look some what like this

\n\n

\n \n \n \n \n
Demonstration on emulator
\n

\n\n

Wondering how to give gradient or another styling to our buttons! Here react-native has a solution to it. React-native provides a library that gives us the option to apply linear gradient as there is no by default API to include linear gradient in our button so we need to import the library for it of linear-gradient, do the following for importing the same

\n\n\n
npm i react-native-linear-gradient
\n\n\n

Now we have to import <LinearGradient/> library from react-native-linear-gradient

\n

We just need a little tweaking to our previous code in <CustomButton/> we have to wrap the <TouchableOpacity/> component by <LinearGradient/> and add some props to it. Basically, we will add color props to it which will define the gradient of the button. Basically, the color prop in LinearGradient accepts an array of colors through which a gradient is created.

\n
const CustomButton = ({ onPress, title }) => (\n  <TouchableOpacity onPress={onPress}>\n    <LinearGradient\n      colors={[\"#FFFE00\", \"#C5C417\"]}\n      style={styles.appButtonContainer}\n    >\n      <Text style={styles.appButtonText}>{title}</Text>\n    </LinearGradient>\n  </TouchableOpacity>\n);
\n

It should now look somewhat like this-

\n

\n \n \n \n \n
With gradient
\n

\n

Full Source code of the tutorial is here given below,

\n
import React from \"react\";\nimport { View, StyleSheet, TouchableOpacity, Text } from \"react-native\";\nimport LinearGradient from \"react-native-linear-gradient\";\n\nconst CustomButton = ({ onPress, title }) => (\n  <TouchableOpacity \n     onPress={onPress}\n    activeOpacity={0.6}>\n    <LinearGradient\n      colors={[\"#FFFE00\", \"C5C417\"]}\n      style={styles.customButton}\n    >\n      <Text style={styles.customButtonText}>{title}</Text>\n    </LinearGradient>\n  </TouchableOpacity>\n);\n\nconst App = () => {\n  return (\n    <View style={styles.screenContainer}>\n      < CustomButton title=\"Hi dev!\"  backgroundColor=\"#312D2D\" />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n\n  customButton: {\n      elevation: 10,\n      backgroundColor: \"#FFFE00\",\n      borderRadius: 15,\n      paddingVertical: 10,\n      paddingHorizontal: 10 \n    },\n    customButtonText: {\n     fontSize: 25,\n      color: \"#000000\",\n      fontWeight: \"bold\",\n      alignSelf: \"center\",\n      \n    }\n  });\n\nexport default App;
\n

Epilogue

\n

Here, I would like to conclude by just stating that as a developer it's our core responsibility to make the user interface look-alike irrespective of OS a user is using so this stands to be of utmost importance to have learned the process of making look button similar to each and every platform in react-native. There’s so much more you can do, but the steps in this blog will help you find your footing as you start creating custom UI components with React Native.

\n

Reach out to us on Twitter and Instagram where we try to provide more value in threads and carousal formats

\n

Thank You for your time

\n

Keep learning, Keep coding :)

\n","excerpt":"Introduction React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android…","frontmatter":{"date":"April 12, 2021","slug":"/creating-custom-buttons-in-react-native","title":"Creating Custom Buttons in React Native","description":"Creating a custom button gives you a great and seamlessly consistent UI irrespective of OS. This becomes of utmost importance to implement as the core UI button of react-native looks different in different OS.","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAACE4AAAhOAFFljFgAAACVElEQVQoz32S30uTURzGv+8i00hlP5rTSKcopt5kXRRUdFGxhCDxQroLojvvhC66sSAFt1CXWf0DUZGW5YxKoS5a3uiWls7NLWfLLaVpZZIU0aezvVYS1sWH55zD+z4833MemRoT1iM0qmvwhTDp/z+hUY2Q+m46YEf+ZfjLNBoQ4hFFWEgoTbxeg9rPqvPIK42g/7ehgfUIjRqUmYFH9wVXs9DeqrRFcF5Ygzq/dFEY8RqYnkgZFiOTvtXoSgM+XVOMDwuxkNB8TthWIBTbhXybYDHrmE2C1SpU7NC45hZ8XiE8Xogk4w7ezx4mmahh8d1xFhLHSMaPMh9zsLywj7ZWo/6zRdheZmRnfS2Vjv1p8zxlWFQodF83KsMcgmPVCPTwdbmJpeQpvnxqZGXpDN9XnPCjG3DR5a7ArBLZtgpVNQc55OzkwNkm7JV5WM168qGn5XycqyQedSCfF07zYb6exbk6lbA2rUvJk4oGvi3X0eGyYbHohvYqG3sbGqg+UUdBvobNqht67uSpNliZ8O9BQqu1eBspV6PWqPGPkIjuYjayW72igZbzQm6uQd2bppKuYtLS12Ayaup+Na66NTy3RT1g0Z/a6L3T0poi1b9oYAOP+3LVC2dzuT2HzrZsOpwbcbs20dVhpKvdyBW3kcF+E55uYcCzTg9nJm3EpuzEwqW8CRUxEyxWo5Qw/KwE3/My/EOlDHvtPHmQwUCfMNin0d9j4O4Nte7/yzCVLPwyQxU1i8j4ZsUWfa0Y8WbysDdLJUmRSe9NLW2S4t4tfT2gDH8C278VieEhaksAAAAASUVORK5CYII=","aspectRatio":1.7857142857142858,"src":"/static/28f08c28a70cfa12c1f02038f1844404/03979/frame-1.png","srcSet":"/static/28f08c28a70cfa12c1f02038f1844404/6cdeb/frame-1.png 350w,\n/static/28f08c28a70cfa12c1f02038f1844404/b1dd8/frame-1.png 700w,\n/static/28f08c28a70cfa12c1f02038f1844404/03979/frame-1.png 800w,\n/static/28f08c28a70cfa12c1f02038f1844404/1783d/frame-1.png 1050w,\n/static/28f08c28a70cfa12c1f02038f1844404/942ca/frame-1.png 1400w,\n/static/28f08c28a70cfa12c1f02038f1844404/0bdd0/frame-1.png 2679w","sizes":"(max-width: 800px) 100vw, 800px","maxHeight":448,"maxWidth":800},"sizes":{"src":"/static/28f08c28a70cfa12c1f02038f1844404/ee604/frame-1.png"}}}}}},"pageContext":{"id":"909fe9fc-9e82-5ca0-bf0a-ad4a82feda65","previous":{"id":"cca980b8-bdd7-5605-9e65-5ae67841853e","frontmatter":{"slug":"/what-is-closures-in-javascript","template":"blog-post","title":"Closures | Javascript"}},"next":{"id":"a6302d39-2ad0-530c-a003-5711313b10d6","frontmatter":{"slug":"/","template":"index-page","title":"Hi there !"}}}},"staticQueryHashes":["228695001","3868140423"]}