Finalize initial draft implementation for ios

.eslintrc.js

@@ -21,26 +21,10 @@ module.exports = {
         typescriptEslintPrettier.rules,
         {
           '@typescript-eslint/explicit-member-accessibility': 'off',
+          '@typescript-eslint/explicit-function-return-type': 'off',
+          '@typescript-eslint/no-use-before-define': 'off',
         },
       ),
     },
-    {
-      files: ['example/**/*.ts', 'example/**/*.tsx'],
-      rules: {
-        // Turn off rules which are useless and annoying for the example files files
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        'react-native/no-inline-styles': 'off',
-      },
-    },
-    {
-      files: ['**/__tests__/**/*.ts', '**/*.spec.ts'],
-      env: {
-        jest: true,
-      },
-      rules: {
-        // Turn off rules which are useless and annoying for unit test files
-        '@typescript-eslint/explicit-function-return-type': 'off',
-      },
-    },
   ],
 };

example/App.js

@@ -1,114 +0,0 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
-import React, {Fragment} from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
-
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-const App = () => {
-  return (
-    <Fragment>
-      <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}>
-          <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.js</Text> to change this
-                screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </Fragment>
-  );
-};
-
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
-});
-
-export default App;

example/App.tsx

@@ -0,0 +1,110 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import * as React from 'react';
+import { StyleSheet, ScrollView, View, Text, StatusBar } from 'react-native';
+import SafeAreaView from '..';
+
+import {
+  Header,
+  LearnMoreLinks,
+  Colors,
+  DebugInstructions,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+const App = () => {
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView>
+        {insets => (
+          <ScrollView
+            contentInsetAdjustmentBehavior="automatic"
+            contentContainerStyle={{
+              paddingTop: insets.top,
+              paddingBottom: insets.bottom,
+            }}
+            style={styles.scrollView}
+          >
+            <Header />
+            <View style={styles.body}>
+              <View style={styles.sectionContainer}>
+                <Text style={styles.sectionTitle}>Step One</Text>
+                <Text style={styles.sectionDescription}>
+                  Edit <Text style={styles.highlight}>App.js</Text> to change
+                  this screen and then come back to see your edits.
+                </Text>
+              </View>
+              <View style={styles.sectionContainer}>
+                <Text style={styles.sectionTitle}>See Your Changes</Text>
+                <Text style={styles.sectionDescription}>
+                  <ReloadInstructions />
+                </Text>
+              </View>
+              <View style={styles.sectionContainer}>
+                <Text style={styles.sectionTitle}>Debug</Text>
+                <Text style={styles.sectionDescription}>
+                  <DebugInstructions />
+                </Text>
+              </View>
+              <View style={styles.sectionContainer}>
+                <Text style={styles.sectionTitle}>Learn More</Text>
+                <Text style={styles.sectionDescription}>
+                  Read the docs to discover what to do next:
+                </Text>
+              </View>
+              <LearnMoreLinks />
+            </View>
+          </ScrollView>
+        )}
+      </SafeAreaView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollView: {
+    backgroundColor: Colors.lighter,
+  },
+  engine: {
+    position: 'absolute',
+    right: 0,
+  },
+  body: {
+    backgroundColor: Colors.white,
+  },
+  sectionContainer: {
+    marginTop: 32,
+    paddingHorizontal: 24,
+  },
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: Colors.black,
+  },
+  sectionDescription: {
+    marginTop: 8,
+    fontSize: 18,
+    fontWeight: '400',
+    color: Colors.dark,
+  },
+  highlight: {
+    fontWeight: '700',
+  },
+  footer: {
+    color: Colors.dark,
+    fontSize: 12,
+    fontWeight: '600',
+    padding: 4,
+    paddingRight: 12,
+    textAlign: 'right',
+  },
+});
+
+export default App;

example/index.js

@@ -1,9 +1,5 @@
-/**
- * @format
- */
-
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

ios/SafeAreaView/RNCSafeAreaView.m

@@ -5,12 +5,7 @@
 #import <React/RCTBridge.h>
 #import <React/RCTUIManager.h>
 
-@implementation RNCSafeAreaView {
-  UIEdgeInsets _currentSafeAreaInsets;
-}
-
-RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)decoder)
-RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)
+@implementation RNCSafeAreaView
 
 - (BOOL)isSupportedByOS
 {
@@ -54,14 +49,6 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)
   return safeAreaInsets;
 }
 
