How to set the height of button in React Native Android

Question

I am learning React Native programming for Android mobile apps. I am making a screen where I need to set height of button. I have added button in view and set the height of using style however there is no change on button height.

/**
 * LoginComponent of Myntra
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { AppRegistry, Text, View, Button, TextInput } from "react-native";

class LoginComponent extends Component {
render() {
    return (
        <View style={{ flex: 1, flexDirection: "column", margin: 10 }}>
            <TextInput
                style={{
                    height: 40,
                    borderColor: "gray",
                    borderWidth: 0.5
                }}
                placeholder="Email address"
                underlineColorAndroid="transparent"
            />

            <TextInput
                style={{
                    height: 40,
                    borderColor: "gray",
                    borderWidth: 0.5
                }}
                placeholder="Password"
                secureTextEntry={true}
                underlineColorAndroid="transparent"
            />

            <View style={{ height: 100, marginTop: 10 }}>
                <Button title="LOG IN" color="#2E8B57" />
            </View>
        </View>
    );
  }
}

AppRegistry.registerComponent("Myntra", () => LoginComponent);

Can anyone help me to set the height of button according to my requirement?

Solution 1

This component has limited options, so you can't resize it to a fixed height.

I recommend you to use the TouchableOpacity component to build your own button, with own properties and styles.

You can easily style it like this:

<TouchableOpacity style={{ height: 100, marginTop: 10 }}>
    <Text>My button</Text>
</TouchableOpacity>

Solution 2

You can set the button width as per the mentioned width easily by using following method :

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

Solution 3

Best solution is to use minHeight or maxHeight instead of using Height const.

Solution 4

<View style={styles.btnContainer}>
  <TouchableOpacity>
    <Button style={styles.btnSize}>
      <Text>Change Address</Text>
    </Button>
  </TouchableOpacity>
  <TouchableOpacity>
    <Button style={styles.btnSize}>
      <Text>Change Address</Text>
    </Button>
  </TouchableOpacity>
</View>

Style sheet code snippet

const styles = StyleSheet.create({
    btnContainer:{
        flexDirection:"row",
        justifyContent:"space-between"
    },
    btnSize:{
        width:"100%"
    }
})

View more solutions