react-native-safe-area-context

  • Version 5.10.0
  • Published
  • 249 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,
            ref,
            ...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;

                                          property ref

                                          ref?: React.Ref<View>;

                                            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

                                                                        property ref

                                                                        ref?: React.Ref<View>;

                                                                          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 (32)

                                                                                            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>