How To Customize Button In React Native

This tutorial explains how to customize button in react native application. Here we are going to provide complete information for react native button component. You may have been observed when you are trying to set button width and height of react native button, then it will not expand as per the mentioned width and height. So Here we are going to provide solution for the same issue.

Set Button Width and Height In React Native

Lets use the below source that helps to set width and height of button. Here you need to specify the button width and height parameter in view layout.

<View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
   <Button
      onPress={this.buttonClickListener}
      title="Button Three"
      color="#90A4AE"
    />
</View>

Set the Button Color In React Native

 we need to specificity the color attribute and  their corresponding color in button tag, In order to set the button color in react native application.

 <Button
    onPress={this.buttonClickListener}
    title="Button Three"
    color="#90A4AE"
   />

Complete Source Code for App.js

• Specify the button width and height in view layout instead of button.
• Mention the color attribute in button component, that helps to set the button color.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native";

export default class App extends Component {
  //Binding the function with class
  buttonClickListener = () => {
    alert("Clicked On Button !!!");
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>Set Button Color In React Native.</Text>

        <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button One"
            color="#00B0FF"
          />
        </View>

        <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button Two"
            color="#EC407A"
          />
        </View>

        <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button Three"
            color="#1DE9B6"
          />
        </View>

        <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button Three"
            color="#FF3D00"
          />
        </View>
        <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button Three"
            color="#90A4AE"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  button: {
    padding: 20,
    fontSize: 15,
    fontFamily: "arial",
    width: 400,
    height: 40,
    textAlign: "center"
  }
});

Screenshot :

Download Link :
https://github.com/skptricks/React-Native/tree/master/How%20Customize%20Button%20In%20React%20Native