@bigbinary/neetoui-rn 0.0.196 → 0.0.199

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

@@ -10,7 +10,7 @@ import {
   LayoutProps,
   PositionProps,
   ButtonStyleProps,
-  TypographyProps,
+  TypographyProps as SSTypographyProps,
 } from "styled-system";
 import {
   ImageProps as RNImageProps,
@@ -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";
@@ -70,7 +71,21 @@ interface StyleProps
     BorderProps,
     ColorProps,
     LayoutProps,
-    PositionProps {}
+    PositionProps {
+  borderColor?: typeof theme.colors.border;
+  borderTopColor?: typeof theme.colors.border;
+  borderBottomColor?: typeof theme.colors.border;
+  borderLeftColor?: typeof theme.colors.border;
+  borderRightColor?: typeof theme.colors.border;
+  backgroundColor?: typeof theme.colors.background;
+  bg?: typeof theme.colors.background;
+  color?: typeof theme.colors.font;
+}
+
+interface TypographyProps extends SSTypographyProps {
+  fontFamily?: typeof theme.fonts;
+  fontSize?: typeof theme.fontSizes;
+}
 
 interface ViewProps extends RNViewProps, StyleProps {
   children?: React.ReactNode;
@@ -116,7 +131,7 @@ type AlertShowParams = {
   buttons?: Array<AlertButton>;
 };
 
-interface AnimatedImageProps extends RNImageProps {
+interface AnimatedImageProps extends RNImageProps, FastImageProps {
   imageHeight?: number;
   imageWidth?: number;
   imageUrl: string;
@@ -162,8 +177,8 @@ interface BottomSheetProps extends ViewProps {
   contentType?: "checkbox" | null;
   canSearch?: boolean;
   onDonePress?: () => void;
-  valueExtractor?: () =>{};
-  labelExtractor?: () =>{};
+  valueExtractor?: () => {};
+  labelExtractor?: () => {};
 }
 
 interface ButtonProps extends TouchableProps {
@@ -310,7 +325,7 @@ interface MultiSelectProps extends ViewProps {
   NoResultsComponent?: React.ReactNode;
   maxItemSize?: number;
   moreItemLabelContainerStyle?: ViewStyle;
-  moreItemLabelStyle?: TextStyle
+  moreItemLabelStyle?: TextStyle;
 }
 
 type OnBoardingProps = {
@@ -382,7 +397,7 @@ interface SegmentedTopBarProps extends MaterialTopTabBarProps {
 }
 
 interface SelectProps
-  extends Omit<MultiSelectProps, "value" | "selectedValue" | "deletedValue"> {
+  extends Omit<MultiSelectProps, "selectedValue" | "deletedValue"> {
   value: any;
 }
 

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/lib/components/OtpInputs.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _theme=require("../theme");var _=require("./");var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var styles={inputStyles:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"},defaultContainerStyles:{margin:2,borderRadius:8,backgroundColor:_theme.theme.colors.background.white,justifyContent:"center",alignItems:"center",minHeight:42,minWidth:42},defaultTextStyles:{fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.sf700}};var OtpInputs=function OtpInputs(_ref){var _ref$handleChange=_ref.handleChange,handleChange=_ref$handleChange===void 0?function(){}:_ref$handleChange,_ref$numberOfInputs=_ref.numberOfInputs,numberOfInputs=_ref$numberOfInputs===void 0?4:_ref$numberOfInputs,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,_ref$code=_ref.code,code=_ref$code===void 0?"":_ref$code,containerStyles=_ref.containerStyles,textStyles=_ref.textStyles;var inputRef=_react.default.useRef();(0,_react.useEffect)(function(){_reactNative.InteractionManager.runAfterInteractions(function(){if(inputRef!=null&&inputRef.current){inputRef.current.focus();}});},[inputRef]);return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:5}},_react.default.createElement(_.Touchable,{onPress:function onPress(){_reactNative.Keyboard.dismiss();inputRef&&inputRef.current.focus();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:7}},_react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,columnNumber:9}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,(0,_extends2.default)({key:index,borderColor:code.length-1===index?_theme.theme.colors.border.purple500:_theme.theme.colors.border.secondary,borderWidth:code.length-1===index?1.5:1},styles.defaultContainerStyles,containerStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({accessibilityLabel:"otp",color:error?_theme.theme.colors.font.danger:_theme.theme.colors.font.purple500},styles.defaultTextStyles,textStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:19}}),code[index]||""));}),_react.default.createElement(TextInput,(0,_extends2.default)({keyboardType:"phone-pad",selectionColor:"transparent",autoFocus:true,onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,value:code||""},styles.inputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:137,columnNumber:11}})))));};exports.OtpInputs=OtpInputs;OtpInputs.defaultProps={containerStyles:{},textStyles:{}};OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,containerStyles:_propTypes.default.object,textStyles:_propTypes.default.object};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _theme=require("../theme");var _=require("./");var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var styles={inputStyles:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"},defaultContainerStyles:{margin:2,borderRadius:8,backgroundColor:_theme.theme.colors.background.white,justifyContent:"center",alignItems:"center",minHeight:42,minWidth:42},defaultTextStyles:{fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.sf700}};var OtpInputs=function OtpInputs(_ref){var _ref$handleChange=_ref.handleChange,handleChange=_ref$handleChange===void 0?function(){}:_ref$handleChange,_ref$numberOfInputs=_ref.numberOfInputs,numberOfInputs=_ref$numberOfInputs===void 0?4:_ref$numberOfInputs,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,_ref$code=_ref.code,code=_ref$code===void 0?"":_ref$code,containerStyles=_ref.containerStyles,textStyles=_ref.textStyles;var inputRef=_react.default.useRef();(0,_react.useEffect)(function(){_reactNative.InteractionManager.runAfterInteractions(function(){if(inputRef!=null&&inputRef.current){inputRef.current.focus();}});},[inputRef]);return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:5}},_react.default.createElement(_.Container,{onTouchEnd:function onTouchEnd(){_reactNative.Keyboard.dismiss();inputRef&&inputRef.current.focus();},flexDirection:"row",alignItems:"center",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:7}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,(0,_extends2.default)({key:index,borderColor:code.length-1===index?_theme.theme.colors.border.purple500:_theme.theme.colors.border.secondary,borderWidth:code.length-1===index?1.5:1},styles.defaultContainerStyles,containerStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:15}}),_react.default.createElement(_.Typography,(0,_extends2.default)({accessibilityLabel:"otp",color:error?_theme.theme.colors.font.danger:_theme.theme.colors.font.purple500},styles.defaultTextStyles,textStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:17}}),code[index]||""));}),_react.default.createElement(TextInput,(0,_extends2.default)({keyboardType:"phone-pad",selectionColor:"transparent",autoFocus:true,onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,value:code||""},styles.inputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:9}}))));};exports.OtpInputs=OtpInputs;OtpInputs.defaultProps={containerStyles:{},textStyles:{}};OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,containerStyles:_propTypes.default.object,textStyles:_propTypes.default.object};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.196",
+  "version": "0.0.199",
   "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">

