react-native-safe-area-view
Version:
Add padding to your views to account for notches, home indicators, status bar, and possibly other future things.
216 lines (215 loc) • 11.2 kB
TypeScript
import * as React from 'react';
import { LayoutChangeEvent, ViewProperties } from 'react-native';
import { SafeAreaContext, SafeAreaProvider, SafeAreaConsumer, useSafeArea } from 'react-native-safe-area-context';
export { useSafeArea, SafeAreaProvider, SafeAreaConsumer, SafeAreaContext };
export declare type ForceInsetValue = 'always' | 'never';
export declare type ForceInsetProp = {
top?: ForceInsetValue;
bottom?: ForceInsetValue;
left?: ForceInsetValue;
right?: ForceInsetValue;
horizontal?: ForceInsetValue;
vertical?: ForceInsetValue;
};
interface Props extends ViewProperties {
forceInset?: ForceInsetProp;
}
interface State {
touchesTop: boolean;
touchesBottom: boolean;
touchesLeft: boolean;
touchesRight: boolean;
viewWidth: number;
viewHeight: number;
}
export default class SafeAreaView extends React.Component<Props, State> {
static contextType: any;
context: React.ContextType<typeof SafeAreaContext>;
private _isMounted;
private _view;
state: State;
componentDidMount(): void;
componentWillUnmount(): void;
render(): JSX.Element;
_handleLayout: (e: LayoutChangeEvent) => void;
_updateMeasurements: () => void;
_getSafeAreaStyle: () => {
paddingTop: number;
paddingBottom: number;
paddingLeft: number;
paddingRight: number;
backfaceVisibility?: "visible" | "hidden" | undefined;
backgroundColor?: string | undefined;
borderBottomColor?: string | undefined;
borderBottomEndRadius?: number | undefined;
borderBottomLeftRadius?: number | undefined;
borderBottomRightRadius?: number | undefined;
borderBottomStartRadius?: number | undefined;
borderBottomWidth?: number | undefined;
borderColor?: string | undefined;
borderEndColor?: string | undefined;
borderLeftColor?: string | undefined;
borderLeftWidth?: number | undefined;
borderRadius?: number | undefined;
borderRightColor?: string | undefined;
borderRightWidth?: number | undefined;
borderStartColor?: string | undefined;
borderStyle?: "solid" | "dotted" | "dashed" | undefined;
borderTopColor?: string | undefined;
borderTopEndRadius?: number | undefined;
borderTopLeftRadius?: number | undefined;
borderTopRightRadius?: number | undefined;
borderTopStartRadius?: number | undefined;
borderTopWidth?: number | undefined;
borderWidth?: number | undefined;
opacity?: number | undefined;
testID?: string | undefined;
elevation?: number | undefined;
alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | undefined;
alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | "auto" | undefined;
aspectRatio?: number | undefined;
borderEndWidth?: string | number | undefined;
borderStartWidth?: string | number | undefined;
bottom?: string | number | undefined;
display?: "none" | "flex" | undefined;
end?: string | number | undefined;
flex?: number | undefined;
flexBasis?: string | number | undefined;
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
flexGrow?: number | undefined;
flexShrink?: number | undefined;
flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
height?: string | number | undefined;
justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
left?: string | number | undefined;
margin?: string | number | undefined;
marginBottom?: string | number | undefined;
marginEnd?: string | number | undefined;
marginHorizontal?: string | number | undefined;
marginLeft?: string | number | undefined;
marginRight?: string | number | undefined;
marginStart?: string | number | undefined;
marginTop?: string | number | undefined;
marginVertical?: string | number | undefined;
maxHeight?: string | number | undefined;
maxWidth?: string | number | undefined;
minHeight?: string | number | undefined;
minWidth?: string | number | undefined;
overflow?: "visible" | "hidden" | "scroll" | undefined;
paddingEnd?: string | number | undefined;
paddingStart?: string | number | undefined;
position?: "absolute" | "relative" | undefined;
right?: string | number | undefined;
start?: string | number | undefined;
top?: string | number | undefined;
width?: string | number | undefined;
zIndex?: number | undefined;
direction?: "inherit" | "ltr" | "rtl" | undefined;
shadowColor?: string | undefined;
shadowOffset?: {
width: number;
height: number;
} | undefined;
shadowOpacity?: number | undefined;
shadowRadius?: number | undefined;
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;
transformMatrix?: number[] | undefined;
rotation?: number | undefined;
scaleX?: number | undefined;
scaleY?: number | undefined;
translateX?: number | undefined;
translateY?: number | undefined;
};
_getViewStyles: () => {
paddingTop: number;
paddingBottom: number;
paddingLeft: number;
paddingRight: number;
viewStyle: {
backfaceVisibility?: "visible" | "hidden" | undefined;
backgroundColor?: string | undefined;
borderBottomColor?: string | undefined;
borderBottomEndRadius?: number | undefined;
borderBottomLeftRadius?: number | undefined;
borderBottomRightRadius?: number | undefined;
borderBottomStartRadius?: number | undefined;
borderBottomWidth?: number | undefined;
borderColor?: string | undefined;
borderEndColor?: string | undefined;
borderLeftColor?: string | undefined;
borderLeftWidth?: number | undefined;
borderRadius?: number | undefined;
borderRightColor?: string | undefined;
borderRightWidth?: number | undefined;
borderStartColor?: string | undefined;
borderStyle?: "solid" | "dotted" | "dashed" | undefined;
borderTopColor?: string | undefined;
borderTopEndRadius?: number | undefined;
borderTopLeftRadius?: number | undefined;
borderTopRightRadius?: number | undefined;
borderTopStartRadius?: number | undefined;
borderTopWidth?: number | undefined;
borderWidth?: number | undefined;
opacity?: number | undefined;
testID?: string | undefined;
elevation?: number | undefined;
alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | undefined;
alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | "auto" | undefined;
aspectRatio?: number | undefined;
borderEndWidth?: string | number | undefined;
borderStartWidth?: string | number | undefined;
bottom?: string | number | undefined;
display?: "none" | "flex" | undefined;
end?: string | number | undefined;
flex?: number | undefined;
flexBasis?: string | number | undefined;
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
flexGrow?: number | undefined;
flexShrink?: number | undefined;
flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
height?: string | number | undefined;
justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
left?: string | number | undefined;
margin?: string | number | undefined;
marginBottom?: string | number | undefined;
marginEnd?: string | number | undefined;
marginHorizontal?: string | number | undefined;
marginLeft?: string | number | undefined;
marginRight?: string | number | undefined;
marginStart?: string | number | undefined;
marginTop?: string | number | undefined;
marginVertical?: string | number | undefined;
maxHeight?: string | number | undefined;
maxWidth?: string | number | undefined;
minHeight?: string | number | undefined;
minWidth?: string | number | undefined;
overflow?: "visible" | "hidden" | "scroll" | undefined;
paddingEnd?: string | number | undefined;
paddingStart?: string | number | undefined;
position?: "absolute" | "relative" | undefined;
right?: string | number | undefined;
start?: string | number | undefined;
top?: string | number | undefined;
width?: string | number | undefined;
zIndex?: number | undefined;
direction?: "inherit" | "ltr" | "rtl" | undefined;
shadowColor?: string | undefined;
shadowOffset?: {
width: number;
height: number;
} | undefined;
shadowOpacity?: number | undefined;
shadowRadius?: number | undefined;
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;
transformMatrix?: number[] | undefined;
rotation?: number | undefined;
scaleX?: number | undefined;
scaleY?: number | undefined;
translateX?: number | undefined;
translateY?: number | undefined;
};
};
_getInset: (key: "left" | "right" | "top" | "bottom" | "horizontal" | "vertical") => number;
}