@bigbinary/neetoui-rn 0.0.171 → 0.0.174

package/README.md

@@ -13,17 +13,17 @@ Storybook: https://neetoui-rn.onrender.com/
 ## Installation
 
 ```
-yarn add @bigbinary/neetoui-rn react-native-svg react-native-webview @shopify/flash-list
+yarn add @bigbinary/neetoui-rn react-native-svg react-native-webview @shopify/flash-list react-native-reanimated
 ```
 
 Navigate to iOS folder and run:
+
 ```
 pod install
 ```
 
 > All the native components will be linked automatically.
 
-
 ## Getting Started
 
 ## react-native-safe-area-context

package/lib/components/FlashList.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.FlashList=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _flashList=require("@shopify/flash-list");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _native2=require("styled-components/native");var _reactNative=require("react-native");var _hooks=require("../hooks");var _excluded=["durationPerItem","SkeletonComponent","placeHolderItemCount","isLoading","data","onRefresh","keyExtractor"],_excluded2=["renderItem","initialDelay","durationPerItem","isLoading","SkeletonComponent"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Placeholder=function Placeholder(){var theme=(0,_react.useContext)(_native2.ThemeContext);return _react.default.createElement(_native.default,{height:68,width:400,viewBox:"0 0 400 50",backgroundColor:theme.colors.lightgrey,foregroundColor:theme.colors.grey300,__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:5}},_react.default.createElement(_native.Rect,{x:"0",y:"8",width:400,height:"70",__self:_this,__source:{fileName:_jsxFileName,lineNumber:29,columnNumber:7}}));};var FlashList=function FlashList(_ref){var _ref$durationPerItem=_ref.durationPerItem,durationPerItem=_ref$durationPerItem===void 0?200:_ref$durationPerItem,SkeletonComponent=_ref.SkeletonComponent,_ref$placeHolderItemC=_ref.placeHolderItemCount,placeHolderItemCount=_ref$placeHolderItemC===void 0?10:_ref$placeHolderItemC,_ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?false:_ref$isLoading,_ref$data=_ref.data,data=_ref$data===void 0?[]:_ref$data,_ref$onRefresh=_ref.onRefresh,onRefresh=_ref$onRefresh===void 0?function(){}:_ref$onRefresh,_keyExtractor=_ref.keyExtractor,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var dummyData=Array.apply(null,Array(placeHolderItemCount));var _useRefreshByUser=(0,_hooks.useRefreshByUser)(onRefresh),isRefetchingByUser=_useRefreshByUser.isRefetchingByUser,refetchByUser=_useRefreshByUser.refetchByUser;return _react.default.createElement(FadeInFlatList,(0,_extends2.default)({durationPerItem:durationPerItem,SkeletonComponent:SkeletonComponent,isLoading:isLoading,extraData:{isLoading:isLoading},data:isLoading?dummyData:data,refreshControl:onRefresh&&_react.default.createElement(_reactNative.RefreshControl,{refreshing:isRefetchingByUser,onRefresh:refetchByUser,__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:11}}),keyExtractor:function keyExtractor(item,index){return isLoading||!_keyExtractor?index.toString():_keyExtractor(item,index);}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:5}}));};exports.FlashList=FlashList;var FadeInFlatList=function FadeInFlatList(_ref2){var originalRenderItem=_ref2.renderItem,_ref2$initialDelay=_ref2.initialDelay,initialDelay=_ref2$initialDelay===void 0?250:_ref2$initialDelay,_ref2$durationPerItem=_ref2.durationPerItem,durationPerItem=_ref2$durationPerItem===void 0?200:_ref2$durationPerItem,_ref2$isLoading=_ref2.isLoading,isLoading=_ref2$isLoading===void 0?false:_ref2$isLoading,SkeletonComponent=_ref2.SkeletonComponent,props=(0,_objectWithoutProperties2.default)(_ref2,_excluded2);var value=(0,_reactNativeReanimated.useSharedValue)(0);var FadeInComponent=(0,_react.useCallback)(function(_ref3){var index=_ref3.index,children=_ref3.children;var inputRange=index===0?[-1,0,1,2]:[index-1,index,index+1,index+2];var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[0,0,1,1],_reactNativeReanimated.Extrapolation.CLAMP),transform:[{translateX:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[25,15,10,0],_reactNativeReanimated.Extrapolation.CLAMP)}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,value:value,inputRange:inputRange,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,value,inputRange,Extrapolation}=jsThis._closure;{return{opacity:interpolate(value.value,inputRange,[0,0,1,1],Extrapolation.CLAMP),transform:[{translateX:interpolate(value.value,inputRange,[25,15,10,0],Extrapolation.CLAMP)}]};}}";_f.__workletHash=13443821877058;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js (88:46)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:14}},children);},[]);var Item=(0,_react.useCallback)(function(_ref4){var _item$extraData;var item=_ref4.item;return item!=null&&(_item$extraData=item.extraData)!=null&&_item$extraData.isLoading?_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:118,columnNumber:9}},SkeletonComponent||_react.default.createElement(Placeholder,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:119,columnNumber:33}})):item.index===0?originalRenderItem(item):_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:124,columnNumber:9}},originalRenderItem(item));},[]);var renderItem=(0,_react.useCallback)(function(item){return _react.default.createElement(Item,{item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:12}});},[]);(0,_react.useEffect)(function(){value.value=0;value.value=(0,_reactNativeReanimated.withDelay)(initialDelay,(0,_reactNativeReanimated.withTiming)(props.data.length+1,{duration:props.data.length*durationPerItem}));},[props.data.length,durationPerItem,initialDelay,value,isLoading]);return _react.default.createElement(_flashList.FlashList,(0,_extends2.default)({},props,{renderItem:renderItem,__self:_this,__source:{fileName:_jsxFileName,lineNumber:147,columnNumber:10}}));};FlashList.propTypes={SkeletonComponent:_propTypes.default.element,durationPerItem:_propTypes.default.number,data:_propTypes.default.array.isRequired,isLoading:_propTypes.default.bool,placeHolderItemCount:_propTypes.default.number,onRefresh:_propTypes.default.func,keyExtractor:_propTypes.default.func};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.FlashList=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _flashList=require("@shopify/flash-list");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _native2=require("styled-components/native");var _reactNative=require("react-native");var _hooks=require("../hooks");var _excluded=["durationPerItem","SkeletonComponent","placeHolderItemCount","isLoading","data","onRefresh","onEndReached","keyExtractor"],_excluded2=["renderItem","durationPerItem","isLoading","SkeletonComponent"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var _Dimensions$get=_reactNative.Dimensions.get("screen"),width=_Dimensions$get.width;var Placeholder=function Placeholder(){var theme=(0,_react.useContext)(_native2.ThemeContext);return _react.default.createElement(_native.default,{marginHorizontal:15,height:"60",width:400,viewBox:"0 0 400 50",backgroundColor:theme.colors.lightgrey,foregroundColor:theme.colors.grey300,__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:5}},_react.default.createElement(_native.Rect,{x:"0",rx:"5",ry:"5",width:width-30,height:"50",__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}));};var FlashList=function FlashList(_ref){var _ref$durationPerItem=_ref.durationPerItem,durationPerItem=_ref$durationPerItem===void 0?200:_ref$durationPerItem,SkeletonComponent=_ref.SkeletonComponent,_ref$placeHolderItemC=_ref.placeHolderItemCount,placeHolderItemCount=_ref$placeHolderItemC===void 0?10:_ref$placeHolderItemC,_ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?false:_ref$isLoading,_ref$data=_ref.data,data=_ref$data===void 0?[]:_ref$data,_ref$onRefresh=_ref.onRefresh,onRefresh=_ref$onRefresh===void 0?function(){}:_ref$onRefresh,_ref$onEndReached=_ref.onEndReached,onEndReached=_ref$onEndReached===void 0?function(){}:_ref$onEndReached,_keyExtractor=_ref.keyExtractor,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var dummyData=Array.apply(null,Array(placeHolderItemCount));var _useRefreshByUser=(0,_hooks.useRefreshByUser)(onRefresh),isRefetchingByUser=_useRefreshByUser.isRefetchingByUser,refetchByUser=_useRefreshByUser.refetchByUser;return _react.default.createElement(FadeInFlatList,(0,_extends2.default)({key:isLoading,durationPerItem:durationPerItem,SkeletonComponent:SkeletonComponent,isLoading:isLoading,extraData:{isLoading:isLoading,placeHolderItemCount:placeHolderItemCount},data:isLoading?dummyData:data,refreshControl:onRefresh&&_react.default.createElement(_reactNative.RefreshControl,{refreshing:isRefetchingByUser,onRefresh:refetchByUser,__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:11}}),placeHolderItemCount:placeHolderItemCount,keyExtractor:function keyExtractor(item,index){return isLoading||!_keyExtractor?index.toString():_keyExtractor(item,index);}},rest,{onEndReached:isLoading?undefined:onEndReached,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:5}}));};exports.FlashList=FlashList;var FadeInFlatList=function FadeInFlatList(_ref2){var originalRenderItem=_ref2.renderItem,_ref2$durationPerItem=_ref2.durationPerItem,durationPerItem=_ref2$durationPerItem===void 0?200:_ref2$durationPerItem,_ref2$isLoading=_ref2.isLoading,isLoading=_ref2$isLoading===void 0?false:_ref2$isLoading,SkeletonComponent=_ref2.SkeletonComponent,props=(0,_objectWithoutProperties2.default)(_ref2,_excluded2);var value=(0,_reactNativeReanimated.useSharedValue)(0);var FadeInComponent=(0,_react.useCallback)(function(_ref3){var index=_ref3.index,children=_ref3.children;var inputRange=[index-1,index,index+1,index+2];var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[0,0.6,1,1],_reactNativeReanimated.Extrapolation.CLAMP),transform:[{translateX:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[25,15,10,0],_reactNativeReanimated.Extrapolation.CLAMP)}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,value:value,inputRange:inputRange,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,value,inputRange,Extrapolation}=jsThis._closure;{return{opacity:interpolate(value.value,inputRange,[0,0.6,1,1],Extrapolation.CLAMP),transform:[{translateX:interpolate(value.value,inputRange,[25,15,10,0],Extrapolation.CLAMP)}]};}}";_f.__workletHash=2524714757658;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js (90:46)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:14}},children);},[]);var Item=function Item(_ref4){var _item$extraData;var item=_ref4.item;return item!=null&&(_item$extraData=item.extraData)!=null&&_item$extraData.isLoading?_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:119,columnNumber:7}},SkeletonComponent||_react.default.createElement(Placeholder,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:31}})):_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:7}},originalRenderItem(item));};var renderItem=function renderItem(item){return isLoading||item.index<props.placeHolderItemCount?_react.default.createElement(Item,{item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:7}}):originalRenderItem(item);};(0,_react.useEffect)(function(){value.value=0;value.value=(0,_reactNativeReanimated.withTiming)(props.data.length+1,{duration:props.data.length*durationPerItem});},[durationPerItem,value,isLoading]);return _react.default.createElement(_flashList.FlashList,(0,_extends2.default)({},props,{renderItem:renderItem,__self:_this,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:10}}));};FlashList.propTypes={SkeletonComponent:_propTypes.default.element,durationPerItem:_propTypes.default.number,data:_propTypes.default.array.isRequired,isLoading:_propTypes.default.bool,placeHolderItemCount:_propTypes.default.number,onRefresh:_propTypes.default.func,onEndReached:_propTypes.default.func,keyExtractor:_propTypes.default.func};

