| 1 | import * as React from 'react';
|
| 2 | import { LayoutChangeEvent, ViewProperties } from 'react-native';
|
| 3 | import { SafeAreaContext, SafeAreaProvider, SafeAreaConsumer, useSafeArea } from 'react-native-safe-area-context';
|
| 4 | export { useSafeArea, SafeAreaProvider, SafeAreaConsumer, SafeAreaContext };
|
| 5 | export declare type ForceInsetValue = 'always' | 'never';
|
| 6 | export declare type ForceInsetProp = {
|
| 7 | top?: ForceInsetValue;
|
| 8 | bottom?: ForceInsetValue;
|
| 9 | left?: ForceInsetValue;
|
| 10 | right?: ForceInsetValue;
|
| 11 | horizontal?: ForceInsetValue;
|
| 12 | vertical?: ForceInsetValue;
|
| 13 | };
|
| 14 | interface Props extends ViewProperties {
|
| 15 | forceInset?: ForceInsetProp;
|
| 16 | }
|
| 17 | interface State {
|
| 18 | touchesTop: boolean;
|
| 19 | touchesBottom: boolean;
|
| 20 | touchesLeft: boolean;
|
| 21 | touchesRight: boolean;
|
| 22 | viewWidth: number;
|
| 23 | viewHeight: number;
|
| 24 | }
|
| 25 | export default class SafeAreaView extends React.Component<Props, State> {
|
| 26 | static contextType: any;
|
| 27 | context: React.ContextType<typeof SafeAreaContext>;
|
| 28 | private _isMounted;
|
| 29 | private _view;
|
| 30 | state: State;
|
| 31 | componentDidMount(): void;
|
| 32 | componentWillUnmount(): void;
|
| 33 | render(): JSX.Element;
|
| 34 | _handleLayout: (e: LayoutChangeEvent) => void;
|
| 35 | _updateMeasurements: () => void;
|
| 36 | _getSafeAreaStyle: () => {
|
| 37 | paddingTop: number;
|
| 38 | paddingBottom: number;
|
| 39 | paddingLeft: number;
|
| 40 | paddingRight: number;
|
| 41 | backfaceVisibility?: "visible" | "hidden" | undefined;
|
| 42 | backgroundColor?: string | undefined;
|
| 43 | borderBottomColor?: string | undefined;
|
| 44 | borderBottomEndRadius?: number | undefined;
|
| 45 | borderBottomLeftRadius?: number | undefined;
|
| 46 | borderBottomRightRadius?: number | undefined;
|
| 47 | borderBottomStartRadius?: number | undefined;
|
| 48 | borderBottomWidth?: number | undefined;
|
| 49 | borderColor?: string | undefined;
|
| 50 | borderEndColor?: string | undefined;
|
| 51 | borderLeftColor?: string | undefined;
|
| 52 | borderLeftWidth?: number | undefined;
|
| 53 | borderRadius?: number | undefined;
|
| 54 | borderRightColor?: string | undefined;
|
| 55 | borderRightWidth?: number | undefined;
|
| 56 | borderStartColor?: string | undefined;
|
| 57 | borderStyle?: "solid" | "dotted" | "dashed" | undefined;
|
| 58 | borderTopColor?: string | undefined;
|
| 59 | borderTopEndRadius?: number | undefined;
|
| 60 | borderTopLeftRadius?: number | undefined;
|
| 61 | borderTopRightRadius?: number | undefined;
|
| 62 | borderTopStartRadius?: number | undefined;
|
| 63 | borderTopWidth?: number | undefined;
|
| 64 | borderWidth?: number | undefined;
|
| 65 | opacity?: number | undefined;
|
| 66 | testID?: string | undefined;
|
| 67 | elevation?: number | undefined;
|
| 68 | alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | undefined;
|
| 69 | alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
|
| 70 | alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
|
| 71 | aspectRatio?: number | undefined;
|
| 72 | borderEndWidth?: string | number | undefined;
|
| 73 | borderStartWidth?: string | number | undefined;
|
| 74 | bottom?: string | number | undefined;
|
| 75 | display?: "none" | "flex" | undefined;
|
| 76 | end?: string | number | undefined;
|
| 77 | flex?: number | undefined;
|
| 78 | flexBasis?: string | number | undefined;
|
| 79 | flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
|
| 80 | flexGrow?: number | undefined;
|
| 81 | flexShrink?: number | undefined;
|
| 82 | flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
| 83 | height?: string | number | undefined;
|
| 84 | justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
|
| 85 | left?: string | number | undefined;
|
| 86 | margin?: string | number | undefined;
|
| 87 | marginBottom?: string | number | undefined;
|
| 88 | marginEnd?: string | number | undefined;
|
| 89 | marginHorizontal?: string | number | undefined;
|
| 90 | marginLeft?: string | number | undefined;
|
| 91 | marginRight?: string | number | undefined;
|
| 92 | marginStart?: string | number | undefined;
|
| 93 | marginTop?: string | number | undefined;
|
| 94 | marginVertical?: string | number | undefined;
|
| 95 | maxHeight?: string | number | undefined;
|
| 96 | maxWidth?: string | number | undefined;
|
| 97 | minHeight?: string | number | undefined;
|
| 98 | minWidth?: string | number | undefined;
|
| 99 | overflow?: "visible" | "hidden" | "scroll" | undefined;
|
| 100 | paddingEnd?: string | number | undefined;
|
| 101 | paddingStart?: string | number | undefined;
|
| 102 | position?: "absolute" | "relative" | undefined;
|
| 103 | right?: string | number | undefined;
|
| 104 | start?: string | number | undefined;
|
| 105 | top?: string | number | undefined;
|
| 106 | width?: string | number | undefined;
|
| 107 | zIndex?: number | undefined;
|
| 108 | direction?: "inherit" | "ltr" | "rtl" | undefined;
|
| 109 | shadowColor?: string | undefined;
|
| 110 | shadowOffset?: {
|
| 111 | width: number;
|
| 112 | height: number;
|
| 113 | } | undefined;
|
| 114 | shadowOpacity?: number | undefined;
|
| 115 | shadowRadius?: number | undefined;
|
| 116 | transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform)[] | undefined;
|
| 117 | transformMatrix?: number[] | undefined;
|
| 118 | rotation?: number | undefined;
|
| 119 | scaleX?: number | undefined;
|
| 120 | scaleY?: number | undefined;
|
| 121 | translateX?: number | undefined;
|
| 122 | translateY?: number | undefined;
|
| 123 | };
|
| 124 | _getViewStyles: () => {
|
| 125 | paddingTop: number;
|
| 126 | paddingBottom: number;
|
| 127 | paddingLeft: number;
|
| 128 | paddingRight: number;
|
| 129 | viewStyle: {
|
| 130 | backfaceVisibility?: "visible" | "hidden" | undefined;
|
| 131 | backgroundColor?: string | undefined;
|
| 132 | borderBottomColor?: string | undefined;
|
| 133 | borderBottomEndRadius?: number | undefined;
|
| 134 | borderBottomLeftRadius?: number | undefined;
|
| 135 | borderBottomRightRadius?: number | undefined;
|
| 136 | borderBottomStartRadius?: number | undefined;
|
| 137 | borderBottomWidth?: number | undefined;
|
| 138 | borderColor?: string | undefined;
|
| 139 | borderEndColor?: string | undefined;
|
| 140 | borderLeftColor?: string | undefined;
|
| 141 | borderLeftWidth?: number | undefined;
|
| 142 | borderRadius?: number | undefined;
|
| 143 | borderRightColor?: string | undefined;
|
| 144 | borderRightWidth?: number | undefined;
|
| 145 | borderStartColor?: string | undefined;
|
| 146 | borderStyle?: "solid" | "dotted" | "dashed" | undefined;
|
| 147 | borderTopColor?: string | undefined;
|
| 148 | borderTopEndRadius?: number | undefined;
|
| 149 | borderTopLeftRadius?: number | undefined;
|
| 150 | borderTopRightRadius?: number | undefined;
|
| 151 | borderTopStartRadius?: number | undefined;
|
| 152 | borderTopWidth?: number | undefined;
|
| 153 | borderWidth?: number | undefined;
|
| 154 | opacity?: number | undefined;
|
| 155 | testID?: string | undefined;
|
| 156 | elevation?: number | undefined;
|
| 157 | alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | undefined;
|
| 158 | alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
|
| 159 | alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
|
| 160 | aspectRatio?: number | undefined;
|
| 161 | borderEndWidth?: string | number | undefined;
|
| 162 | borderStartWidth?: string | number | undefined;
|
| 163 | bottom?: string | number | undefined;
|
| 164 | display?: "none" | "flex" | undefined;
|
| 165 | end?: string | number | undefined;
|
| 166 | flex?: number | undefined;
|
| 167 | flexBasis?: string | number | undefined;
|
| 168 | flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
|
| 169 | flexGrow?: number | undefined;
|
| 170 | flexShrink?: number | undefined;
|
| 171 | flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
| 172 | height?: string | number | undefined;
|
| 173 | justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
|
| 174 | left?: string | number | undefined;
|
| 175 | margin?: string | number | undefined;
|
| 176 | marginBottom?: string | number | undefined;
|
| 177 | marginEnd?: string | number | undefined;
|
| 178 | marginHorizontal?: string | number | undefined;
|
| 179 | marginLeft?: string | number | undefined;
|
| 180 | marginRight?: string | number | undefined;
|
| 181 | marginStart?: string | number | undefined;
|
| 182 | marginTop?: string | number | undefined;
|
| 183 | marginVertical?: string | number | undefined;
|
| 184 | maxHeight?: string | number | undefined;
|
| 185 | maxWidth?: string | number | undefined;
|
| 186 | minHeight?: string | number | undefined;
|
| 187 | minWidth?: string | number | undefined;
|
| 188 | overflow?: "visible" | "hidden" | "scroll" | undefined;
|
| 189 | paddingEnd?: string | number | undefined;
|
| 190 | paddingStart?: string | number | undefined;
|
| 191 | position?: "absolute" | "relative" | undefined;
|
| 192 | right?: string | number | undefined;
|
| 193 | start?: string | number | undefined;
|
| 194 | top?: string | number | undefined;
|
| 195 | width?: string | number | undefined;
|
| 196 | zIndex?: number | undefined;
|
| 197 | direction?: "inherit" | "ltr" | "rtl" | undefined;
|
| 198 | shadowColor?: string | undefined;
|
| 199 | shadowOffset?: {
|
| 200 | width: number;
|
| 201 | height: number;
|
| 202 | } | undefined;
|
| 203 | shadowOpacity?: number | undefined;
|
| 204 | shadowRadius?: number | undefined;
|
| 205 | transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform)[] | undefined;
|
| 206 | transformMatrix?: number[] | undefined;
|
| 207 | rotation?: number | undefined;
|
| 208 | scaleX?: number | undefined;
|
| 209 | scaleY?: number | undefined;
|
| 210 | translateX?: number | undefined;
|
| 211 | translateY?: number | undefined;
|
| 212 | };
|
| 213 | };
|
| 214 | _getInset: (key: "top" | "bottom" | "left" | "right" | "horizontal" | "vertical") => number;
|
| 215 | }
|