jobayer977 / react-native-div-layout

React Native Div Layout provides a set of utility props to make designing with custom styles easier in React Native. With this package, you can quickly and easily add custom styles to your components, without having to write a lot of custom CSS or JavaScript.

React Native Div Layout provides a set of utility props to make designing with custom styles easier in React Native. With this package, you can quickly and easily add custom styles to your components, without having to write a lot of custom CSS or JavaScript.

Installation

To install the React Native Div Layout package, you can use the following command:

npm install react-native-div-layout

Usage

Once you have installed the package, you can start using it in your React Native application by importing it like this:

import { Div } from 'react-native-div-layout';

After that, you can use the Div component in your JSX code like any other React Native component. However, unlike other components, the Div component comes with a set of utility props that you can use to customize its appearance.

Here are some examples of the utility props that are available:

<Div bg="red">
  <Text>Hello, world!</Text>
</Div>

Components and Props

Div

The Div component is a wrapper component that can be used to apply styles to child components. The following props can be used with the Div component:

Prop	Type	Description
borderColor	string	Sets the border color of the component.
borderTopColor	string	Sets the top border color of the component.
borderRightColor	string	Sets the right border color of the component.
borderBottomColor	string	Sets the bottom border color of the component.
borderLeftColor	string	Sets the left border color of the component.
borderWidth	number	Sets the border width of the component.
borderTopWidth	number	Sets the top border width of the component.
borderRightWidth	number	Sets the right border width of the component.
borderBottomWidth	number	Sets the bottom border width of the component.
borderLeftWidth	number	Sets the left border width of the component.
borderStartWidth	number	Sets the border start width of the component.
borderEndWidth	number	Sets the border end width of the component.
borderStyle	ViewStyle['borderStyle']	Sets the border style of the component.
m	number	Sets margin for all sides of the component.
mt	number	Sets margin for the top of the component.
mr	number	Sets margin for the right of the component.
mb	number	Sets margin for the bottom of the component.
ml	number	Sets margin for the left of the component.
mx	number	Sets horizontal margin of the component (left and right).
my	number	Sets vertical margin of the component (top and bottom).
ms	number	Sets margin for start of the component (left in LTR mode, right in RTL mode).
p	number	Sets padding for all sides of the component.
pt	number	Sets padding for the top of the component.
pr	number	Sets padding for the right of the component.
pb	number	Sets padding for the bottom of the component.
pl	number	Sets padding for the left of the component.
px	number	Sets horizontal padding of the component (left and right).
py	number	Sets vertical padding of the component (top and bottom).
ps	number	Sets padding for start of the component (left in LTR mode, right in RTL mode).
rounded	number	Sets the border radius of the component.
roundedTopLeft	number	Sets the top-left border radius of the component.
roundedTopRight	number	Sets the top-right border radius of the component.
roundedBottomLeft	number	Sets the bottom-left border radius of the component.
roundedBottomRight	number	Sets the bottom-right border radius of the component.
roundedTop	number	Sets the border radius of the top