@fabfit/react-native-parallax-header/lib/commonjs/parallax-header/index.js

Animated parallax headers for React Native

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _jsxFileName="/Users/jamiehalvorson/Documents/FabFit/Development/open-source/react-native-parallax-header/src/parallax-header/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(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var ParallaxHeader=function ParallaxHeader(_ref){var maxHeight=_ref.maxHeight,minHeight=_ref.minHeight,children=_ref.children,renderOverlay=_ref.renderOverlay,renderHeader=_ref.renderHeader,heroImage=_ref.heroImage;var HEADER_MAX_HEIGHT=_react.default.useMemo(function(){return maxHeight?maxHeight:550;},[maxHeight]);var HEADER_MIN_HEIGHT=_react.default.useMemo(function(){return minHeight?minHeight:170;},[minHeight]);var scrollPositionY=_react.default.useMemo(function(){return new _reactNative.Animated.Value(0);},[]);var HEADER_SCROLL_DISTANCE=_react.default.useMemo(function(){return HEADER_MAX_HEIGHT-HEADER_MIN_HEIGHT;},[HEADER_MAX_HEIGHT,HEADER_MIN_HEIGHT]);var headerTranslate=scrollPositionY.interpolate({inputRange:[0,HEADER_SCROLL_DISTANCE],outputRange:[0,-HEADER_SCROLL_DISTANCE],extrapolate:'clamp'});var imageOpacity=scrollPositionY.interpolate({inputRange:[0,HEADER_SCROLL_DISTANCE/2,HEADER_SCROLL_DISTANCE],outputRange:[1,1,0.7],extrapolate:'clamp'});var imageTranslate=scrollPositionY.interpolate({inputRange:[0,HEADER_SCROLL_DISTANCE],outputRange:[0,100],extrapolate:'clamp'});return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.Animated.ScrollView,{scrollEventThrottle:1,showsVerticalScrollIndicator:false,onScroll:_reactNative.Animated.event([{nativeEvent:{contentOffset:{y:scrollPositionY}}}],{useNativeDriver:true}),__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:{marginTop:HEADER_MAX_HEIGHT},__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:9}},children)),_react.default.createElement(_reactNative.Animated.View,{style:[styles.header,{height:HEADER_MAX_HEIGHT},{transform:[{translateY:headerTranslate}]}],__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:7}},!!heroImage&&!renderHeader&&_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.Animated.Image,{style:[styles.backgroundImage,{opacity:imageOpacity,height:HEADER_MAX_HEIGHT,transform:[{translateY:imageTranslate}]}],source:heroImage,testID:"hero-image",__source:{fileName:_jsxFileName,lineNumber:80,columnNumber:13}})),renderHeader&&_react.default.createElement(_reactNative.Animated.View,{style:[styles.backgroundImage,{opacity:imageOpacity,height:HEADER_MAX_HEIGHT,transform:[{translateY:imageTranslate}]}],__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:11}},_react.default.cloneElement(renderHeader(),{style:_objectSpread({},_reactNative.StyleSheet.absoluteFillObject,{height:HEADER_MAX_HEIGHT})}))),renderOverlay&&_react.default.createElement(_react.default.Fragment,null,_react.default.cloneElement(renderOverlay({scrollPositionY:scrollPositionY,scrollDistance:HEADER_SCROLL_DISTANCE,maxHeight:HEADER_MAX_HEIGHT}),{style:_objectSpread({},_reactNative.StyleSheet.absoluteFillObject,{height:HEADER_MAX_HEIGHT},renderOverlay({}).props.style)})));};var styles=_reactNative.StyleSheet.create({fill:{flex:1},content:{flex:1},header:{position:'absolute',top:0,left:0,right:0,backgroundColor:'rgba(45, 51, 59, 1)',overflow:'hidden'},backgroundImage:{position:'absolute',top:0,left:0,right:0,resizeMode:'cover'},bar:{backgroundColor:'transparent',height:32,alignItems:'center',justifyContent:'center',position:'absolute',top:0,left:0,right:0},title:{color:'white',fontSize:18}});var _default=ParallaxHeader;exports.default=_default;
//# sourceMappingURL=index.js.map