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