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

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

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"SafeAreaContext",{enumerable:true,get:function get(){return _reactNativeSafeAreaContext.SafeAreaContext;}});Object.defineProperty(exports,"SafeAreaProvider",{enumerable:true,get:function get(){return _reactNativeSafeAreaContext.SafeAreaProvider;}});Object.defineProperty(exports,"SafeAreaConsumer",{enumerable:true,get:function get(){return _reactNativeSafeAreaContext.SafeAreaConsumer;}});Object.defineProperty(exports,"useSafeArea",{enumerable:true,get:function get(){return _reactNativeSafeAreaContext.useSafeArea;}});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _shallowEquals=_interopRequireDefault(require("./shallowEquals"));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){(0,_defineProperty2.default)(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;}var SafeAreaView=function(_React$Component){(0,_inherits2.default)(SafeAreaView,_React$Component);function SafeAreaView(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,SafeAreaView);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(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(!(0,_shallowEquals.default)(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=_reactNative.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=(0,_objectWithoutProperties2.default)(_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;}(0,_createClass2.default)(SafeAreaView,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this._isMounted=true;_reactNative.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=(0,_objectWithoutProperties2.default)(_this$props,["forceInset","style"]);return React.createElement(_reactNative.Animated.View,(0,_extends2.default)({ref:this._view,pointerEvents:"box-none"},props,{onLayout:this._handleLayout,style:this._getSafeAreaStyle(),__source:{fileName:_jsxFileName,lineNumber:84}}));}}]);return SafeAreaView;}(React.Component);exports.default=SafeAreaView;SafeAreaView.contextType=_reactNativeSafeAreaContext.SafeAreaContext;function getResolvedDimensions(){var _Dimensions$get=_reactNative.Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;if(width===0&&height===0)return _reactNative.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