Minimum Width / Height in React Native

Question

How to set minimum width or height for a React Native component?

In css i can use min-width / min-height

https://facebook.imtqy.com/react-native/docs/flexbox.html#content

There is no minWidth / minHeight for interactive documents

Answer 1

The minHeight , maxHeight , minWidth and maxWidth properties are supported in the 0.29.0 natural-response version for iOS and Android .

The following is a description of maxHeight from the source documentation . This description also applies to other min / max style properties.

maxHeight - maximum height for this component, in logical pixels.

It works the same way as max-height in CSS, but in React Native you should use points or percentages. Ems and other devices are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details.

Wacky example:

<View style={{ minWidth: '20%', maxWidth: 500, minHeight: '10%', maxHeight: 150, }} /> 

Answer 2

I was able to find a solution for you. Here is a working demo ... https://rnplay.org/apps/vaD1iA

And here are the key parts.

First, you increase the size of the device ...

 var Dimensions = require('Dimensions'); var { width, height } = Dimensions.get('window'); 

Here's a button component that uses the width of the device as the basis for a button with

 const Button = React.createClass({ render(){ return( <TouchableHighlight> <Text style={[styles.button,{width: width - 20}]}> {this.props.children} </Text> </TouchableHighlight> ) } }); 

Then, as you can see here, the width of the button will be the same regardless of the width of the contents of the shortcut.

Answer 3

This answer is deprecated, use halilb answer.

I solved this using the onLayout , it is very simple:

Example:

Step 1: I create in our state a support that will contain the current height of the image named curImgHeight .

 constructor(){ super(props); this.state={curImgHeight:0} } 

Step 2: Use the support in any View or Element that supports the onLayout support.

Here I use it with Image . Then all we need to do is change this state property if the actual image height is less than our minimum height.

 render(){ <Image source={{uri: "https://placehold.it/350x150"}} resizeMode='cover' style={[styles.image, {height:(this.state.curImgHeight<=0?null:this.state.curImgHeight)}]} onLayout={(e)=>{ let {height} = e.nativeEvent.layout; let minimumImgHeight = 400; //We set the minimum height we want here. if(height<= minimumImgHeight){ //Whenever the real height of the image is less than the minimum height this.setState({curImgHeight:minimumImgHeight}); //just change the curImgHeight state property to the minimum height. } }} /> } 

This is how I decided it for me.

ps: during the search, I found that the reactive version informally supports minHeight and maxHeight , but only for iOS, not for Android. I would not dare to use them. The above code works well and gives me control.

Answer 4

You can do something like this:

 _getButtonStyle() { var style = {height:36,padding:8} if(this.props.buttonText.length < 4){ style.width = 64 } return style } 

Answer 5

You can use minHeight or flexBasis - this is similar.