-static BOOL UIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIEdgeInsets insets2, CGFloat threshold) {
-  return
-  ABS(insets1.left - insets2.left) <= threshold &&
-  ABS(insets1.right - insets2.right) <= threshold &&
-  ABS(insets1.top - insets2.top) <= threshold &&
-  ABS(insets1.bottom - insets2.bottom) <= threshold;
-}
-
 - (void)safeAreaInsetsDidChange
 {
   [self invalidateSafeAreaInsets];
@@ -71,7 +58,12 @@ static BOOL UIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIE
 {
   UIEdgeInsets safeAreaInsets = [self realOrEmulateSafeAreaInsets];
   self.onInsetsChange(@{
-    @"top": @(safeAreaInsets.top),
+    @"insets": @{
+      @"top": @(safeAreaInsets.top),
+      @"right": @(safeAreaInsets.right),
+      @"bottom": @(safeAreaInsets.bottom),
+      @"left": @(safeAreaInsets.left),
+    }
   });
 }
 

ios/SafeAreaView/RNCSafeAreaViewManager.h

@@ -0,0 +1,9 @@
+#import <React/RCTViewManager.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNCSafeAreaViewManager : RCTViewManager
+
+@end
+
+NS_ASSUME_NONNULL_END

ios/SafeAreaView/RNCSafeAreaViewManager.m

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RNCSafeAreaViewManager.h"
+
+#import "RNCSafeAreaView.h"
+
+@implementation RNCSafeAreaViewManager
+
+RCT_EXPORT_MODULE(RNCSafeAreaView)
+
+RCT_EXPORT_VIEW_PROPERTY(onInsetsChange, RCTBubblingEventBlock)
+
+- (UIView *)view
+{
+  return [RNCSafeAreaView new];
+}
+
+@end

package.json

@@ -2,7 +2,7 @@
   "name": "@th3rdwave/safe-area-view",
   "version": "0.1.0",
   "description": "A more flexible <SafeAreaView>",
-  "main": "src/index.ts",
+  "main": "src/index.tsx",
   "files": [
     "/android",
     "!/android/build",

src/index.ts

@@ -1,226 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-import {useState, useEffect} from 'react';
-import DeprecatedUtils from './internal/deprecatedUtils';
-import DeprecatedState from './internal/deprecatedState';
-import * as DeprecatedTypes from './internal/deprecatedTypes';
-import State from './internal/state';
-import * as Types from './internal/types';
-
-// Call the setup methods of the two state modules right away
-State.setup();
-DeprecatedState.setup();
-
-const _isConnectedListeners = new Map<
-  DeprecatedTypes.IsConnectedHandler,
-  /// @ts-ignore Typescript des not like the trailing comma that Prettier insists upon
-  Types.NetInfoChangeHandler
->();
-
-/**
- * Returns a `Promise` that resolves to a `NetInfoState` object.
- *
- * @returns A Promise which contains the current connection state.
- */
-export function fetch(): Promise<Types.NetInfoState> {
-  return State.latest();
-}
-
-/**
- * Subscribe to connection information. The callback is called with a parameter of type
- * [`NetInfoState`](README.md#netinfostate) whenever the connection state changes. Your listener
- * will be called with the latest information soon after you subscribe and then with any
- * subsequent changes afterwards. You should not assume that the listener is called in the same
- * way across devices or platforms.
- *
- * @param listener The listener which is called when the network state changes.
- *
- * @returns An ofunction which can be called to unsubscribe.
- */
-export function addEventListener(
-  listener: Types.NetInfoChangeHandler,
-): Types.NetInfoSubscription;
-
-/**
- * Deprecated network state listener. You should remove the event name and change your handler to
- * use the new state shape.
- *
- * @deprecated
- *
- * @param type The event type.
- * @param deprecatedHandler The listener.
- *
- * @returns An object with a remove function which can be called to unsubscribe.
- */
-export function addEventListener(
-  type: string,
-  deprecatedHandler: DeprecatedTypes.ChangeHandler,
-): DeprecatedTypes.Subscription;
-
-// Implementation of the overloaded methods above
-export function addEventListener(
-  listenerOrType: Types.NetInfoChangeHandler | string,
-  deprecatedHandler: DeprecatedTypes.ChangeHandler | undefined = undefined,
-): Types.NetInfoSubscription | DeprecatedTypes.Subscription {
-  if (typeof listenerOrType === 'string') {
-    DeprecatedUtils.warnOnce();
-
-    if (
-      listenerOrType === DeprecatedTypes.CHANGE_EVENT_NAME &&
-      deprecatedHandler
-    ) {
-      DeprecatedState.add(deprecatedHandler);
-      return {
-        remove: (): void => {
-          DeprecatedState.remove(deprecatedHandler);
-        },
-      };
-    } else {
-      return {
-        remove: (): void => {},
-      };
-    }
-  } else {
-    const listener = listenerOrType;
-    State.add(listener);
-    return (): void => {
-      State.remove(listener);
-    };
-  }
-}
-
-/**
- * A React Hook which updates when the connection state changes.
- *
- * @returns The connection state.
- */
-export function useNetInfo(): Types.NetInfoState {
-  const [netInfo, setNetInfo] = useState<Types.NetInfoState>({
-    type: Types.NetInfoStateType.unknown,
-    isConnected: false,
-    isInternetReachable: false,
-    details: null,
-  });
-
-  useEffect((): (() => void) => {
-    return addEventListener(setNetInfo);
-  }, []);
-
-  return netInfo;
-}
-
-/**
- * Deprecated method to remove the listener. You should upgrade to the new API.
- *
- * @deprecated
- *
- * @param type The event type.
- * @param handler The event listener.
- */
-export function removeEventListener(
-  type: string,
-  handler: DeprecatedTypes.ChangeHandler,
-): void {
-  DeprecatedUtils.warnOnce();
-
-  if (type === DeprecatedTypes.CHANGE_EVENT_NAME) {
-    DeprecatedState.remove(handler);
-  }
-}
-
-/**
- * Deprecated method to get the current state. You should upgrade to the new `fetch` method and
- * handle the new state type.
- *
- * @deprecated
- */
-export function getConnectionInfo(): Promise<DeprecatedTypes.NetInfoData> {
-  DeprecatedUtils.warnOnce();
-  return DeprecatedState.latest();
-}
-
-/**
- * Deprecated method to tell if the current connection is "expensive". Only available on Android.
- * You should now call the `fetch` method and look at the `details.isConnectionExpensive` property.
- *
- * @deprecated
- */
-export function isConnectionExpensive(): Promise<boolean> {
-  DeprecatedUtils.warnOnce();
-  return State.latest().then(DeprecatedUtils.isConnectionExpensive);
-}
-
-export const isConnected = {
-  /**
-   * Deprecated method to listen for changes to the connected boolean. You should now use the
-   * normal `addEventListener` method and look at the `isConnected` property.
-   *
-   * @deprecated
-   */
-  addEventListener: (
-    eventName: string,
-    handler: DeprecatedTypes.IsConnectedHandler,
-  ): DeprecatedTypes.Subscription => {
-    if (eventName !== DeprecatedTypes.CHANGE_EVENT_NAME) {
-      return {remove: (): void => {}};
-    }
-
-    const listener = (state: Types.NetInfoState): void => {
-      handler(DeprecatedUtils.isConnected(state));
-    };
-
-    _isConnectedListeners.set(handler, listener);
-    State.add(listener);
-
-    return {
-      remove: (): void => {
-        State.remove(listener);
-      },
-    };
-  },
-
-  /**
-   * Deprecated method to stop listening for changes to the connected boolean. You should now use
-   * the normal `addEventListener` method and look at the `isConnected` property.
-   *
-   * @deprecated
-   */
-  removeEventListener: (
-    _eventName: string,
-    handler: DeprecatedTypes.IsConnectedHandler,
-  ): void => {
-    const listener = _isConnectedListeners.get(handler);
-    listener && State.remove(listener);
-    _isConnectedListeners.delete(handler);
-  },
-
-  /**
-   * Deprecated method to get the current is connected boolean. You should now use the normal
-   * `fetch` method and look at the `isConnected` property.
-   *
-   * @deprecated
-   */
-  fetch: (): Promise<boolean> => {
-    return State.latest().then(DeprecatedUtils.isConnected);
-  },
-};
-
-export * from './internal/types';
-export * from './internal/deprecatedTypes';
-
-export default {
-  fetch,
-  addEventListener,
-  useNetInfo,
-  removeEventListener,
-  getConnectionInfo,
-  isConnectionExpensive,
-  isConnected,
-};

src/index.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import {
+  requireNativeComponent,
+  NativeSyntheticEvent,
+  ViewStyle,
+  StyleSheet,
+} from 'react-native';
+
+const NativeSafeAreaView = requireNativeComponent('RNCSafeAreaView');
+
+export interface EdgeInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface SafeAreaViewProps {
+  children: (insets: EdgeInsets) => React.ReactNode;
+  style?: ViewStyle;
+}
+
+export default function SafeAreaView({ children, style }: SafeAreaViewProps) {
+  const [insets, setInsets] = React.useState<EdgeInsets | null>(null);
+  const onInsetsChange = React.useCallback(
+    (event: NativeSyntheticEvent<{ insets: EdgeInsets }>) => {
+      setInsets(event.nativeEvent.insets);
+    },
+    [],
+  );
+
+  return (
+    <NativeSafeAreaView
+      style={[styles.fill, style]}
+      onInsetsChange={onInsetsChange}
+    >
+      {insets !== null ? children(insets) : null}
+    </NativeSafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+});