React Native Button Width Fit To Content

Source : 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.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.