Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set the height of button in React Native Android

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?

like image 405
N Sharma Avatar asked Jan 21 '17 09:01

N Sharma


People also ask

How do I change the button height in React Native?

Best solution is to use minHeight or maxHeight instead of using Height const. Show activity on this post. It often happens that we want to change the dimensions of the button, which by default is extended to the entire width of the parent element.

How do I change the size of a button in react?

To resize a React Material UI button, we set can the style prop of the Button to an object that sets the dimensions of the button. We add a button by adding the Button component. And we set the style prop of the button to an object that has the maxWidth , maxHeight , minWidth and minHeight properties.

How do I change the button 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. 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.

How to get height and width of the device in React Native?

We will use Dimensions component of react-native to get the Height and Width of the Device. In mobile app development, we have to support different screens sizes. Especially if you are working on an App where responsiveness matters a lot then you need to keep track of Device Height and Width.

Can we create bottom fixed button in React Native?

Welcome to Infinitbility. Sometimes, we need to create on bottom fixed button so users can press button at any level of scrolling they don’t need to go end of the screen to submit a button. So, Today we will see how we can create bottom fixed button in react native.

How to create a flat button in react?

Flat Button: This has a style of no background color. To create a flat button in react, set the CSS class to e-flat. 3. Outline Button: This type of button contains a border with a transparent background.

How do I get Started with React Native?

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility.


2 Answers

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>
like image 67
kuby Avatar answered Oct 15 '22 13:10

kuby


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> 

enter image description here

like image 29
sumit kumar pradhan Avatar answered Oct 15 '22 11:10

sumit kumar pradhan