diff --git a/Libraries/Components/SafeAreaView/SafeAreaView.android.js b/Libraries/Components/SafeAreaView/SafeAreaView.android.js deleted file mode 100644 index 6a51a3cb8..000000000 --- a/Libraries/Components/SafeAreaView/SafeAreaView.android.js +++ /dev/null @@ -1,13 +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 - * @flow - */ - -'use strict'; - -module.exports = require('View'); diff --git a/Libraries/Components/SafeAreaView/SafeAreaView.ios.js b/Libraries/Components/SafeAreaView/SafeAreaView.ios.js deleted file mode 100644 index 636c9e628..000000000 --- a/Libraries/Components/SafeAreaView/SafeAreaView.ios.js +++ /dev/null @@ -1,40 +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. - * - * @flow - * @format - */ - -const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes'); -const React = require('React'); - -const requireNativeComponent = require('requireNativeComponent'); - -import type {ViewProps} from 'ViewPropTypes'; - -const RCTSafeAreaView = requireNativeComponent('RCTSafeAreaView'); - -type Props = ViewProps & { - children: any, -}; - -/** - * Renders nested content and automatically applies paddings reflect the portion of the view - * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. - * Moreover, and most importantly, Safe Area's paddings reflect physical limitation of the screen, - * such as rounded corners or camera notches (aka sensor housing area on iPhone X). - */ -class SafeAreaView extends React.Component { - static propTypes = { - ...DeprecatedViewPropTypes, - }; - - render() { - return ; - } -} - -module.exports = SafeAreaView; diff --git a/Libraries/Components/SafeAreaView/SafeAreaView.js b/Libraries/Components/SafeAreaView/SafeAreaView.js new file mode 100644 index 000000000..6f4ecf3ac --- /dev/null +++ b/Libraries/Components/SafeAreaView/SafeAreaView.js @@ -0,0 +1,50 @@ +/** + * 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. + * + * @flow strict-local + * @format + */ + +const Platform = require('Platform'); +const React = require('React'); +const View = require('View'); +const requireNativeComponent = require('requireNativeComponent'); + +import type {ViewProps} from 'ViewPropTypes'; + +type Props = $ReadOnly<{| + ...ViewProps, + emulateUnlessSupported?: boolean, +|}>; + +let exported; + +/** + * Renders nested content and automatically applies paddings reflect the portion + * of the view that is not covered by navigation bars, tab bars, toolbars, and + * other ancestor views. + * + * Moreover, and most importantly, Safe Area's paddings reflect physical + * limitation of the screen, such as rounded corners or camera notches (aka + * sensor housing area on iPhone X). + */ +if (Platform.OS === 'android') { + exported = class SafeAreaView extends React.Component { + render(): React.Node { + const {emulateUnlessSupported, ...props} = this.props; + return ; + } + }; +} else { + const RCTSafeAreaView = requireNativeComponent('RCTSafeAreaView'); + exported = class SafeAreaView extends React.Component { + render(): React.Node { + return ; + } + }; +} + +module.exports = exported; diff --git a/RNTester/js/SafeAreaViewExample.js b/RNTester/js/SafeAreaViewExample.js index 4100289ff..ed66587d7 100644 --- a/RNTester/js/SafeAreaViewExample.js +++ b/RNTester/js/SafeAreaViewExample.js @@ -15,6 +15,7 @@ const Modal = require('Modal'); const React = require('react'); const SafeAreaView = require('SafeAreaView'); const StyleSheet = require('StyleSheet'); +const Switch = require('Switch'); const Text = require('Text'); const View = require('View'); @@ -26,10 +27,14 @@ exports.description = class SafeAreaViewExample extends React.Component< {}, - {|modalVisible: boolean|}, + {| + modalVisible: boolean, + emulateUnlessSupported: boolean, + |}, > { state = { modalVisible: false, + emulateUnlessSupported: true, }; _setModalVisible = visible => { @@ -45,12 +50,21 @@ class SafeAreaViewExample extends React.Component< animationType="slide" supportedOrientations={['portrait', 'landscape']}> - +