https://github.com/shimo-react-native/react-native-safe-area-emitter
Safe area event emitter of iOS for react-native
https://github.com/shimo-react-native/react-native-safe-area-emitter
iphonex react-native safe-area
Last synced: 2 months ago
JSON representation
Safe area event emitter of iOS for react-native
- Host: GitHub
- URL: https://github.com/shimo-react-native/react-native-safe-area-emitter
- Owner: shimo-react-native
- License: mit
- Created: 2017-11-24T03:02:30.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-11-16T09:00:57.000Z (over 5 years ago)
- Last Synced: 2025-10-12T05:13:08.172Z (9 months ago)
- Topics: iphonex, react-native, safe-area
- Language: Objective-C
- Homepage:
- Size: 178 KB
- Stars: 5
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-safe-area-emitter
Safe area event emitter of iOS for react-native
## Install
```sh
npm i react-native-safe-area-emitter
react-native link react-native-safe-area-emitter
```
## Usage
### Constants
* `rootSafeArea` get initialized safe area for root view
### Method
* `getSafeArea(reactTag)` get fafe area for a view
* `getRootSafeArea()` get safe area for root view
* `addListener(eventType, listener, context)` add event listener
* `addSafeAreaListener(listener, context)` add event listener for all view
* `addRootSafeAreaListener(listener, context)` add event listener for root view
## Example
```js
import {
findNodeHandle
} from 'react-native';
import RNSafeArea from 'react-native-safe-area-emitter';
export default class App extends Component<{}> {
constructor(props) {
super(props);
console.log('SafeAreaExample', 'rootSafeArea', RNSafeArea.rootSafeArea);
RNSafeArea.getRootSafeArea().then((result) => {
console.log('SafeAreaExample', 'getRootSafeArea', result);
});
}
componentDidMount() {
const welcomReactTag = this.refs.welcome && findNodeHandle(this.refs.welcome);
RNSafeArea.getSafeArea(welcomReactTag || 0).then((result) => {
console.log('SafeAreaExample', 'getSafeArea', result);
});
this._rootSafeAreaListener = RNSafeArea.addRootSafeAreaListener((result) => {
console.log('SafeAreaExample', 'listenRootSafeArea', result);
});
this._safeAreaListener = RNSafeArea.addSafeAreaListener((result) => {
console.log('SafeAreaExample', 'listenSafeArea', result);
});
}
componentWillUnmount() {
this._safeAreaListener.remove();
this._rootSafeAreaListener.remove();
}
_rootSafeAreaListener = null;
_safeAreaListener = null;
render() {
return (
Welcome to React Native!
To get started, edit App.js
{instructions}
);
}
}
```