Skip to content

Commit

Permalink
Update readme.
Browse files Browse the repository at this point in the history
  • Loading branch information
miyabi committed Oct 6, 2017
1 parent 83a3357 commit 715f312
Showing 1 changed file with 42 additions and 5 deletions.
47 changes: 42 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,57 @@
# react-native-safe-area
React Native module to get Safe Area Insets for iOS 11 or later.

# Installation
React Native module to retrieve safe area insets for iOS 11 or later.

## Installation

```shell
npm install --save react-native-safe-area
react-native link
react-native link react-native-safe-area
```

# How to use
## Usage

```jsx
import SafeArea from 'react-native-safe-area'
```

If you want to use `SafeAreaInsets` type, you can import it like below:

```jsx
import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'
```

### Retrieve safe area insets for root view

```jsx
SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
console.log(result) // { safeAreaInsets: { bottom: 0, top: 0, left: 0, right: 0 } }
console.log(result)
// { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})
```

### Handle safe area insets changed event

```jsx
class App extends Component<{}> {
// To keep the context of 'this'
onSafeAreaInsetsForRootViewChange = this.onSafeAreaInsetsForRootViewChange.bind(this)

componentDidMount() {
// Add event listener
SafeArea.addEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)
}

componentWillUnmount() {
// Remove event listener
SafeArea.removeEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)
}

onSafeAreaInsetsForRootViewChange(result) {
// Called every time that safe area insets changed
console.log(result)
// { safeAreaInsets: { top: 0, left: 44, bottom: 21, right: 44 } }
}
}
```

0 comments on commit 715f312

Please sign in to comment.