SafeAreaView.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @flow strict-local
  8. * @format
  9. */
  10. const Platform = require('../../Utilities/Platform');
  11. const React = require('react');
  12. const View = require('../View/View');
  13. import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
  14. import type {ViewProps} from '../View/ViewPropTypes';
  15. type Props = $ReadOnly<{|
  16. ...ViewProps,
  17. emulateUnlessSupported?: boolean,
  18. |}>;
  19. let exported: React.AbstractComponent<
  20. Props,
  21. React.ElementRef<HostComponent<mixed>>,
  22. >;
  23. /**
  24. * Renders nested content and automatically applies paddings reflect the portion
  25. * of the view that is not covered by navigation bars, tab bars, toolbars, and
  26. * other ancestor views.
  27. *
  28. * Moreover, and most importantly, Safe Area's paddings reflect physical
  29. * limitation of the screen, such as rounded corners or camera notches (aka
  30. * sensor housing area on iPhone X).
  31. */
  32. if (Platform.OS === 'android') {
  33. exported = React.forwardRef<Props, React.ElementRef<HostComponent<mixed>>>(
  34. function SafeAreaView(props, forwardedRef) {
  35. const {emulateUnlessSupported, ...localProps} = props;
  36. return <View {...localProps} ref={forwardedRef} />;
  37. },
  38. );
  39. } else {
  40. const RCTSafeAreaViewNativeComponent = require('./RCTSafeAreaViewNativeComponent')
  41. .default;
  42. exported = React.forwardRef<Props, React.ElementRef<HostComponent<mixed>>>(
  43. function SafeAreaView(props, forwardedRef) {
  44. return (
  45. <RCTSafeAreaViewNativeComponent
  46. emulateUnlessSupported={true}
  47. {...props}
  48. ref={forwardedRef}
  49. />
  50. );
  51. },
  52. );
  53. }
  54. module.exports = exported;