Add onInsetsChange property to SafeAreaView

Libraries/Components/SafeAreaView/SafeAreaView.js

@@ -13,10 +13,12 @@ const React = require('React');
 const View = require('View');
 
 import type {ViewProps} from 'ViewPropTypes';
+import type {InsetsChangeEvent} from 'CoreEventTypes';
 
 type Props = $ReadOnly<{|
   ...ViewProps,
   emulateUnlessSupported?: boolean,
+  onInsetsChange?: ?(event: InsetsChangeEvent) => Promise<void> | void,
 |}>;
 
 let exported;
@@ -33,7 +35,7 @@ let exported;
 if (Platform.OS === 'android') {
   exported = class SafeAreaView extends React.Component<Props> {
     render(): React.Node {
-      const {emulateUnlessSupported, ...props} = this.props;
+      const {emulateUnlessSupported, onInsetsChange, ...props} = this.props;
       return <View {...props} />;
     }
   };

Libraries/Types/CoreEventTypes.js

@@ -28,7 +28,7 @@ export type SyntheticEvent<T> = $ReadOnly<{|
   persist: () => void,
   target: ?number,
   timeStamp: number,
-  type: ?string,
+  type?: ?string,
 |}>;
 
 export type ResponderSyntheticEvent<T> = $ReadOnly<{|
@@ -135,3 +135,16 @@ export type SwitchChangeEvent = SyntheticEvent<
     value: boolean,
   |}>,
 >;
+
+export type Insets = $ReadOnly<{|
+  left: number,
+  top: number,
+  right: number,
+  bottom: number,
+|}>;
+
+export type InsetsChangeEvent = SyntheticEvent<
+  $ReadOnly<{|
+    insets: Insets,
+  |}>,
+>;

RNTester/js/SafeAreaViewExample.js

@@ -19,22 +19,30 @@ const Switch = require('Switch');
 const Text = require('Text');
 const View = require('View');
 
+import type {Insets} from 'CoreEventTypes';
+
 class SafeAreaViewExample extends React.Component<
   {},
   {|
     modalVisible: boolean,
     emulateUnlessSupported: boolean,
+    insets: ?Insets,
   |},
 > {
   state = {
     modalVisible: false,
     emulateUnlessSupported: true,
+    insets: undefined,
   };
 
   _setModalVisible = visible => {
     this.setState({modalVisible: visible});
   };
 
+  _onSafeAreaViewInsetsChange = event => {
+    this.setState({insets: event.nativeEvent.insets});
+  };
+
   render() {
     return (
       <View>
@@ -46,8 +54,13 @@ class SafeAreaViewExample extends React.Component<
           <View style={styles.modal}>
             <SafeAreaView
               style={styles.safeArea}
-              emulateUnlessSupported={this.state.emulateUnlessSupported}>
+              emulateUnlessSupported={this.state.emulateUnlessSupported}
+              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;
@@ -109,6 +115,14 @@ - (void)setSafeAreaInsets:(UIEdgeInsets)safeAreaInsets
 
   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) } });
+  }
 }
 
 - (void)setEmulateUnlessSupported:(BOOL)emulateUnlessSupported

React/Views/SafeAreaView/RCTSafeAreaViewManager.m

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