react-native-safe-area-context

  • Version 5.5.1
  • Published
  • 232 kB
  • No dependencies
  • MIT license

Install

npm i react-native-safe-area-context
yarn add react-native-safe-area-context
pnpm add react-native-safe-area-context

Overview

A flexible way to handle safe area, also works on Android and web.

Index

Variables

variable initialWindowMetrics

const initialWindowMetrics: Metrics;

    variable initialWindowSafeAreaInsets

    const initialWindowSafeAreaInsets: EdgeInsets;
    • Deprecated

    variable SafeAreaConsumer

    const SafeAreaConsumer: React.Consumer<EdgeInsets>;
    • Deprecated

    variable SafeAreaContext

    const SafeAreaContext: React.Context<EdgeInsets>;
    • Deprecated

    variable SafeAreaFrameContext

    const SafeAreaFrameContext: React.Context<Rect>;

      variable SafeAreaInsetsContext

      const SafeAreaInsetsContext: React.Context<EdgeInsets>;

        variable SafeAreaView

        const SafeAreaView: React.ForwardRefExoticComponent<any>;

          Functions

          function SafeAreaListener

          SafeAreaListener: ({
          onChange,
          style,
          children,
          ...others
          }: SafeAreaListenerProps) => React.JSX.Element;

            function SafeAreaProvider

            SafeAreaProvider: ({
            children,
            initialMetrics,
            initialSafeAreaInsets,
            style,
            ...others
            }: SafeAreaProviderProps) => React.JSX.Element;

              function useSafeArea

              useSafeArea: () => EdgeInsets;
              • Deprecated

              function useSafeAreaFrame

              useSafeAreaFrame: () => Rect;

                function useSafeAreaInsets

                useSafeAreaInsets: () => EdgeInsets;

                  function withSafeAreaInsets

                  withSafeAreaInsets: <T>(
                  WrappedComponent: React.ComponentType<any>
                  ) => React.ForwardRefExoticComponent<any>;

                    Interfaces

                    interface EdgeInsets

                    interface EdgeInsets {}

                      property bottom

                      bottom: number;

                        property left

                        left: number;

                          property right

                          right: number;

                            property top

                            top: number;

                              interface Metrics

                              interface Metrics {}

                                property frame

                                frame: Rect;

                                  property insets

                                  insets: EdgeInsets;

                                    interface NativeSafeAreaProviderProps

                                    interface NativeSafeAreaProviderProps extends ViewProps {}

                                      property children

                                      children?: React.ReactNode;

                                        property onInsetsChange

                                        onInsetsChange: InsetChangeNativeCallback;

                                          interface NativeSafeAreaViewProps

                                          interface NativeSafeAreaViewProps extends ViewProps {}

                                            property children

                                            children?: React.ReactNode;

                                              property edges

                                              edges?: Edges;

                                                property mode

                                                mode?: 'padding' | 'margin';

                                                  interface Rect

                                                  interface Rect {}

                                                    property height

                                                    height: number;

                                                      property width

                                                      width: number;

                                                        property x

                                                        x: number;

                                                          property y

                                                          y: number;

                                                            interface SafeAreaListenerProps

                                                            interface SafeAreaListenerProps extends ViewProps {}

                                                              property onChange

                                                              onChange: (data: { insets: EdgeInsets; frame: Rect }) => void;

                                                                interface SafeAreaProviderProps

                                                                interface SafeAreaProviderProps extends ViewProps {}

                                                                  property children

                                                                  children?: React.ReactNode;

                                                                    property initialMetrics

                                                                    initialMetrics?: Metrics | null;

                                                                      property initialSafeAreaInsets

                                                                      initialSafeAreaInsets?: EdgeInsets | null;
                                                                      • Deprecated

                                                                      Type Aliases

                                                                      type Edge

                                                                      type Edge = 'top' | 'right' | 'bottom' | 'left';

                                                                        type EdgeMode

                                                                        type EdgeMode = 'off' | 'additive' | 'maximum';

                                                                          type EdgeRecord

                                                                          type EdgeRecord = Partial<Record<Edge, EdgeMode>>;

                                                                            type Edges

                                                                            type Edges = readonly Edge[] | Readonly<EdgeRecord>;

                                                                              type InsetChangedEvent

                                                                              type InsetChangedEvent = NativeSyntheticEvent<Metrics>;

                                                                                type InsetChangeNativeCallback

                                                                                type InsetChangeNativeCallback = (event: InsetChangedEvent) => void;

                                                                                  type NativeSafeAreaViewInstance

                                                                                  type NativeSafeAreaViewInstance = InstanceType<typeof NativeSafeAreaView>;

                                                                                    type SafeAreaViewProps

                                                                                    type SafeAreaViewProps = NativeSafeAreaViewProps;

                                                                                      type WithSafeAreaInsetsProps

                                                                                      type WithSafeAreaInsetsProps = {
                                                                                      insets: EdgeInsets;
                                                                                      };

                                                                                        Package Files (5)

                                                                                        Dependencies (0)

                                                                                        No dependencies.

                                                                                        Dev Dependencies (28)

                                                                                        Peer Dependencies (2)

                                                                                        Badge

                                                                                        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-native-safe-area-context.

                                                                                        • Markdown
                                                                                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-native-safe-area-context)
                                                                                        • HTML
                                                                                          <a href="https://www.jsdocs.io/package/react-native-safe-area-context"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>