How to set the minimum width or height in React Native

Sometimes, we want to set the minimum width or height in React Native.

In this article, we’ll look at how to set the minimum width or height in React Native.

How to set the minimum width or height in React Native

To set the minimum width or height in React Native, we can set the minWidth and minHeight properties.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';
import dismissKeyboard from 'react-native-dismiss-keyboard';

export default function App() {
  return (
    <View
      style={{
        minWidth: '20%',
        maxWidth: 500,
        minHeight: '10%',
        maxHeight: 150,
      }}>
      <Text>hello world</Text>
    </View>
  );
}

to set the min width with minWidth and min height with minHeight.

We can also set the max width with maxWidth and max height with maxHeight.

Conclusion

To set the minimum width or height in React Native, we can set the minWidth and minHeight properties.