How to set margin or padding with shorthands in React Native?

Sometimes, we want to set margin or padding with shorthands in React Native.

In this article, we’ll look at how to set margin or padding with shorthands in React Native.

How to set margin or padding with shorthands in React Native?

To set margin or padding with shorthands in React Native, we can use the marginVertical, marginHorizontal, paddinHorizontal and paddingVertical properties.

For instance, we write:

import * as React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View
      style={{
        marginVertical: 10,
        marginHorizontal: 20,
        paddingHorizontal: 20,
        paddingVertical: 20,
      }}>
      <Text>hello</Text>
    </View>
  );
}

to set the margin and padding with the properties.

marginVertical set the vertical margins.

marginHorizontal set the horizontal margins.

paddingHorizontal set the horizontal paddings.

paddingVertical set the vertical paddings.

Conclusion

To set margin or padding with shorthands in React Native, we can use the marginVertical, marginHorizontal, paddinHorizontal and paddingVertical properties.