Geek Answers Handbook

React Native how to make min / max widths

I want to create a component in my interface. The component should have a width of at least 200, but I want it to grow with a screen width of up to 600. But sometimes people use tablets or huge phones. And I do not want the component to be able to grow from the screen forever. I want her to have a maximum width of 600.

And I know that maxWidth is a thing that at least at the moment is not part of the flexbox implementation in React Native ... so is there any reasonable way to do this today?

+5
source share
2 answers

There is no such thing as "maxWidth" in React Native. You may want to create your component at runtime. Try playing with Dimensions. You can get the screen width and screen height of the device and adjust the width of your component accordingly.

You can define two different style objects.

For a full-width component on a device with a width of less than 600.

componentStyle_1: {
    flex: 1
}

Width 600 for devices with a width greater than 600

componentStyle_2: {
    width: 600
}

You can check the runtime of the device.

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

if(width>600){
    //load componentStyle_1
}
else{
    //load componentStyle_2
}

The best way to get accurate results is to play with your code. Good luck

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

+1
source

You can use the PixelRatio helper class.

https://facebook.imtqy.com/react-native/docs/pixelratio.html

0

More articles:


All Articles