package/src/components/OtpInputs.js

@@ -12,7 +12,7 @@ import {
 import styled from "styled-components/native";
 
 import { theme } from "../theme";
-import { Container, Touchable, Typography } from "@components";
+import { Container, Typography } from "@components";
 
 const TextInput = styled.TextInput`
   ${flexbox}
@@ -93,67 +93,64 @@ export const OtpInputs = ({
 
   return (
     <Container>
-      <Touchable
-        onPress={() => {
+      <Container
+        onTouchEnd={() => {
           Keyboard.dismiss();
           inputRef && inputRef.current.focus();
         }}
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="center"
       >
-        <Container
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="center"
-        >
-          {Array(numberOfInputs)
-            .fill()
-            .map((number, index) => {
-              return (
-                <Container
-                  key={index}
-                  borderColor={
-                    code.length - 1 === index
-                      ? theme.colors.border.purple500
-                      : theme.colors.border.secondary
+        {Array(numberOfInputs)
+          .fill()
+          .map((number, index) => {
+            return (
+              <Container
+                key={index}
+                borderColor={
+                  code.length - 1 === index
+                    ? theme.colors.border.purple500
+                    : theme.colors.border.secondary
+                }
+                borderWidth={code.length - 1 === index ? 1.5 : 1}
+                {...styles.defaultContainerStyles}
+                {...containerStyles}
+              >
+                <Typography
+                  accessibilityLabel="otp"
+                  color={
+                    error
+                      ? theme.colors.font.danger
+                      : theme.colors.font.purple500
                   }
-                  borderWidth={code.length - 1 === index ? 1.5 : 1}
-                  {...styles.defaultContainerStyles}
-                  {...containerStyles}
+                  {...styles.defaultTextStyles}
+                  {...textStyles}
                 >
-                  <Typography
-                    accessibilityLabel="otp"
-                    color={
-                      error
-                        ? theme.colors.font.danger
-                        : theme.colors.font.purple500
-                    }
-                    {...styles.defaultTextStyles}
-                    {...textStyles}
-                  >
-                    {code[index] || ""}
-                  </Typography>
-                </Container>
-              );
-            })}
-          <TextInput
-            keyboardType="phone-pad"
-            selectionColor="transparent"
-            autoFocus={true}
-            onChangeText={value => {
-              if (!isNaN(value)) {
-                if (value.length <= numberOfInputs) {
-                  handleChange && handleChange(value);
-                }
-                if (value.length >= numberOfInputs) {
-                  return Keyboard.dismiss();
-                }
+                  {code[index] || ""}
+                </Typography>
+              </Container>
+            );
+          })}
+        <TextInput
+          keyboardType="phone-pad"
+          selectionColor="transparent"
+          autoFocus={true}
+          onChangeText={value => {
+            if (!isNaN(value)) {
+              if (value.length <= numberOfInputs) {
+                handleChange && handleChange(value);
+              }
+              if (value.length >= numberOfInputs) {
+                return Keyboard.dismiss();
               }
-            }}
-            ref={inputRef}
-            value={code || ""}
-            {...styles.inputStyles}
-          />
-        </Container>
-      </Touchable>
+            }
+          }}
+          ref={inputRef}
+          value={code || ""}
+          {...styles.inputStyles}
+        />
+      </Container>
     </Container>
   );
 };