How to set button height in response to native android

Question

I am learning to respond to native programming for Android mobile applications. I am making a screen where I need to set the height of a button. I added a button to the view and set the height for using the style, but the height of the button has not changed.

 /** * 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 someone help me set the button height according to my requirement.

Thanks in advance.

Answer 1

This component has limited capabilities, so you cannot resize it to a fixed height .

I recommend that you use the TouchableOpacity component to create your own button with its own properties and styles .

You can easily create it like this:

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

Answer 2

The best solution is to use minHeight or maxHeight instead of Height const.

Answer 3

You can easily set the button width to the specified width using the following method:

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