Minimum width/height in React Native

How can I set minimum width or height for React Native component?

In css, I can use min-width/min-height

https://facebook.github.io/react-native/docs/flexbox.html#content

There is no minWidth/minHeight on react-native docs

minHeight, maxHeight, minWidth and maxWidth properties are supported as of react-native version 0.29.0 for iOS and Android.

Here is the maxHeight description from react-native documentation. This description also applies for other min/max style properties.

> maxHeight is the maximum height for this component, in > logical pixels. > > It works similarly to max-height in CSS, but in React Native you must > use points or percentages. Ems and other units are not supported. > > See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for > more details.

A dummy example:

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

I was able to work out the solution for you. Here's a working demo... https://rnplay.org/apps/vaD1iA

And here are the key parts.

First, you pull in the device dimensions...

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

Here's the button component, which uses the device width as the basis for the button's 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 button width will be the same regardless of label content width.

This answer is outdated now, use halilb's answer.

I solved this by using the onLayout prop, its very easy:

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

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.
      }
    }}
  />
}

p.s: During my search I found that react-native unofficially supports minHeight and maxHeight but only for iOS and not for Android. I wouldn't dare using them though. The above code works well and gives me control.

You can do something like that:

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

You can use minHeight or flexBasis - it is similar.