CODEWITHSUNDEEP
react-nativeflexbox
chrispitzer
chrispitzer

Reputation: 1069

React Native how to do min/max widths

I want to style a component in my interface. The component must have a width of at least 200, but I want to let it grow with screen width to up to 600. But, sometimes people use tablets or huge phones. And I don't want the component to be able to grow with the screen forever. I want it to have a maximum width of 600.

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

Upvotes: 13

Views: 36377

Answers (3)

Thai Ha
Thai Ha

Reputation: 1379

You can use the maxWidth, maxHeight, minWidth, minHeight layout properties supported by React Native.

Document here React Native layout props.

Example:

StyleSheet.create({
  container: {
    maxWidth: '80%',   // <-- Max width is 80%
    minHeight: 20,     // <-- Min height is 20
  },
});

Upvotes: 17

Kelvin Aitken
Kelvin Aitken

Reputation: 443

Simple. Just use maxWidth in your styles.

In a practical manner, this is how you would use it:

   import { StyleSheet, Text, View, Dimensions, (+ anything else you need such as Platform to target specific device widths } from "react-native";
   // plus whatever other imports you need for your project...

In a class component, you would create a state called whatever, let's say deviceWidth. Then inside the component you would use:

constructor(props) {
    super(props);
    this.state = {
      deviceWidth: 375, // Put in any default size here or just "null"
      // plus any other state keys you need in your project
      }

componentDidMount() {
  const currentWidth = Dimensions.get("screen").width;
  this.setState({deviceWidth: currentWidth});
}

In a functional component you would import:

  import React, { useEffect, useState } from "react";

Then inside your functional component you would add in:

  const [currentWidth, setCurrentWidth] = useState(null //or add in a default width);

  useEffect(() => {
    const currentWidth = Dimensions.get("screen").width;
    setCurrentWidth({deviceWidth: currentWidth});
  }, []);

You could also use:

 const deviceDisplay = Dimensions.get("window");
 const deviceHeight = deviceDisplay.height;
 const deviceWidth = deviceDisplay.width;

..if you wanted to find the height as well. On Android, "window" gets you the full screen height including the upper bar while "screen" gets you height without upper bar. Window and screen on iOS are the same.

Then using inline styles so that you have access to the state, set the width & maxWidth:

   <View style={[styles.wrapper, { width: this.state.deviceWidth,  maxWidth: 400, // or whatever you want here. } ]} >

Any width settings in a wrapper style found in your StyleSheet object will be over-ridden by the inline style, just like in CSS.

Alternatively if you don't have any other styles declared in your StyleSheet object, just use:

  <View style={{ width: this.state.deviceWidth,  maxWidth: 400 }} >

Or in a functional component, that would be:

  <View style={{ width: deviceWidth,  maxWidth: 400 }} >

Upvotes: 0

Mihir
Mihir

Reputation: 3902

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

You can define two different style objects.

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

componentStyle_1: {
    flex: 1
}

For 600 width on a device having width greater than 600

componentStyle_2: {
    width: 600
}

You can check the device width runtime.

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

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

Best way to get accurate results is to play with your code. Good luck!

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

Upvotes: 4

Related Questions