@bigbinary/neetoui-rn 0.0.196 → 0.0.197

package/README.md

@@ -13,7 +13,7 @@ Storybook: https://neetoui-rn.onrender.com/
 ## Installation
 
 ```
-yarn add @bigbinary/neetoui-rn react-native-svg react-native-webview @shopify/flash-list react-native-reanimated
+yarn add @bigbinary/neetoui-rn react-native-svg react-native-webview @shopify/flash-list react-native-reanimated react-native-fast-image
 ```
 
 Navigate to iOS folder and run:

package/index.d.ts

@@ -41,6 +41,7 @@ import {
   ToastConfig,
 } from "react-native-toast-message";
 import { RippleProps } from "react-native-material-ripple";
+import { FastImageProps } from "react-native-fast-image";
 
 import { theme as themeDef } from "./src/theme";
 import { BUTTON_VARIANTS } from "./src/components/Button";
@@ -116,7 +117,7 @@ type AlertShowParams = {
   buttons?: Array<AlertButton>;
 };
 
-interface AnimatedImageProps extends RNImageProps {
+interface AnimatedImageProps extends RNImageProps, FastImageProps {
   imageHeight?: number;
   imageWidth?: number;
   imageUrl: string;
@@ -162,8 +163,8 @@ interface BottomSheetProps extends ViewProps {
   contentType?: "checkbox" | null;
   canSearch?: boolean;
   onDonePress?: () => void;
-  valueExtractor?: () =>{};
-  labelExtractor?: () =>{};
+  valueExtractor?: () => {};
+  labelExtractor?: () => {};
 }
 
 interface ButtonProps extends TouchableProps {
@@ -310,7 +311,7 @@ interface MultiSelectProps extends ViewProps {
   NoResultsComponent?: React.ReactNode;
   maxItemSize?: number;
   moreItemLabelContainerStyle?: ViewStyle;
-  moreItemLabelStyle?: TextStyle
+  moreItemLabelStyle?: TextStyle;
 }
 
 type OnBoardingProps = {

package/lib/components/AnimatedImage.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.AnimatedImage=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _=require("./");var _imagePlaceholder=_interopRequireDefault(require("../../assets/images/image-placeholder.svg"));var _reactNative=require("react-native");var _theme=require("../theme");var _excluded=["imageHeight","imageWidth","imageUrl"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/AnimatedImage.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 AnimatedImage=function AnimatedImage(_ref){var _ref$imageHeight=_ref.imageHeight,imageHeight=_ref$imageHeight===void 0?139:_ref$imageHeight,_ref$imageWidth=_ref.imageWidth,imageWidth=_ref$imageWidth===void 0?255:_ref$imageWidth,imageUrl=_ref.imageUrl,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var opacity=(0,_reactNativeReanimated.useSharedValue)(0);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isImageLoaded=_useState2[0],setImageLoaded=_useState2[1];var profileImageStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.withTiming)(opacity.value,{duration:300,easing:_reactNativeReanimated.Easing.bezier(0.25,0.1,0.25,1)}),height:imageHeight,width:imageWidth,alignSelf:"center",borderRadius:10};};_f._closure={withTiming:_reactNativeReanimated.withTiming,opacity:opacity,Easing:{bezier:_reactNativeReanimated.Easing.bezier},imageHeight:imageHeight,imageWidth:imageWidth};_f.asString="function _f(){const{withTiming,opacity,Easing,imageHeight,imageWidth}=jsThis._closure;{return{opacity:withTiming(opacity.value,{duration:300,easing:Easing.bezier(0.25,0.1,0.25,1)}),height:imageHeight,width:imageWidth,alignSelf:\"center\",borderRadius:10};}}";_f.__workletHash=14435952499043;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/AnimatedImage.js (51:45)";_f.__optimalization=2;return _f;}());return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,{justifyContent:"center",alignItems:"center",borderRadius:10,overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:7}},_react.default.createElement(_reactNativeReanimated.default.Image,(0,_extends2.default)({style:profileImageStyle,source:{uri:imageUrl,headers:{Accept:"*/*","Content-Type":"application/json",Pragma:"no-cache"}},onLoad:function onLoad(){setImageLoaded(true);opacity.value=1;}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:9}})),!isImageLoaded&&_react.default.createElement(_.Container,{position:"absolute",__self:_this,__source:{fileName:_jsxFileName,lineNumber:90,columnNumber:11}},_react.default.createElement(_imagePlaceholder.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:91,columnNumber:13}}),_react.default.createElement(_.Container,{position:"absolute",bottom:15,right:15,__self:_this,__source:{fileName:_jsxFileName,lineNumber:92,columnNumber:13}},_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_theme.theme.colors.font.grey600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:93,columnNumber:15}})))));};exports.AnimatedImage=AnimatedImage;AnimatedImage.defaultProps={alignItems:"center",justifyContent:"center"};AnimatedImage.propTypes={imageHeight:_propTypes.default.number,imageWidth:_propTypes.default.number,imageUrl:_propTypes.default.string.isRequired};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.AnimatedImage=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativeFastImage=_interopRequireDefault(require("react-native-fast-image"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _imagePlaceholder=_interopRequireDefault(require("../../assets/images/image-placeholder.svg"));var _reactNative=require("react-native");var _theme=require("../theme");var _excluded=["imageHeight","imageWidth","imageUrl"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/AnimatedImage.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 StyledImage=(0,_native.default)(_reactNativeFastImage.default)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var AnimatedImage=function AnimatedImage(_ref){var _ref$imageHeight=_ref.imageHeight,imageHeight=_ref$imageHeight===void 0?139:_ref$imageHeight,_ref$imageWidth=_ref.imageWidth,imageWidth=_ref$imageWidth===void 0?255:_ref$imageWidth,imageUrl=_ref.imageUrl,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var opacity=(0,_reactNativeReanimated.useSharedValue)(0);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isImageLoaded=_useState2[0],setImageLoaded=_useState2[1];var profileImageStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.withTiming)(opacity.value,{duration:300,easing:_reactNativeReanimated.Easing.bezier(0.25,0.1,0.25,1)}),height:imageHeight,width:imageWidth,alignSelf:"center",borderRadius:10};};_f._closure={withTiming:_reactNativeReanimated.withTiming,opacity:opacity,Easing:{bezier:_reactNativeReanimated.Easing.bezier},imageHeight:imageHeight,imageWidth:imageWidth};_f.asString="function _f(){const{withTiming,opacity,Easing,imageHeight,imageWidth}=jsThis._closure;{return{opacity:withTiming(opacity.value,{duration:300,easing:Easing.bezier(0.25,0.1,0.25,1)}),height:imageHeight,width:imageWidth,alignSelf:\"center\",borderRadius:10};}}";_f.__workletHash=14435952499043;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/AnimatedImage.js (62:45)";_f.__optimalization=2;return _f;}());return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,{justifyContent:"center",alignItems:"center",borderRadius:10,overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:7}},_react.default.createElement(_reactNativeReanimated.default.View,{style:profileImageStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:83,columnNumber:9}},_react.default.createElement(StyledImage,(0,_extends2.default)({height:imageHeight,width:imageWidth,source:{uri:imageUrl,headers:{Accept:"*/*","Content-Type":"application/json",Pragma:"no-cache"}},onLoadStart:function onLoadStart(){setImageLoaded(false);opacity.value=0;},onLoad:function onLoad(){setImageLoaded(true);opacity.value=1;}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:11}}))),!isImageLoaded&&_react.default.createElement(_.Container,{position:"absolute",__self:_this,__source:{fileName:_jsxFileName,lineNumber:108,columnNumber:11}},_react.default.createElement(_imagePlaceholder.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:13}}),_react.default.createElement(_.Container,{position:"absolute",bottom:15,right:15,__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:13}},_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_theme.theme.colors.font.grey600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:15}})))));};exports.AnimatedImage=AnimatedImage;AnimatedImage.defaultProps={alignItems:"center",justifyContent:"center"};AnimatedImage.propTypes={imageHeight:_propTypes.default.number,imageWidth:_propTypes.default.number,imageUrl:_propTypes.default.string.isRequired};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.196",
+  "version": "0.0.197",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -43,6 +43,7 @@
     ]
   },
   "peerDependencies": {
+    "react-native-fast-image": "^8.6.0",
     "react-native-reanimated": "^2.7.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-svg": "*",
@@ -121,6 +122,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-native": "0.66.2",
+    "react-native-fast-image": "^8.6.0",
     "react-native-pager-view": "^5.4.25",
     "react-native-reanimated": "^2.7.0",
     "react-native-screens": "^3.15.0",

package/src/components/AnimatedImage.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import RNFImage from "react-native-fast-image";
 import PropTypes from "prop-types";
 import Animated, {
   Easing,
@@ -6,12 +7,22 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import styled from "styled-components/native";
+import { flexbox, space, border, color, layout } from "styled-system";
 
 import { Container } from "@components";
 import ImagePlaceholder from "@assets/images/image-placeholder.svg";
 import { ActivityIndicator } from "react-native";
 import { theme } from "../theme";
 
+const StyledImage = styled(RNFImage)`
+  ${flexbox}
+  ${space}
+  ${border}
+  ${color}
+  ${layout}
+`;
+
 /**
  * AnimatedImage can be used to display a placeholder before image is loaded with animation.
  *
@@ -69,22 +80,29 @@ export const AnimatedImage = ({
         borderRadius={10}
         overflow="hidden"
       >
-        <Animated.Image
-          style={profileImageStyle}
-          source={{
-            uri: imageUrl,
-            headers: {
-              Accept: "*/*",
-              "Content-Type": "application/json",
-              Pragma: "no-cache",
-            },
-          }}
-          onLoad={() => {
-            setImageLoaded(true);
-            opacity.value = 1;
-          }}
-          {...rest}
-        />
+        <Animated.View style={profileImageStyle}>
+          <StyledImage
+            height={imageHeight}
+            width={imageWidth}
+            source={{
+              uri: imageUrl,
+              headers: {
+                Accept: "*/*",
+                "Content-Type": "application/json",
+                Pragma: "no-cache",
+              },
+            }}
+            onLoadStart={() => {
+              setImageLoaded(false);
+              opacity.value = 0;
+            }}
+            onLoad={() => {
+              setImageLoaded(true);
+              opacity.value = 1;
+            }}
+            {...rest}
+          />
+        </Animated.View>
 
         {!isImageLoaded && (
           <Container position="absolute">