package/lib/components/SegmentedTopBar.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SegmentedTopBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _=require("./");var _theme=require("../theme");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentedTopBar.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var defaultShadowStyle={shadowColor:_theme.theme.colors.background.grey800,shadowOffset:{width:0,height:2},shadowOpacity:0.23,shadowRadius:2.62,elevation:4};var DEFAULT_SPRING_CONFIG={stiffness:150,damping:20,mass:1,overshootClamping:false,restSpeedThreshold:0.001,restDisplacementThreshold:0.001};var width=_reactNative.Dimensions.get("screen").width-32;var SegmentedTopBar=function SegmentedTopBar(_ref){var _ref$state=_ref.state,routes=_ref$state.routes,index=_ref$state.index,inactiveSegmentStyle=_ref.inactiveSegmentStyle,activeSegmentStyle=_ref.activeSegmentStyle,activeTextStyle=_ref.activeTextStyle,inactiveTextStyle=_ref.inactiveTextStyle,navigation=_ref.navigation,height=_ref.height;var translateValue=(width-4)/(routes==null?void 0:routes.length);var tabTranslateValue=(0,_reactNativeReanimated.useSharedValue)(0);(0,_react.useEffect)(function(){tabTranslateValue.value=(0,_reactNativeReanimated.withSpring)(index*(translateValue*1),DEFAULT_SPRING_CONFIG);},[index]);var tabTranslateAnimatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{transform:[{translateX:tabTranslateValue.value}]};};_f._closure={tabTranslateValue:tabTranslateValue};_f.asString="function _f(){const{tabTranslateValue}=jsThis._closure;{return{transform:[{translateX:tabTranslateValue.value}]};}}";_f.__workletHash=13055522218631;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentedTopBar.js (97:54)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.defaultSegmentedControlWrapper,inactiveSegmentStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:5}},_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.movingSegmentStyle,activeSegmentStyle,defaultShadowStyle,_reactNative.StyleSheet.absoluteFill,{width:width/(routes==null?void 0:routes.length)},tabTranslateAnimatedStyles],__self:_this,__source:{fileName:_jsxFileName,lineNumber:107,columnNumber:7}}),routes.map(function(_ref2,i){var name=_ref2.name;var currentIndexTextStyle=index===index+1?activeTextStyle:inactiveTextStyle;return _react.default.createElement(_.Touchable,(0,_extends2.default)({onPress:function onPress(){return navigation.navigate(name);},key:i,flex:1,height:height,alignItems:"center",justifyContent:"center"},currentIndexTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:11}}),_react.default.createElement(_.Typography,{fontSize:"xs",textAlign:"center",color:"font.grey800",fontFamily:"sf500",__self:_this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:13}},name));}));};exports.SegmentedTopBar=SegmentedTopBar;var styles=_reactNative.StyleSheet.create({segmentedControlWrapper:{display:"flex",flexDirection:"row",alignItems:"center",borderRadius:8,width:width},defaultSegmentedControlWrapper:{position:"relative",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:8,backgroundColor:"#F6F6FA",width:width,marginBottom:5},movingSegmentStyle:{top:0,marginVertical:2,marginHorizontal:2,borderRadius:6,backgroundColor:"#FFFFFF"}});SegmentedTopBar.propTypes={tabs:_propTypes.default.arrayOf(_propTypes.default.shape({name:_propTypes.default.string,Component:_propTypes.default.oneOfType([_propTypes.default.element,_propTypes.default.func])})).isRequired,inactiveSegmentStyle:_propTypes.default.object,activeSegmentStyle:_propTypes.default.object,inactiveTextStyle:_propTypes.default.object,activeTextStyle:_propTypes.default.object,height:_propTypes.default.number};SegmentedTopBar.defaultProps={tabs:[],height:32};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"BottomTabBar",{enumerable:true,get:function get(){return _BottomTabBar.BottomTabBar;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlashList",{enumerable:true,get:function get(){return _FlashList.FlashList;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentPicker",{enumerable:true,get:function get(){return _SegmentPicker.SegmentPicker;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _SocialButton=require("./SocialButton");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentPicker=require("./SegmentPicker");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");var _FlashList=require("./FlashList");var _BottomTabBar=require("./BottomTabBar");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"BottomTabBar",{enumerable:true,get:function get(){return _BottomTabBar.BottomTabBar;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlashList",{enumerable:true,get:function get(){return _FlashList.FlashList;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentedTopBar",{enumerable:true,get:function get(){return _SegmentedTopBar.SegmentedTopBar;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _SocialButton=require("./SocialButton");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentedTopBar=require("./SegmentedTopBar");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");var _FlashList=require("./FlashList");var _BottomTabBar=require("./BottomTabBar");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.171",
+  "version": "0.0.174",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -42,6 +42,7 @@
     ]
   },
   "peerDependencies": {
+    "react-native-reanimated": "^2.7.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-svg": "*",
     "react-native-webview": "11.14.4"
@@ -59,7 +60,6 @@
     "react-native-modal": "^13.0.0",
     "react-native-pell-rich-editor": "^1.8.6",
     "react-native-popover-view": "^4.1.0",
-    "react-native-reanimated": "^2.7.0",
     "react-native-remix-icon": "^0.3.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-snap-carousel": "^3.9.1",
@@ -77,6 +77,7 @@
     "@react-native-community/eslint-config": "^3.0.1",
     "@react-native-community/slider": "^4.1.12",
     "@react-navigation/bottom-tabs": "^6.3.2",
+    "@react-navigation/material-top-tabs": "^6.2.2",
     "@react-navigation/native": "^6.0.11",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-controls": "^6.3.12",
@@ -120,10 +121,13 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-native": "0.66.2",
+    "react-native-pager-view": "^5.4.25",
+    "react-native-reanimated": "^2.7.0",
     "react-native-screens": "^3.15.0",
     "react-native-storybook-loader": "^2.0.4",
     "react-native-svg": "^12.1.1",
     "react-native-svg-transformer": "^1.0.0",
+    "react-native-tab-view": "^3.1.1",
     "react-native-web": "^0.17.5",
     "react-native-webview": "11.14.4",
     "react-test-renderer": "17.0.2",

package/src/components/FlashList.js

@@ -6,27 +6,28 @@ import Animated, {
   interpolate,
   useAnimatedStyle,
   useSharedValue,
-  withDelay,
   withTiming,
 } from "react-native-reanimated";
 import PropTypes from "prop-types";
 import ContentLoader, { Rect } from "react-content-loader/native";
 import { ThemeContext } from "styled-components/native";
-import { RefreshControl } from "react-native";
+import { Dimensions, RefreshControl } from "react-native";
 
 import { useRefreshByUser } from "@hooks";
 
+const { width } = Dimensions.get("screen");
 const Placeholder = () => {
   const theme = useContext(ThemeContext);
   return (
     <ContentLoader
-      height={68}
+      marginHorizontal={15}
+      height="60"
       width={400}
       viewBox="0 0 400 50"
       backgroundColor={theme.colors.lightgrey}
       foregroundColor={theme.colors.grey300}
     >
-      <Rect x="0" y="8" width={400} height="70" />
+      <Rect x="0" rx="5" ry="5" width={width - 30} height="50" />
     </ContentLoader>
   );
 };
@@ -38,6 +39,7 @@ export const FlashList = ({
   isLoading = false,
   data = [],
   onRefresh = () => {},
+  onEndReached = () => {},
   keyExtractor,
   ...rest
 }) => {
@@ -47,10 +49,11 @@ export const FlashList = ({
 
   return (
     <FadeInFlatList
+      key={isLoading}
       durationPerItem={durationPerItem}
       SkeletonComponent={SkeletonComponent}
       isLoading={isLoading}
-      extraData={{ isLoading }}
+      extraData={{ isLoading, placeHolderItemCount }}
       data={isLoading ? dummyData : data}
       refreshControl={
         onRefresh && (
@@ -60,19 +63,20 @@ export const FlashList = ({
           />
         )
       }
+      placeHolderItemCount={placeHolderItemCount}
       keyExtractor={(item, index) => {
         return isLoading || !keyExtractor
           ? index.toString()
           : keyExtractor(item, index);
       }}
       {...rest}
+      onEndReached={isLoading ? undefined : onEndReached}
     />
   );
 };
 
 const FadeInFlatList = ({
   renderItem: originalRenderItem,
-  initialDelay = 250,
   durationPerItem = 200,
   isLoading = false,
   SkeletonComponent,
@@ -82,15 +86,13 @@ const FadeInFlatList = ({
 
   const FadeInComponent = useCallback(
     ({ index, children }) => {
-      const inputRange =
-        index === 0 ? [-1, 0, 1, 2] : [index - 1, index, index + 1, index + 2];
-
+      const inputRange = [index - 1, index, index + 1, index + 2];
       const animatedStyles = useAnimatedStyle(() => {
         return {
           opacity: interpolate(
             value.value,
             inputRange,
-            [0, 0, 1, 1],
+            [0, 0.6, 1, 1],
             Extrapolation.CLAMP
           ),
           transform: [
@@ -112,37 +114,33 @@ const FadeInFlatList = ({
     []
   );
 
-  const Item = useCallback(
-    ({ item }) => {
-      return item?.extraData?.isLoading ? (
-        <FadeInComponent index={item.index}>
-          {SkeletonComponent || <Placeholder />}
-        </FadeInComponent>
-      ) : item.index === 0 ? (
-        originalRenderItem(item)
-      ) : (
-        <FadeInComponent index={item.index}>
-          {originalRenderItem(item)}
-        </FadeInComponent>
-      );
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+  const Item = ({ item }) => {
+    return item?.extraData?.isLoading ? (
+      <FadeInComponent index={item.index}>
+        {SkeletonComponent || <Placeholder />}
+      </FadeInComponent>
+    ) : (
+      <FadeInComponent index={item.index}>
+        {originalRenderItem(item)}
+      </FadeInComponent>
+    );
+  };
 
-  const renderItem = useCallback(item => {
-    return <Item item={item} />;
-  }, []);
+  const renderItem = item => {
+    return isLoading || item.index < props.placeHolderItemCount ? (
+      <Item item={item} />
+    ) : (
+      originalRenderItem(item)
+    );
+  };
 
   useEffect(() => {
     value.value = 0;
-    value.value = withDelay(
-      initialDelay,
-      withTiming(props.data.length + 1, {
-        duration: props.data.length * durationPerItem,
-      })
-    );
-  }, [props.data.length, durationPerItem, initialDelay, value, isLoading]);
+    value.value = withTiming(props.data.length + 1, {
+      duration: props.data.length * durationPerItem,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [durationPerItem, value, isLoading]);
 
   return <ShopifyFlashList {...props} renderItem={renderItem} />;
 };
@@ -154,5 +152,6 @@ FlashList.propTypes = {
   isLoading: PropTypes.bool,
   placeHolderItemCount: PropTypes.number,
   onRefresh: PropTypes.func,
+  onEndReached: PropTypes.func,
   keyExtractor: PropTypes.func,
 };

package/src/components/{SegmentPicker.js → SegmentedTopBar.js}

@@ -1,5 +1,6 @@
+/* eslint-disable react/prop-types */
 import PropTypes from "prop-types";
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect } from "react";
 import { Dimensions, StyleSheet } from "react-native";
 import Animated, {
   useAnimatedStyle,
@@ -21,7 +22,7 @@ const defaultShadowStyle = {
   elevation: 4,
 };
 
-// eslint-disable-next-line neeto/no-dangling-constants
+// eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
 const DEFAULT_SPRING_CONFIG = {
   stiffness: 150,
   damping: 20,
@@ -39,60 +40,59 @@ const width = Dimensions.get("screen").width - 32;
  * A Segment Picker component that provides toggling between two or more views.
  *
  * <div class="screenshots">
- *   <img src="screenshots/segmentPicker/segmentpickers.png" />
+ *   <img src="screenshots/segmentedTopBar/segmentedTopBars.png" />
  * </div>
  *
  *   ## Usage
  * ```js
  * import * as React from 'react';
- * import { Container, SegmentPicker } from '@bigbinary/neetoui-rn';
+ * import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
+ * import { NavigationContainer } from "@react-navigation/native";
+ *
+ * import { SegmentedTopBar } from '@bigbinary/neetoui-rn';
+ *
+ * const Tab = createMaterialTopTabNavigator();
  *
  * export default function Main(){
- *   const [tabIndex, setTabIndex] = useState(1);
  *
  *  return (
- *    <Container flex={1} alignItems="center" justifyContent="center">
- *      <Container my={3}>
- *        <SegmentPicker
- *          tabs={["On", "Off"]}
- *          currentIndex={tabIndex}
- *          onChange={setTabIndex}
+ *    <NavigationContainer>
+ *      <Tab.Navigator tabBar={props => <SegmentedTopBar {...props} />} >
+ *        <Tab.Screen
+ *          name="Home"
+ *          component={HomeScreen}
+ *        />
+ *
+ *        <Tab.Screen
+ *          name="Settings"
+ *          component={SettingsScreen}
  *        />
- *      </Container>
- *    </Container>
+ *      </Tab.Navigator>
+ *    </NavigationContainer>
  *  );
  * }
  * ```
  */
 
-export const SegmentPicker = ({
-  tabs,
-  onChange,
-  currentIndex,
+export const SegmentedTopBar = ({
+  state: { routes, index },
   inactiveSegmentStyle,
   activeSegmentStyle,
   activeTextStyle,
   inactiveTextStyle,
+  navigation,
   height,
 }) => {
-  const translateValue = (width - 4) / tabs?.length;
+  const translateValue = (width - 4) / routes?.length;
   const tabTranslateValue = useSharedValue(0);
 
-  // useCallBack with an empty array as input, which will call inner lambda only once and memoize the reference for future calls
-  const memoizedTabPressCallback = useCallback(
-    index => {
-      onChange(index);
-    },
-    [onChange]
-  );
-
   useEffect(() => {
     tabTranslateValue.value = withSpring(
-      currentIndex * (translateValue * 1),
+      index * (translateValue * 1),
       DEFAULT_SPRING_CONFIG
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentIndex]);
+  }, [index]);
 
   const tabTranslateAnimatedStyles = useAnimatedStyle(() => {
     return {
@@ -111,32 +111,31 @@ export const SegmentPicker = ({
           defaultShadowStyle,
           StyleSheet.absoluteFill,
           {
-            width: width / tabs?.length,
+            width: width / routes?.length,
           },
           tabTranslateAnimatedStyles,
         ]}
       />
-
-      {tabs.map((label, index) => {
+      {routes.map(({ name }, i) => {
         const currentIndexTextStyle =
-          currentIndex === index ? activeTextStyle : inactiveTextStyle;
+          index === index + 1 ? activeTextStyle : inactiveTextStyle;
         return (
           <Touchable
-            key={index}
+            onPress={() => navigation.navigate(name)}
+            key={i}
             flex={1}
-            onPress={() => memoizedTabPressCallback(index)}
             height={height}
+            alignItems="center"
             justifyContent="center"
-            activeOpacity={0.7}
+            {...currentIndexTextStyle}
           >
             <Typography
               fontSize="xs"
               textAlign="center"
               color="font.grey800"
               fontFamily="sf500"
-              {...currentIndexTextStyle}
             >
-              {label}
+              {name}
             </Typography>
           </Touchable>
         );
@@ -161,6 +160,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     backgroundColor: "#F6F6FA",
     width: width,
+    marginBottom: 5,
   },
   movingSegmentStyle: {
     top: 0,
@@ -171,19 +171,16 @@ const styles = StyleSheet.create({
   },
 });
 
-SegmentPicker.propTypes = {
+SegmentedTopBar.propTypes = {
   /**
    * Array of texts for the labels of each Segment/Tab.
    */
-  tabs: PropTypes.arrayOf(PropTypes.string).isRequired,
-  /**
-   * Callback called with the new value when it changes.
-   */
-  onChange: PropTypes.func.isRequired,
-  /**
-   * Index value of the currently selected Segment/Tab.
-   */
-  currentIndex: PropTypes.number.isRequired,
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      Component: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    })
+  ).isRequired,
   /**
    * To change the inactive segment container style.
    */
@@ -203,9 +200,7 @@ SegmentPicker.propTypes = {
   height: PropTypes.number,
 };
 
-SegmentPicker.defaultProps = {
+SegmentedTopBar.defaultProps = {
   tabs: [],
-  onChange: () => {},
-  currentIndex: 0,
   height: 32,
 };

package/src/components/index.js

@@ -26,7 +26,7 @@ export { MultiSelect } from "./MultiSelect";
 export { Divider } from "./Divider";
 export { FlatList } from "./FlatList";
 export { ScrollView } from "./ScrollView";
-export { SegmentPicker } from "./SegmentPicker";
+export { SegmentedTopBar } from "./SegmentedTopBar";
 export { ListItem } from "./ListItem";
 export { Carousel } from "./Carousel";
 export { OnBoarding } from "./OnBoarding";