react-native-safe-area-view/lib/module/index.js

Add padding to your views to account for notches, home indicators, status bar, and possibly other future things.

import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/brentvatne/coding/react-native-safe-area-view/src/index.tsx";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(source,true).forEach(function(key){_defineProperty(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}import*as React from'react';import{Animated,Dimensions,InteractionManager,StyleSheet}from'react-native';import{SafeAreaContext,SafeAreaProvider,SafeAreaConsumer,useSafeArea}from'react-native-safe-area-context';import shallowEquals from'./shallowEquals';export{useSafeArea,SafeAreaProvider,SafeAreaConsumer,SafeAreaContext};var SafeAreaView=function(_React$Component){_inherits(SafeAreaView,_React$Component);function SafeAreaView(){var _getPrototypeOf2;var _this;_classCallCheck(this,SafeAreaView);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(SafeAreaView)).call.apply(_getPrototypeOf2,[this].concat(args)));_this._isMounted=false;_this._view=React.createRef();_this.state={touchesTop:true,touchesBottom:true,touchesLeft:true,touchesRight:true,viewWidth:0,viewHeight:0};_this._handleLayout=function(e){if(_this.props.onLayout)_this.props.onLayout(e);_this._updateMeasurements();};_this._updateMeasurements=function(){if(!_this._isMounted)return;if(!_this._view.current)return;var _getResolvedDimension=getResolvedDimensions(),WIDTH=_getResolvedDimension.width,HEIGHT=_getResolvedDimension.height;_this._view.current.getNode().measureInWindow(function(realX,realY,winWidth,winHeight){if(!_this._view.current){return;}if(realY>=HEIGHT){realY=realY%HEIGHT;}else if(realY<0){realY=realY%HEIGHT+HEIGHT;}if(realX>=WIDTH){realX=realX%WIDTH;}else if(realX<0){realX=realX%WIDTH+WIDTH;}var nextState={touchesTop:realY===0,touchesBottom:realY+winHeight>=HEIGHT,touchesLeft:realX===0,touchesRight:realX+winWidth>=WIDTH,viewWidth:winWidth,viewHeight:winHeight};if(!shallowEquals(nextState,_this.state)){_this.setState(nextState);}});};_this._getSafeAreaStyle=function(){var _this$state=_this.state,touchesTop=_this$state.touchesTop,touchesBottom=_this$state.touchesBottom,touchesLeft=_this$state.touchesLeft,touchesRight=_this$state.touchesRight;var forceInset=_this.props.forceInset;var _this$_getViewStyles=_this._getViewStyles(),paddingTop=_this$_getViewStyles.paddingTop,paddingBottom=_this$_getViewStyles.paddingBottom,paddingLeft=_this$_getViewStyles.paddingLeft,paddingRight=_this$_getViewStyles.paddingRight,viewStyle=_this$_getViewStyles.viewStyle;var style=_objectSpread({},viewStyle,{paddingTop:touchesTop?_this._getInset('top'):0,paddingBottom:touchesBottom?_this._getInset('bottom'):0,paddingLeft:touchesLeft?_this._getInset('left'):0,paddingRight:touchesRight?_this._getInset('right'):0});if(forceInset&&typeof forceInset!=='boolean'){getKeys(forceInset).forEach(function(key){var inset=0;if(forceInset[key]==='always'){inset=_this._getInset(key);}else if(forceInset[key]==='never'){inset=0;}switch(key){case'horizontal':{style.paddingLeft=inset;style.paddingRight=inset;break;}case'vertical':{style.paddingTop=inset;style.paddingBottom=inset;break;}case'left':{style.paddingLeft=inset;break;}case'right':{style.paddingRight=inset;break;}case'top':{style.paddingTop=inset;break;}case'bottom':{style.paddingBottom=inset;break;}}});}if(style.height&&typeof style.height==='number'){style.height+=style.paddingTop+style.paddingBottom;}if(style.width&&typeof style.width==='number'){style.width+=style.paddingLeft+style.paddingRight;}style.paddingTop=Math.max(style.paddingTop,paddingTop);style.paddingBottom=Math.max(style.paddingBottom,paddingBottom);style.paddingLeft=Math.max(style.paddingLeft,paddingLeft);style.paddingRight=Math.max(style.paddingRight,paddingRight);return style;};_this._getViewStyles=function(){var viewWidth=_this.state.viewWidth;var _StyleSheet$flatten=StyleSheet.flatten(_this.props.style||{}),_StyleSheet$flatten$p=_StyleSheet$flatten.padding,padding=_StyleSheet$flatten$p===void 0?0:_StyleSheet$flatten$p,_StyleSheet$flatten$p2=_StyleSheet$flatten.paddingVertical,paddingVertical=_StyleSheet$flatten$p2===void 0?padding:_StyleSheet$flatten$p2,_StyleSheet$flatten$p3=_StyleSheet$flatten.paddingHorizontal,paddingHorizontal=_StyleSheet$flatten$p3===void 0?padding:_StyleSheet$flatten$p3,_StyleSheet$flatten$p4=_StyleSheet$flatten.paddingTop,paddingTop=_StyleSheet$flatten$p4===void 0?paddingVertical:_StyleSheet$flatten$p4,_StyleSheet$flatten$p5=_StyleSheet$flatten.paddingBottom,paddingBottom=_StyleSheet$flatten$p5===void 0?paddingVertical:_StyleSheet$flatten$p5,_StyleSheet$flatten$p6=_StyleSheet$flatten.paddingLeft,paddingLeft=_StyleSheet$flatten$p6===void 0?paddingHorizontal:_StyleSheet$flatten$p6,_StyleSheet$flatten$p7=_StyleSheet$flatten.paddingRight,paddingRight=_StyleSheet$flatten$p7===void 0?paddingHorizontal:_StyleSheet$flatten$p7,viewStyle=_objectWithoutProperties(_StyleSheet$flatten,["padding","paddingVertical","paddingHorizontal","paddingTop","paddingBottom","paddingLeft","paddingRight"]);if(typeof paddingTop!=='number'){paddingTop=doubleFromPercentString(paddingTop)*viewWidth;}if(typeof paddingBottom!=='number'){paddingBottom=doubleFromPercentString(paddingBottom)*viewWidth;}if(typeof paddingLeft!=='number'){paddingLeft=doubleFromPercentString(paddingLeft)*viewWidth;}if(typeof paddingRight!=='number'){paddingRight=doubleFromPercentString(paddingRight)*viewWidth;}return{paddingTop:paddingTop,paddingBottom:paddingBottom,paddingLeft:paddingLeft,paddingRight:paddingRight,viewStyle:viewStyle};};_this._getInset=function(key){if(_this.context===null){throw new Error('<SafeAreaView /> must be wrapped by react-native-safe-area-context <SafeAreaProvider />');}else if(key==='horizontal'){return Math.max(_this.context.left,_this.context.right);}else if(key==='vertical'){return Math.max(_this.context.top,_this.context.bottom);}else{return _this.context[key];}};return _this;}_createClass(SafeAreaView,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this._isMounted=true;InteractionManager.runAfterInteractions(function(){_this2._updateMeasurements();});}},{key:"componentWillUnmount",value:function componentWillUnmount(){this._isMounted=false;}},{key:"render",value:function render(){var _this$props=this.props,_this$props$forceInse=_this$props.forceInset,forceInset=_this$props$forceInse===void 0?false:_this$props$forceInse,style=_this$props.style,props=_objectWithoutProperties(_this$props,["forceInset","style"]);return React.createElement(Animated.View,_extends({ref:this._view,pointerEvents:"box-none"},props,{onLayout:this._handleLayout,style:this._getSafeAreaStyle(),__source:{fileName:_jsxFileName,lineNumber:84}}));}}]);return SafeAreaView;}(React.Component);SafeAreaView.contextType=SafeAreaContext;export{SafeAreaView as default};function getResolvedDimensions(){var _Dimensions$get=Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;if(width===0&&height===0)return Dimensions.get('screen');return{width:width,height:height};}function doubleFromPercentString(percent){if(!percent.includes('%')){return 0;}var dbl=parseFloat(percent)/100;if(isNaN(dbl))return 0;return dbl;}function getKeys(object){return Object.keys(object);}
//# sourceMappingURL=index.js.map