https://github.com/dioncodes/react-native-layout-margins
A simple react native module for applying Layout Margins according to the iOS Layout Design Guides.
https://github.com/dioncodes/react-native-layout-margins
ios ios-layout react-native
Last synced: about 1 month ago
JSON representation
A simple react native module for applying Layout Margins according to the iOS Layout Design Guides.
- Host: GitHub
- URL: https://github.com/dioncodes/react-native-layout-margins
- Owner: dioncodes
- License: other
- Created: 2021-01-12T21:19:56.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-19T13:34:19.000Z (over 5 years ago)
- Last Synced: 2025-08-08T13:37:24.739Z (11 months ago)
- Topics: ios, ios-layout, react-native
- Language: JavaScript
- Homepage:
- Size: 76.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-layout-margins
A simple react native module for views that consider the iOS [layoutMargins](https://developer.apple.com/documentation/uikit/uiview/1622651-layoutmarginsguide) (including safe area insets).
Supports two components for easy usage (`` and ``) and a method for querying the margins of the current root view.
Please read the [iOS Layout Design Guides](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/) for more details on the layout margins.
Based on [delightfulstudio/react-native-safe-area-insets](https://github.com/DelightfulStudio/react-native-safe-area-insets).
# Installation
```sh
yarn add @dioncodes/react-native-layout-margins
cd ios && pod install
```
*Important:* If you are updating from version 1.2 or earlier and using the components, you will need to add the `LayoutMarginProvider` (see Component Usage below).
# Manual linking
1. Open your project in XCode
1. Add `./node_modules/@dioncodes/react-native-layout-margins/ios/RNLayoutMargins.xcodeproj` to `Libraries` in your project
1. Select root of your project
1. Switch to `General` tab
1. Scroll down to `Linked Frameworks and Libraries` section
1. Click button `+`
1. Add `libRNLayoutMargins.a` (if it's not present, build the project and try again)
## Component Usage
To use the components you need to wrap your screens into a ``.
```javascript
import { LayoutMarginProvider } from '@dioncodes/react-native-layout-margins';
...
const App = () => (
...
);
```
```javascript
import { ContentInsetView } from '@dioncodes/react-native-layout-margins';
...
I'm aligned according to the iOS layout margins!
```
```jsx
I'm aligned according to the iOS layout margins (including safe area), vertically and horizontally.
```
```jsx
I'm vertically (but not horizontally) aligned according to the iOS layout margins (including safe area).
```
Also supporting a (react-native-gesture-handler) FlatList with content insets:
```jsx
item.id}
vertical
horizontal
/>
```
*Props*:
* `horizontal` (boolean, optional)
* `vertical` (boolean, optional)
* `top` (boolean, optional)
* `left` (boolean, optional)
* `right` (boolean, optional)
* `bottom` (boolean, optional)
* `style` (optional [`ViewStyle`](https://reactnative.dev/docs/view-style-props) prop that is passed to the `View` container)
ContentInsetFlatList also accepts all FlatList props.
If no property is set, only the horizontal padding is active.
## Manual Usage With provider
```javascript
import React from 'react';
import { View } from 'react-native';
import { useGetLayoutMarginProvider } from '@dioncodes/react-native-layout-margins';
export default function ExampleScreen() {
const layoutMarginContext = useGetLayoutMarginProvider();
const insets = layoutMarginContext.currentInsets;
const insetStyle = {
paddingLeft: insets.left,
paddingRight: insets.right,
};
return (
I'm aligned according to the iOS layout margins!
);
}
```
## Manual Usage Without Provider
```javascript
import React, { useLayoutEffect, useState } from 'react';
import { View, Dimensions } from 'react-native';
import { currentInsets } from '@dioncodes/react-native-layout-margins';
export default function ExampleScreen() {
const [insetStyle, setInsetStyle] = useState({ paddingLeft: 0, paddingRight: 0 });
useLayoutEffect(() => {
const setInsets = () => {
currentInsets().then((insets) => {
setInsetStyle({
paddingLeft: insets.left,
paddingRight: insets.right,
});
});
};
setInsets();
Dimensions.addEventListener('change', setInsets);
return function cleanup() {
Dimensions.removeEventListener('change', setInsets);
};
}, []);
return (
I'm aligned according to the iOS layout margins!
);
}
```