React Native Button Width Fit To Content

This tutorial explains how to make button width fit to content in react native application. This is a very easy and simple, just we need to wrap the Button component inside the View component with some style sheet design.

Make button width fit to content in react native :

Lets see the below complete source code that helps to set the width fit to the content in react native application.

• Use the below layout design to create button.
• Apply the below stylesheet design.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

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

export default class App extends Component {


  render() {
    return (
      <View style={styles.container}>

        <View style={styles.buttonOuterLayout}>

          <View style={styles.buttonLayout}>
            <Button title="Login " />
          </View>

          <View style={styles.buttonLayout}>
            <Button title="Register " />
          </View>


          <View style={styles.buttonLayout}>
            <Button title="Logout " />
          </View>

          <View style={styles.buttonLayout}>
            <Button title="Forgot Password " />
          </View>

        </View>

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  buttonOuterLayout: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonLayout: {
    marginBottom: 10
  }
});

Screenshots : 

This is all about React Native Button Width Fit To Content. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.