Add onInsetsChange property to SafeAreaView

Libraries/Components/SafeAreaView/SafeAreaView.ios.js

@@ -13,13 +13,16 @@ const React = require('React');
 
 const requireNativeComponent = require('requireNativeComponent');
 
+import PropTypes from 'prop-types';
 import type {ViewProps} from 'ViewPropTypes';
 
 const RCTSafeAreaView = requireNativeComponent('RCTSafeAreaView');
 
-type Props = ViewProps & {
- children: any,
-};
+type Props = $ReadOnly<{|
+ ...ViewProps,
+ children?: ?React.Node,
+ onInsetsChange?: ?Function,
+|}>;
 
 /**
  * Renders nested content and automatically applies paddings reflect the portion of the view
@@ -30,6 +33,12 @@ type Props = ViewProps & {
 class SafeAreaView extends React.Component<Props> {
  static propTypes = {
  ...DeprecatedViewPropTypes,
+ /**
+ * Callback that is called when the safe area view insets changed.
+ * This will be called with
+ * `{ nativeEvent: { insets: { left, top, right, bottom } } }`.
+ */
+ onInsetsChange: PropTypes.func,
  };
 
  render() {

RNTester/js/SafeAreaViewExample.js

@@ -24,18 +24,28 @@ exports.title = '<SafeAreaView>';
 exports.description =
  'SafeAreaView automatically applies paddings reflect the portion of the view that is not covered by other (special) ancestor views.';
 
+type Insets = {left: number, top: number, right: number, bottom: number} | void;
+
 class SafeAreaViewExample extends React.Component<
  {},
- {|modalVisible: boolean|},
+ {|
+ modalVisible: boolean,
+ insets: Insets,
+ |},
 > {
  state = {
  modalVisible: false,
+ insets: undefined,
  };
 
  _setModalVisible = visible => {
  this.setState({modalVisible: visible});
  };
 
+ _onSafeAreaViewInsetsChange = event => {
+ this.setState({insets: event.nativeEvent.insets});
+ };
+
  render() {
  return (
  <View>
@@ -45,8 +55,14 @@ class SafeAreaViewExample extends React.Component<
  animationType="slide"
  supportedOrientations={['portrait', 'landscape']}>
  <View style={styles.modal}>
- <SafeAreaView style={styles.safeArea}>
+ <SafeAreaView
+ style={styles.safeArea}
+ onInsetsChange={this._onSafeAreaViewInsetsChange}>
  <View style={styles.safeAreaContent}>
+ <Text>
+ {this.state.insets &&
+ `safeAreaViewInsets:\n${JSON.stringify(this.state.insets)}`}
+ </Text>
  <Button
  onPress={this._setModalVisible.bind(this, false)}
  title="Close"

React/Views/SafeAreaView/RCTSafeAreaView.m

@@ -12,6 +12,12 @@
 
 #import "RCTSafeAreaViewLocalData.h"
 
+@interface RCTSafeAreaView ()
+
+@property (nonatomic, copy) RCTBubblingEventBlock onInsetsChange;
+
+@end
+
 @implementation RCTSafeAreaView {
  __weak RCTBridge *_bridge;
  UIEdgeInsets _currentSafeAreaInsets;
@@ -56,6 +62,14 @@ - (void)safeAreaInsetsDidChange
  RCTSafeAreaViewLocalData *localData =
  [[RCTSafeAreaViewLocalData alloc] initWithInsets:safeAreaInsets];
  [_bridge.uiManager setLocalData:localData forView:self];
+
+ if (_onInsetsChange) {
+ _onInsetsChange(@{ @"insets": @{
+ @"left": @(safeAreaInsets.left),
+ @"top": @(safeAreaInsets.top),
+ @"right": @(safeAreaInsets.right),
+ @"bottom": @(safeAreaInsets.right) } });
+ }
 }
 
 #endif

React/Views/SafeAreaView/RCTSafeAreaViewManager.m

@@ -25,4 +25,6 @@ - (RCTSafeAreaShadowView *)shadowView
  return [RCTSafeAreaShadowView new];
 }
 
+RCT_EXPORT_VIEW_PROPERTY(onInsetsChange, RCTBubblingEventBlock)
+
 @end