@bigbinary/neetoui-rn 0.0.234 → 0.0.236

package/index.d.ts

@@ -40,7 +40,6 @@ import {
   ToastShowParams,
   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";
@@ -106,8 +105,22 @@ interface TouchableOpacityProps
     ButtonStyleProps {
   children?: React.ReactNode;
 }
-interface TouchableProps extends RippleProps, StyleProps, ButtonStyleProps {
+
+interface RipplePropTypes {
+  isCentered?: boolean;
+  isSequential?: boolean;
+  shouldFade?: boolean;
+  shouldOverflowContainer?: boolean;
+  color?: string;
+  opacity?: number;
+  duration?: number;
+  size?: number;
+  containerBorderRadius?: number;
+}
+
+interface TouchableProps extends StyleProps, ButtonStyleProps {
   children?: React.ReactNode;
+  rippleConfig?: RipplePropTypes;
 }
 
 interface AccordionProps extends ViewProps {

package/lib/components/Button.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Button=exports.BUTTON_VARIANTS=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=require("styled-components/native");var _=require("./");var _excluded=["variant","label","labelStyle","RightIcon","LeftIcon","disabled","isLoading","loadingText","fontFamily","color","fontSize"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Button.jsx";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 BUTTON_VARIANTS=Object.freeze({SOLID:"solid",SECONDARY:"secondary",TEXT:"text",DANGER:"danger",DANGER_INVERSE:"danger-inverse",DANGER_TEXT:"danger-text"});exports.BUTTON_VARIANTS=BUTTON_VARIANTS;var Button=function Button(_ref){var variant=_ref.variant,label=_ref.label,labelStyle=_ref.labelStyle,RightIcon=_ref.RightIcon,LeftIcon=_ref.LeftIcon,disabled=_ref.disabled,isLoading=_ref.isLoading,loadingText=_ref.loadingText,fontFamily=_ref.fontFamily,color=_ref.color,fontSize=_ref.fontSize,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var width=variant==="text"||variant==="danger-text"?null:"100%";var getButtonColors=function getButtonColors(){switch(variant){case BUTTON_VARIANTS.SOLID:return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};case BUTTON_VARIANTS.SECONDARY:return{bg:"transparent",border:theme.colors.background.base,color:theme.colors.font.base,ripple:theme.colors.background.base};case BUTTON_VARIANTS.TEXT:return{bg:"transparent",border:"transparent",color:theme.colors.font.primary,ripple:theme.colors.background.grey800};case BUTTON_VARIANTS.DANGER:return{bg:theme.colors.background.danger,border:theme.colors.background.danger,color:theme.colors.background.white,ripple:"white"};case BUTTON_VARIANTS.DANGER_INVERSE:return{bg:theme.colors.background.white,border:theme.colors.background.danger,color:theme.colors.background.danger,ripple:theme.colors.background.grey800};case BUTTON_VARIANTS.DANGER_TEXT:return{bg:"transparent",border:"transparent",color:theme.colors.background.danger,ripple:theme.colors.background.grey800};default:return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};}};var renderOpacity=function renderOpacity(){if(["secondary","danger","danger-inverse","danger-text"].includes(variant)&&disabled){return 0.5;}return 1;};return _react.default.createElement(_.Touchable,(0,_extends2.default)({alignItems:"center",bg:getButtonColors().bg,borderColor:getButtonColors().border,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),borderWidth:(0,_reactNativeSizeMatters.moderateScale)(1),disabled:disabled||isLoading,flexDirection:"row",height:(0,_reactNativeSizeMatters.moderateScale)(48),justifyContent:"center",opacity:renderOpacity(),rippleColor:getButtonColors().ripple,width:width},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:5}}),isLoading?_react.default.createElement(_.Container,{flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:9}},_react.default.createElement(_.Loader,{color:getButtonColors().color,__self:_this,__source:{fileName:_jsxFileName,lineNumber:174,columnNumber:11}}),!!loadingText&&_react.default.createElement(_.Typography,(0,_extends2.default)({color:color||getButtonColors().color,fontFamily:fontFamily||theme.fonts.sf500,fontSize:fontSize,mx:(0,_reactNativeSizeMatters.moderateScale)(2),textAlign:"center"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:176,columnNumber:13}}),loadingText)):_react.default.createElement(_react.default.Fragment,null,LeftIcon&&_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:190,columnNumber:24}}),_react.default.createElement(_.Typography,(0,_extends2.default)({color:color||getButtonColors().color,fontFamily:fontFamily||theme.fonts.sf500,fontSize:fontSize,mx:(0,_reactNativeSizeMatters.moderateScale)(2),textAlign:"center"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:11}}),label),RightIcon&&_react.default.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:201,columnNumber:25}})));};exports.Button=Button;Button.defaultProps={variant:"solid",isLoading:false,loadingText:"",fontSize:"m"};Button.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{label:_propTypes2.default.string.isRequired,variant:_propTypes2.default.oneOf(Object.values(BUTTON_VARIANTS)),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object,RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType,isLoading:_propTypes2.default.bool,loadingText:_propTypes2.default.string,fontFamily:_propTypes2.default.string,color:_propTypes2.default.string,fontSize:_propTypes2.default.string});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Button=exports.BUTTON_VARIANTS=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=require("styled-components/native");var _=require("./");var _excluded=["variant","label","labelStyle","RightIcon","LeftIcon","disabled","isLoading","loadingText","fontFamily","color","fontSize"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Button.jsx";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 BUTTON_VARIANTS=Object.freeze({SOLID:"solid",SECONDARY:"secondary",TEXT:"text",DANGER:"danger",DANGER_INVERSE:"danger-inverse",DANGER_TEXT:"danger-text"});exports.BUTTON_VARIANTS=BUTTON_VARIANTS;var Button=function Button(_ref){var variant=_ref.variant,label=_ref.label,labelStyle=_ref.labelStyle,RightIcon=_ref.RightIcon,LeftIcon=_ref.LeftIcon,disabled=_ref.disabled,isLoading=_ref.isLoading,loadingText=_ref.loadingText,fontFamily=_ref.fontFamily,color=_ref.color,fontSize=_ref.fontSize,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var width=variant==="text"||variant==="danger-text"?null:"100%";var getButtonColors=function getButtonColors(){switch(variant){case BUTTON_VARIANTS.SOLID:return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};case BUTTON_VARIANTS.SECONDARY:return{bg:"transparent",border:theme.colors.background.base,color:theme.colors.font.base,ripple:theme.colors.background.base};case BUTTON_VARIANTS.TEXT:return{bg:"transparent",border:"transparent",color:theme.colors.font.primary,ripple:theme.colors.background.grey800};case BUTTON_VARIANTS.DANGER:return{bg:theme.colors.background.danger,border:theme.colors.background.danger,color:theme.colors.background.white,ripple:"white"};case BUTTON_VARIANTS.DANGER_INVERSE:return{bg:theme.colors.background.white,border:theme.colors.background.danger,color:theme.colors.background.danger,ripple:theme.colors.background.grey800};case BUTTON_VARIANTS.DANGER_TEXT:return{bg:"transparent",border:"transparent",color:theme.colors.background.danger,ripple:theme.colors.background.grey800};default:return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};}};var renderOpacity=function renderOpacity(){if(["secondary","danger","danger-inverse","danger-text"].includes(variant)&&disabled){return 0.5;}return 1;};return _react.default.createElement(_.Touchable,(0,_extends2.default)({alignItems:"center",bg:getButtonColors().bg,borderColor:getButtonColors().border,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),borderWidth:(0,_reactNativeSizeMatters.moderateScale)(1),disabled:disabled||isLoading,flexDirection:"row",height:(0,_reactNativeSizeMatters.moderateScale)(48),justifyContent:"center",opacity:renderOpacity(),px:width===null?(0,_reactNativeSizeMatters.moderateScale)(8):undefined,rippleConfig:{color:getButtonColors().ripple},width:width},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:5}}),isLoading?_react.default.createElement(_.Container,{flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:174,columnNumber:9}},_react.default.createElement(_.Loader,{color:getButtonColors().color,__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:11}}),!!loadingText&&_react.default.createElement(_.Typography,(0,_extends2.default)({color:color||getButtonColors().color,fontFamily:fontFamily||theme.fonts.sf500,fontSize:fontSize,ml:(0,_reactNativeSizeMatters.moderateScale)(8),textAlign:"center"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:177,columnNumber:13}}),loadingText)):_react.default.createElement(_react.default.Fragment,null,LeftIcon&&_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:24}}),_react.default.createElement(_.Typography,(0,_extends2.default)({color:color||getButtonColors().color,fontFamily:fontFamily||theme.fonts.sf500,fontSize:fontSize,mx:(0,_reactNativeSizeMatters.moderateScale)(2),textAlign:"center"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:192,columnNumber:11}}),label),RightIcon&&_react.default.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:202,columnNumber:25}})));};exports.Button=Button;Button.defaultProps={variant:"solid",isLoading:false,loadingText:"",fontSize:"m"};Button.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{label:_propTypes2.default.string.isRequired,variant:_propTypes2.default.oneOf(Object.values(BUTTON_VARIANTS)),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object,RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType,isLoading:_propTypes2.default.bool,loadingText:_propTypes2.default.string,fontFamily:_propTypes2.default.string,color:_propTypes2.default.string,fontSize:_propTypes2.default.string});

package/lib/components/Ripple.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _TouchableWithoutFeedback=_interopRequireDefault(require("./TouchableWithoutFeedback"));var _excluded=["delayLongPress","delayPressIn","delayPressOut","disabled","hitSlop","pressRetentionOffset","children","rippleContainerBorderRadius","rippleOutsideContainer","testID","nativeID","accessible","accessibilityHint","accessibilityLabel"];var _jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Ripple.jsx";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;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var radius=(0,_reactNativeSizeMatters.moderateScale)(10);var Ripple=function(_PureComponent){(0,_inherits2.default)(Ripple,_PureComponent);var _super=_createSuper(Ripple);function Ripple(props){var _this;(0,_classCallCheck2.default)(this,Ripple);_this=_super.call(this,props);_this.onLayout=_this.onLayout.bind((0,_assertThisInitialized2.default)(_this));_this.onPress=_this.onPress.bind((0,_assertThisInitialized2.default)(_this));_this.onPressIn=_this.onPressIn.bind((0,_assertThisInitialized2.default)(_this));_this.onPressOut=_this.onPressOut.bind((0,_assertThisInitialized2.default)(_this));_this.onLongPress=_this.onLongPress.bind((0,_assertThisInitialized2.default)(_this));_this.onAnimationEnd=_this.onAnimationEnd.bind((0,_assertThisInitialized2.default)(_this));_this.renderRipple=_this.renderRipple.bind((0,_assertThisInitialized2.default)(_this));_this.unique=0;_this.mounted=false;_this.state={width:0,height:0,ripples:[]};return _this;}(0,_createClass2.default)(Ripple,[{key:"componentDidMount",value:function componentDidMount(){this.mounted=true;}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.mounted=false;}},{key:"onLayout",value:function onLayout(event){var _event$nativeEvent$la=event.nativeEvent.layout,width=_event$nativeEvent$la.width,height=_event$nativeEvent$la.height;var onLayout=this.props.onLayout;if("function"===typeof onLayout){onLayout(event);}this.setState({width:width,height:height});}},{key:"onPress",value:function onPress(event){var ripples=this.state.ripples;var _this$props=this.props,onPress=_this$props.onPress,rippleSequential=_this$props.rippleSequential;if(!rippleSequential||!ripples.length){if("function"===typeof onPress){requestAnimationFrame(function(){return onPress(event);});}this.startRipple(event);}}},{key:"onLongPress",value:function onLongPress(event){var onLongPress=this.props.onLongPress;if("function"===typeof onLongPress){requestAnimationFrame(function(){return onLongPress(event);});}this.startRipple(event);}},{key:"onPressIn",value:function onPressIn(event){var onPressIn=this.props.onPressIn;if("function"===typeof onPressIn){onPressIn(event);}}},{key:"onPressOut",value:function onPressOut(event){var onPressOut=this.props.onPressOut;if("function"===typeof onPressOut){onPressOut(event);}}},{key:"onAnimationEnd",value:function onAnimationEnd(){if(this.mounted){this.setState(function(_ref){var ripples=_ref.ripples;return{ripples:ripples.slice(1)};});}}},{key:"startRipple",value:function startRipple(event){var _this$state=this.state,width=_this$state.width,height=_this$state.height;var _this$props2=this.props,rippleDuration=_this$props2.rippleDuration,rippleCentered=_this$props2.rippleCentered,rippleSize=_this$props2.rippleSize,onRippleAnimation=_this$props2.onRippleAnimation;var w2=0.5*width;var h2=0.5*height;var _ref2=rippleCentered?{locationX:w2,locationY:h2}:event.nativeEvent,locationX=_ref2.locationX,locationY=_ref2.locationY;var offsetX=Math.abs(w2-locationX);var offsetY=Math.abs(h2-locationY);var size=rippleSize>0?0.5*rippleSize:Math.sqrt(Math.pow(w2+offsetX,2)+Math.pow(h2+offsetY,2));var ripple={unique:this.unique++,progress:new _reactNative.Animated.Value(0),locationX:locationX,locationY:locationY,size:size};var animation=_reactNative.Animated.timing(ripple.progress,{toValue:1,easing:_reactNative.Easing.out(_reactNative.Easing.ease),duration:rippleDuration,useNativeDriver:true});onRippleAnimation(animation,this.onAnimationEnd);this.setState(function(_ref3){var ripples=_ref3.ripples;return{ripples:ripples.concat(ripple)};});}},{key:"renderRipple",value:function renderRipple(_ref4){var _rippleStyle;var unique=_ref4.unique,progress=_ref4.progress,locationX=_ref4.locationX,locationY=_ref4.locationY,size=_ref4.size;var _this$props3=this.props,rippleColor=_this$props3.rippleColor,rippleOpacity=_this$props3.rippleOpacity,rippleFades=_this$props3.rippleFades;var rippleStyle=(_rippleStyle={top:locationY-radius},(0,_defineProperty2.default)(_rippleStyle,_reactNative.I18nManager.isRTL?"right":"left",locationX-radius),(0,_defineProperty2.default)(_rippleStyle,"backgroundColor",rippleColor),(0,_defineProperty2.default)(_rippleStyle,"transform",[{scale:progress.interpolate({inputRange:[0,1],outputRange:[0.5/radius,size/radius]})}]),(0,_defineProperty2.default)(_rippleStyle,"opacity",rippleFades?progress.interpolate({inputRange:[0,1],outputRange:[rippleOpacity,0]}):rippleOpacity),_rippleStyle);return _react.default.createElement(_reactNative.Animated.View,{key:unique,style:[styles.ripple,rippleStyle],__self:this,__source:{fileName:_jsxFileName,lineNumber:205,columnNumber:12}});}},{key:"render",value:function render(){var ripples=this.state.ripples;var _this$props4=this.props,delayLongPress=_this$props4.delayLongPress,delayPressIn=_this$props4.delayPressIn,delayPressOut=_this$props4.delayPressOut,disabled=_this$props4.disabled,hitSlop=_this$props4.hitSlop,pressRetentionOffset=_this$props4.pressRetentionOffset,children=_this$props4.children,rippleContainerBorderRadius=_this$props4.rippleContainerBorderRadius,rippleOutsideContainer=_this$props4.rippleOutsideContainer,testID=_this$props4.testID,nativeID=_this$props4.nativeID,accessible=_this$props4.accessible,accessibilityHint=_this$props4.accessibilityHint,accessibilityLabel=_this$props4.accessibilityLabel,props=(0,_objectWithoutProperties2.default)(_this$props4,_excluded);var touchableProps=(0,_extends2.default)({delayLongPress:delayLongPress,delayPressIn:delayPressIn,delayPressOut:delayPressOut,disabled:disabled,hitSlop:hitSlop,pressRetentionOffset:pressRetentionOffset,testID:testID,accessible:accessible,accessibilityHint:accessibilityHint,accessibilityLabel:accessibilityLabel,onLayout:this.onLayout,onPress:this.onPress,onLongPress:this.onLongPress,onPressIn:this.onPressIn,onPressOut:this.onPressOut},"web"!==_reactNative.Platform.OS?{nativeID:nativeID}:null);var containerStyle={borderRadius:rippleContainerBorderRadius};return _react.default.createElement(_TouchableWithoutFeedback.default,(0,_extends2.default)({},touchableProps,{__self:this,__source:{fileName:_jsxFileName,lineNumber:253,columnNumber:7}}),_react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({},props,{collapsable:false,pointerEvents:"box-only",__self:this,__source:{fileName:_jsxFileName,lineNumber:254,columnNumber:9}}),children,_react.default.createElement(_reactNative.View,{style:[styles.container(rippleOutsideContainer),containerStyle],__self:this,__source:{fileName:_jsxFileName,lineNumber:256,columnNumber:11}},ripples.map(this.renderRipple))));}}]);return Ripple;}(_react.PureComponent);exports.default=Ripple;Ripple.defaultProps=(0,_extends2.default)({},_TouchableWithoutFeedback.default.defaultProps,{rippleColor:"rgb(0, 0, 0)",rippleOpacity:0.3,rippleDuration:400,rippleSize:0,rippleContainerBorderRadius:0,rippleCentered:false,rippleSequential:false,rippleFades:true,rippleOutsideContainer:false,disabled:false,onRippleAnimation:function onRippleAnimation(animation,onComplete){return animation.start(onComplete);}});Ripple.propTypes=(0,_extends2.default)({},_reactNative.Animated.View.propTypes,_TouchableWithoutFeedback.default.propTypes,{rippleColor:_propTypes.default.string,rippleOpacity:_propTypes.default.number,rippleDuration:_propTypes.default.number,rippleSize:_propTypes.default.number,rippleContainerBorderRadius:_propTypes.default.number,rippleCentered:_propTypes.default.bool,rippleSequential:_propTypes.default.bool,rippleFades:_propTypes.default.bool,rippleOutsideContainer:_propTypes.default.bool,disabled:_propTypes.default.bool,onRippleAnimation:_propTypes.default.func});var styles=_reactNative.StyleSheet.create({container:function container(rippleOutsideContainer){return(0,_extends2.default)({},_reactNative.StyleSheet.absoluteFillObject,{backgroundColor:"transparent",overflow:rippleOutsideContainer?"visible":"hidden"});},ripple:{width:radius*2,height:radius*2,borderRadius:radius,overflow:"hidden",position:"absolute"}});

package/lib/components/SocialButton.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SocialButton=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=require("styled-components/native");var _appleLogo=_interopRequireDefault(require("../../assets/icons/apple-logo.svg"));var _googleLogo=_interopRequireDefault(require("../../assets/icons/google-logo.svg"));var _=require("./");var _excluded=["variant","disabled","labelStyle","isLoading"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SocialButton.jsx";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 SocialButton=function SocialButton(_ref){var variant=_ref.variant,disabled=_ref.disabled,labelStyle=_ref.labelStyle,isLoading=_ref.isLoading,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var capitalize=function capitalize(str){return""+str.charAt(0).toUpperCase()+str.slice(1);};return _react.default.createElement(_.Touchable,(0,_extends2.default)({alignItems:"center",bg:"transparent",borderColor:theme.colors.border.grey800,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),borderWidth:(0,_reactNativeSizeMatters.moderateScale)(1),disabled:disabled,height:(0,_reactNativeSizeMatters.moderateScale)(48),justifyContent:"center",rippleColor:theme.colors.background.grey800,width:"100%"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}}),isLoading?_react.default.createElement(_.Loader,{color:theme.colors.background.grey800,__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:9}}):_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,{left:(0,_reactNativeSizeMatters.moderateScale)(17),position:"absolute",__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:11}},variant==="apple"&&_react.default.createElement(_appleLogo.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:37}}),variant==="google"&&_react.default.createElement(_googleLogo.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:38}})),_react.default.createElement(_.Typography,(0,_extends2.default)({color:theme.colors.font.primary,fontFamily:theme.fonts.sf500,fontSize:"m"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:11}}),"Continue with ",capitalize(variant))));};exports.SocialButton=SocialButton;SocialButton.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{variant:_propTypes2.default.oneOf(["apple","google"]),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object,isLoading:_propTypes2.default.bool});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SocialButton=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=require("styled-components/native");var _appleLogo=_interopRequireDefault(require("../../assets/icons/apple-logo.svg"));var _googleLogo=_interopRequireDefault(require("../../assets/icons/google-logo.svg"));var _=require("./");var _excluded=["variant","disabled","labelStyle","isLoading"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SocialButton.jsx";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 SocialButton=function SocialButton(_ref){var variant=_ref.variant,disabled=_ref.disabled,labelStyle=_ref.labelStyle,isLoading=_ref.isLoading,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var capitalize=function capitalize(str){return""+str.charAt(0).toUpperCase()+str.slice(1);};return _react.default.createElement(_.Touchable,(0,_extends2.default)({alignItems:"center",bg:"transparent",borderColor:theme.colors.border.grey800,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),borderWidth:(0,_reactNativeSizeMatters.moderateScale)(1),disabled:disabled,height:(0,_reactNativeSizeMatters.moderateScale)(48),justifyContent:"center",rippleConfig:{color:theme.colors.background.grey800},width:"100%"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}}),isLoading?_react.default.createElement(_.Loader,{color:theme.colors.background.grey800,__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:9}}):_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,{left:(0,_reactNativeSizeMatters.moderateScale)(17),position:"absolute",__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:11}},variant==="apple"&&_react.default.createElement(_appleLogo.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:37}}),variant==="google"&&_react.default.createElement(_googleLogo.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:38}})),_react.default.createElement(_.Typography,(0,_extends2.default)({color:theme.colors.font.primary,fontFamily:theme.fonts.sf500,fontSize:"m"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:11}}),"Continue with ",capitalize(variant))));};exports.SocialButton=SocialButton;SocialButton.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{variant:_propTypes2.default.oneOf(["apple","google"]),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object,isLoading:_propTypes2.default.bool});

package/lib/components/Toast.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Toast=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeDeviceInfo=_interopRequireDefault(require("react-native-device-info"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _reactNativeToastMessage=_interopRequireDefault(require("react-native-toast-message"));var _native=require("styled-components/native");var _error=_interopRequireDefault(require("../../assets/icons/error.svg"));var _info=_interopRequireDefault(require("../../assets/icons/info.svg"));var _success=_interopRequireDefault(require("../../assets/icons/success.svg"));var _warning=_interopRequireDefault(require("../../assets/icons/warning.svg"));var _=require("./");var _config=require("../config");var _excluded=["toasterConfig"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Toast.jsx";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 ToastComponent=function ToastComponent(_ref){var type=_ref.type,text1=_ref.text1,text2=_ref.text2,hide=_ref.hide;var theme=(0,React.useContext)(_native.ThemeContext);var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var Icon=function Icon(){switch(type){case"success":return React.createElement(_success.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:25,columnNumber:16}});case"warning":return React.createElement(_warning.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:27,columnNumber:16}});case"info":return React.createElement(_info.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:29,columnNumber:16}});case"error":return React.createElement(_error.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:16}});}return null;};return React.createElement(_.Card,{alignItems:"center",bg:theme.colors.background.secondary,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(16),elevation:10,flexDirection:"row",minHeight:(0,_reactNativeSizeMatters.moderateScale)(60),mt:_reactNativeDeviceInfo.default.hasDynamicIsland()?(0,_reactNativeSizeMatters.moderateScale)(10):0,mx:(0,_reactNativeSizeMatters.moderateScale)(10),px:(0,_reactNativeSizeMatters.moderateScale)(10),width:width-(0,_reactNativeSizeMatters.moderateScale)(20),__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:5}},React.createElement(_.Container,{alignItems:"center",bg:theme.colors.toast[type],borderRadius:(0,_reactNativeSizeMatters.moderateScale)(10),height:(0,_reactNativeSizeMatters.moderateScale)(42),justifyContent:"center",width:(0,_reactNativeSizeMatters.moderateScale)(42),__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:7}},React.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:58,columnNumber:9}})),React.createElement(_.Container,{flex:1,ml:(0,_reactNativeSizeMatters.moderateScale)(10),py:(0,_reactNativeSizeMatters.moderateScale)(3),__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:7}},text1&&React.createElement(_.Typography,{fontColor:theme.colors.font.primary,fontFamily:theme.fonts.sf600,fontSize:"l",__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:11}},text1),text2&&React.createElement(_.Typography,{fontColor:theme.colors.font.secondary,fontFamily:theme.fonts.sf400,fontSize:"xs",__self:_this,__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:11}},text2)),React.createElement(_.Touchable,{hitSlop:{top:(0,_reactNativeSizeMatters.moderateScale)(5),right:(0,_reactNativeSizeMatters.moderateScale)(5),bottom:(0,_reactNativeSizeMatters.moderateScale)(5),left:(0,_reactNativeSizeMatters.moderateScale)(5)},onPress:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:80,columnNumber:7}},React.createElement(_reactNativeRemixIcon.default,{color:theme.colors.font.grey500,name:"ri-close-line",__self:_this,__source:{fileName:_jsxFileName,lineNumber:89,columnNumber:9}})));};ToastComponent.propTypes={type:_propTypes.default.string,text1:_propTypes.default.string,text2:_propTypes.default.string,hide:_propTypes.default.func};var Toast=function Toast(_ref2){var toasterConfig=_ref2.toasterConfig,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var customConfig={success:ToastComponent,warning:ToastComponent,info:ToastComponent,error:ToastComponent};return React.createElement(_reactNativeToastMessage.default,(0,_extends2.default)({},rest,{config:(0,_extends2.default)({},_config.defaultToasterConfig,customConfig,toasterConfig),position:"top",__self:_this,__source:{fileName:_jsxFileName,lineNumber:159,columnNumber:5}}));};exports.Toast=Toast;Toast.show=_reactNativeToastMessage.default.show;Toast.hide=_reactNativeToastMessage.default.hide;Toast.propTypes={toasterConfig:_propTypes.default.object};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Toast=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeDeviceInfo=_interopRequireDefault(require("react-native-device-info"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _reactNativeToastMessage=_interopRequireDefault(require("react-native-toast-message"));var _native=require("styled-components/native");var _error=_interopRequireDefault(require("../../assets/icons/error.svg"));var _info=_interopRequireDefault(require("../../assets/icons/info.svg"));var _success=_interopRequireDefault(require("../../assets/icons/success.svg"));var _warning=_interopRequireDefault(require("../../assets/icons/warning.svg"));var _=require("./");var _config=require("../config");var _excluded=["toasterConfig"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Toast.jsx";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 timer;var ToastComponent=function ToastComponent(_ref){var type=_ref.type,text1=_ref.text1,text2=_ref.text2,hide=_ref.hide,isVisible=_ref.isVisible;var theme=(0,React.useContext)(_native.ThemeContext);var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;(0,React.useEffect)(function(){if(isVisible){timer=setTimeout(function(){hide();},4000);}return;},[isVisible,hide]);var Icon=function Icon(){switch(type){case"success":return React.createElement(_success.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:37,columnNumber:16}});case"warning":return React.createElement(_warning.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:16}});case"info":return React.createElement(_info.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:41,columnNumber:16}});case"error":return React.createElement(_error.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:16}});}return null;};return React.createElement(_.Card,{alignItems:"center",bg:theme.colors.background.secondary,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(16),elevation:10,flexDirection:"row",minHeight:(0,_reactNativeSizeMatters.moderateScale)(60),mt:_reactNativeDeviceInfo.default.hasDynamicIsland()?(0,_reactNativeSizeMatters.moderateScale)(10):0,mx:(0,_reactNativeSizeMatters.moderateScale)(10),px:(0,_reactNativeSizeMatters.moderateScale)(10),width:width-(0,_reactNativeSizeMatters.moderateScale)(20),onPressIn:function onPressIn(){clearTimeout(timer);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:5}},React.createElement(_.Container,{alignItems:"center",bg:theme.colors.toast[type],borderRadius:(0,_reactNativeSizeMatters.moderateScale)(10),height:(0,_reactNativeSizeMatters.moderateScale)(42),justifyContent:"center",width:(0,_reactNativeSizeMatters.moderateScale)(42),__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:7}},React.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:73,columnNumber:9}})),React.createElement(_.Container,{flex:1,ml:(0,_reactNativeSizeMatters.moderateScale)(10),py:(0,_reactNativeSizeMatters.moderateScale)(3),__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:7}},text1&&React.createElement(_.Typography,{fontColor:theme.colors.font.primary,fontFamily:theme.fonts.sf600,fontSize:"l",__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:11}},text1),text2&&React.createElement(_.Typography,{fontColor:theme.colors.font.secondary,fontFamily:theme.fonts.sf400,fontSize:"xs",__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,columnNumber:11}},text2)),React.createElement(_.Touchable,{hitSlop:{top:(0,_reactNativeSizeMatters.moderateScale)(5),right:(0,_reactNativeSizeMatters.moderateScale)(5),bottom:(0,_reactNativeSizeMatters.moderateScale)(5),left:(0,_reactNativeSizeMatters.moderateScale)(5)},onPress:function onPress(){clearTimeout(timer);hide();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:7}},React.createElement(_reactNativeRemixIcon.default,{color:theme.colors.font.grey500,name:"ri-close-line",__self:_this,__source:{fileName:_jsxFileName,lineNumber:107,columnNumber:9}})));};ToastComponent.propTypes={type:_propTypes.default.string,text1:_propTypes.default.string,text2:_propTypes.default.string,hide:_propTypes.default.func,isVisible:_propTypes.default.bool};var Toast=function Toast(_ref2){var toasterConfig=_ref2.toasterConfig,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var customConfig={success:ToastComponent,warning:ToastComponent,info:ToastComponent,error:ToastComponent};return React.createElement(_reactNativeToastMessage.default,(0,_extends2.default)({},rest,{autoHide:false,config:(0,_extends2.default)({},_config.defaultToasterConfig,customConfig,toasterConfig),position:"top",__self:_this,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:5}}));};exports.Toast=Toast;Toast.show=_reactNativeToastMessage.default.show;Toast.hide=_reactNativeToastMessage.default.hide;Toast.propTypes={toasterConfig:_propTypes.default.object};

package/lib/components/Touchable.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Touchable=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _reactNativeMaterialRipple=_interopRequireDefault(require("react-native-material-ripple"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _utils=require("../utils/utils");var _excluded=["children","elevation"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Touchable.jsx";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 StyledRipple=(0,_native.default)(_reactNativeMaterialRipple.default)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);var Touchable=React.forwardRef(function(props,ref){var children=props.children,elevation=props.elevation,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var shadowStyles=elevation?(0,_utils.getShadowStyles)(elevation):{};return React.createElement(StyledRipple,(0,_extends2.default)({ref:ref,rippleContainerBorderRadius:rest.borderRadius?rest.borderRadius:0,rippleDuration:600,rippleOpacity:0.09,style:shadowStyles},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:5}}),children);});exports.Touchable=Touchable;Touchable.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,_propTypes.default.buttonStyle,{children:_propTypes2.default.node,elevation:_propTypes2.default.oneOfType([_propTypes2.default.number,_propTypes2.default.string])});Touchable.displayName="Touchable";
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Touchable=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _Ripple=_interopRequireDefault(require("./Ripple"));var _utils=require("../utils/utils");var _excluded=["children","elevation","rippleConfig"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Touchable.jsx";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 StyledRipple=(0,_native.default)(_Ripple.default)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);var defaultRippleConfig={rippleCentered:false,rippleSequential:false,rippleFades:true,rippleOutsideContainer:false,rippleColor:"#000",rippleOpacity:0.09,rippleDuration:600,rippleSize:0,rippleContainerBorderRadius:0};var Touchable=React.forwardRef(function(props,ref){var _rippleConfig$isCente,_rippleConfig$isSeque,_rippleConfig$shouldF,_rippleConfig$shouldO,_rippleConfig$color,_rippleConfig$opacity,_rippleConfig$duratio,_rippleConfig$size;var children=props.children,elevation=props.elevation,rippleConfig=props.rippleConfig,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var shadowStyles=elevation?(0,_utils.getShadowStyles)(elevation):{};var rippleProps=(0,_extends2.default)({},defaultRippleConfig,{rippleCentered:(_rippleConfig$isCente=rippleConfig.isCentered)!=null?_rippleConfig$isCente:defaultRippleConfig.rippleCentered,rippleSequential:(_rippleConfig$isSeque=rippleConfig.isSequential)!=null?_rippleConfig$isSeque:defaultRippleConfig.rippleSequential,rippleFades:(_rippleConfig$shouldF=rippleConfig.shouldFade)!=null?_rippleConfig$shouldF:defaultRippleConfig.rippleFades,rippleOutsideContainer:(_rippleConfig$shouldO=rippleConfig.shouldOverflowContainer)!=null?_rippleConfig$shouldO:defaultRippleConfig.rippleOutsideContainer,rippleColor:(_rippleConfig$color=rippleConfig.color)!=null?_rippleConfig$color:defaultRippleConfig.rippleColor,rippleOpacity:(_rippleConfig$opacity=rippleConfig.opacity)!=null?_rippleConfig$opacity:defaultRippleConfig.rippleOpacity,rippleDuration:(_rippleConfig$duratio=rippleConfig.duration)!=null?_rippleConfig$duratio:defaultRippleConfig.rippleDuration,rippleSize:(_rippleConfig$size=rippleConfig.size)!=null?_rippleConfig$size:defaultRippleConfig.rippleSize,rippleContainerBorderRadius:rest.borderRadius?rest.borderRadius:0});return React.createElement(StyledRipple,(0,_extends2.default)({ref:ref,style:shadowStyles},rippleProps,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:100,columnNumber:5}}),children);});exports.Touchable=Touchable;Touchable.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,_propTypes.default.buttonStyle,{children:_propTypes2.default.node.isRequired,elevation:_propTypes2.default.oneOfType([_propTypes2.default.number,_propTypes2.default.string]),rippleConfig:_propTypes2.default.shape({isCentered:_propTypes2.default.bool,isSequential:_propTypes2.default.bool,shouldFade:_propTypes2.default.bool,shouldOverflowContainer:_propTypes2.default.bool,color:_propTypes2.default.string,opacity:_propTypes2.default.number,duration:_propTypes2.default.number,size:_propTypes2.default.number,containerBorderRadius:_propTypes2.default.number})});Touchable.defaultProps={rippleConfig:{}};Touchable.displayName="Touchable";

package/lib/components/TouchableWithoutFeedback.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _excluded=["onPress","onPressIn"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/TouchableWithoutFeedback.jsx";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 TouchableWithoutFeedback=function TouchableWithoutFeedback(_ref){var onPress=_ref.onPress,onPressIn=_ref.onPressIn,props=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _touchActivatePositionRef=(0,_react.useRef)(null);function _onPressIn(e){var _e$nativeEvent=e.nativeEvent,pageX=_e$nativeEvent.pageX,pageY=_e$nativeEvent.pageY;_touchActivatePositionRef.current={pageX:pageX,pageY:pageY};onPressIn==null?void 0:onPressIn(e);}function _onPress(e){var _e$nativeEvent2=e.nativeEvent,pageX=_e$nativeEvent2.pageX,pageY=_e$nativeEvent2.pageY;var absX=Math.abs(_touchActivatePositionRef.current.pageX-pageX);var absY=Math.abs(_touchActivatePositionRef.current.pageY-pageY);var dragged=absX>2||absY>2;if(!dragged){onPress==null?void 0:onPress(e);}}return _react.default.createElement(_reactNative.TouchableWithoutFeedback,(0,_extends2.default)({onPress:_onPress,onPressIn:_onPressIn},props,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:5}}),props.children);};TouchableWithoutFeedback.defaultProps={};TouchableWithoutFeedback.propTypes={onPress:_propTypes.default.func,onPressIn:_propTypes.default.func,children:_propTypes.default.element.isRequired};var _default=TouchableWithoutFeedback;exports.default=_default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.234",
+  "version": "0.0.236",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -58,7 +58,6 @@
     "react-content-loader": "^6.2.0",
     "react-native-calendars": "^1.1285.0",
     "react-native-gesture-handler": "^2.4.0",
-    "react-native-material-ripple": "^0.9.1",
     "react-native-modal": "^13.0.0",
     "react-native-pell-rich-editor": "^1.8.6",
     "react-native-popover-view": "^4.1.0",
@@ -66,7 +65,7 @@
     "react-native-safe-area-context": "^3.3.2",
     "react-native-size-matters": "^0.4.0",
     "react-native-snap-carousel": "4.0.0-beta.6",
-    "react-native-toast-message": "^2.1.0",
+    "react-native-toast-message": "^2.1.5",
     "styled-components": "^5.3.3",
     "styled-system": "^5.1.5"
   },

package/src/components/Button.jsx

@@ -165,7 +165,8 @@ export const Button = ({
       height={moderateScale(48)}
       justifyContent="center"
       opacity={renderOpacity()}
-      rippleColor={getButtonColors().ripple}
+      px={width === null ? moderateScale(8) : undefined}
+      rippleConfig={{ color: getButtonColors().ripple }}
       width={width}
       {...rest}
     >
@@ -177,7 +178,7 @@ export const Button = ({
               color={color || getButtonColors().color}
               fontFamily={fontFamily || theme.fonts.sf500}
               fontSize={fontSize}
-              mx={moderateScale(2)}
+              ml={moderateScale(8)}
               textAlign="center"
               {...labelStyle}
             >

package/src/components/Ripple.jsx

@@ -0,0 +1,280 @@
+import React, { PureComponent } from "react";
+import {
+  View,
+  Animated,
+  Easing,
+  Platform,
+  I18nManager,
+  StyleSheet,
+} from "react-native";
+
+import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
+
+import TouchableWithoutFeedback from "./TouchableWithoutFeedback";
+
+const radius = moderateScale(10);
+
+export default class Ripple extends PureComponent {
+  static defaultProps = {
+    ...TouchableWithoutFeedback.defaultProps,
+
+    rippleColor: "rgb(0, 0, 0)",
+    rippleOpacity: 0.3,
+    rippleDuration: 400,
+    rippleSize: 0,
+    rippleContainerBorderRadius: 0,
+    rippleCentered: false,
+    rippleSequential: false,
+    rippleFades: true,
+    rippleOutsideContainer: false,
+    disabled: false,
+
+    onRippleAnimation: (animation, onComplete) => animation.start(onComplete),
+  };
+
+  static propTypes = {
+    ...Animated.View.propTypes,
+    ...TouchableWithoutFeedback.propTypes,
+
+    rippleColor: PropTypes.string,
+    rippleOpacity: PropTypes.number,
+    rippleDuration: PropTypes.number,
+    rippleSize: PropTypes.number,
+    rippleContainerBorderRadius: PropTypes.number,
+    rippleCentered: PropTypes.bool,
+    rippleSequential: PropTypes.bool,
+    rippleFades: PropTypes.bool,
+    rippleOutsideContainer: PropTypes.bool,
+    disabled: PropTypes.bool,
+
+    onRippleAnimation: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.onLayout = this.onLayout.bind(this);
+    this.onPress = this.onPress.bind(this);
+    this.onPressIn = this.onPressIn.bind(this);
+    this.onPressOut = this.onPressOut.bind(this);
+    this.onLongPress = this.onLongPress.bind(this);
+    this.onAnimationEnd = this.onAnimationEnd.bind(this);
+
+    this.renderRipple = this.renderRipple.bind(this);
+
+    this.unique = 0;
+    this.mounted = false;
+
+    this.state = {
+      width: 0,
+      height: 0,
+      ripples: [],
+    };
+  }
+
+  componentDidMount() {
+    this.mounted = true;
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  onLayout(event) {
+    const { width, height } = event.nativeEvent.layout;
+    const { onLayout } = this.props;
+
+    if ("function" === typeof onLayout) {
+      onLayout(event);
+    }
+
+    this.setState({ width, height });
+  }
+
+  onPress(event) {
+    const { ripples } = this.state;
+    const { onPress, rippleSequential } = this.props;
+
+    if (!rippleSequential || !ripples.length) {
+      if ("function" === typeof onPress) {
+        requestAnimationFrame(() => onPress(event));
+      }
+
+      this.startRipple(event);
+    }
+  }
+
+  onLongPress(event) {
+    const { onLongPress } = this.props;
+
+    if ("function" === typeof onLongPress) {
+      requestAnimationFrame(() => onLongPress(event));
+    }
+
+    this.startRipple(event);
+  }
+
+  onPressIn(event) {
+    const { onPressIn } = this.props;
+
+    if ("function" === typeof onPressIn) {
+      onPressIn(event);
+    }
+  }
+
+  onPressOut(event) {
+    const { onPressOut } = this.props;
+
+    if ("function" === typeof onPressOut) {
+      onPressOut(event);
+    }
+  }
+
+  onAnimationEnd() {
+    if (this.mounted) {
+      this.setState(({ ripples }) => ({ ripples: ripples.slice(1) }));
+    }
+  }
+
+  startRipple(event) {
+    const { width, height } = this.state;
+    const { rippleDuration, rippleCentered, rippleSize, onRippleAnimation } =
+      this.props;
+
+    const w2 = 0.5 * width;
+    const h2 = 0.5 * height;
+
+    const { locationX, locationY } = rippleCentered
+      ? { locationX: w2, locationY: h2 }
+      : event.nativeEvent;
+
+    const offsetX = Math.abs(w2 - locationX);
+    const offsetY = Math.abs(h2 - locationY);
+
+    const size =
+      rippleSize > 0
+        ? 0.5 * rippleSize
+        : Math.sqrt(Math.pow(w2 + offsetX, 2) + Math.pow(h2 + offsetY, 2));
+
+    const ripple = {
+      unique: this.unique++,
+      progress: new Animated.Value(0),
+      locationX,
+      locationY,
+      size,
+    };
+
+    const animation = Animated.timing(ripple.progress, {
+      toValue: 1,
+      easing: Easing.out(Easing.ease),
+      duration: rippleDuration,
+      useNativeDriver: true,
+    });
+
+    onRippleAnimation(animation, this.onAnimationEnd);
+
+    this.setState(({ ripples }) => ({ ripples: ripples.concat(ripple) }));
+  }
+
+  renderRipple({ unique, progress, locationX, locationY, size }) {
+    const { rippleColor, rippleOpacity, rippleFades } = this.props;
+
+    const rippleStyle = {
+      top: locationY - radius,
+      [I18nManager.isRTL ? "right" : "left"]: locationX - radius,
+      backgroundColor: rippleColor,
+
+      transform: [
+        {
+          scale: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.5 / radius, size / radius],
+          }),
+        },
+      ],
+
+      opacity: rippleFades
+        ? progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [rippleOpacity, 0],
+          })
+        : rippleOpacity,
+    };
+
+    return <Animated.View key={unique} style={[styles.ripple, rippleStyle]} />;
+  }
+
+  render() {
+    const { ripples } = this.state;
+    const {
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      disabled,
+      hitSlop,
+      pressRetentionOffset,
+      children,
+      rippleContainerBorderRadius,
+      rippleOutsideContainer,
+      testID,
+      nativeID,
+      accessible,
+      accessibilityHint,
+      accessibilityLabel,
+      ...props
+    } = this.props;
+
+    const touchableProps = {
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      disabled,
+      hitSlop,
+      pressRetentionOffset,
+      testID,
+      accessible,
+      accessibilityHint,
+      accessibilityLabel,
+      onLayout: this.onLayout,
+      onPress: this.onPress,
+      onLongPress: this.onLongPress,
+      onPressIn: this.onPressIn,
+      onPressOut: this.onPressOut,
+
+      ...("web" !== Platform.OS ? { nativeID } : null),
+    };
+
+    const containerStyle = {
+      borderRadius: rippleContainerBorderRadius,
+    };
+
+    return (
+      <TouchableWithoutFeedback {...touchableProps}>
+        <Animated.View {...props} collapsable={false} pointerEvents="box-only">
+          {children}
+          <View
+            style={[styles.container(rippleOutsideContainer), containerStyle]}
+          >
+            {ripples.map(this.renderRipple)}
+          </View>
+        </Animated.View>
+      </TouchableWithoutFeedback>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: rippleOutsideContainer => ({
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "transparent",
+    overflow: rippleOutsideContainer ? "visible" : "hidden",
+  }),
+  ripple: {
+    width: radius * 2,
+    height: radius * 2,
+    borderRadius: radius,
+    overflow: "hidden",
+    position: "absolute",
+  },
+});

package/src/components/SocialButton.jsx

@@ -54,7 +54,7 @@ export const SocialButton = ({
       disabled={disabled}
       height={moderateScale(48)}
       justifyContent="center"
-      rippleColor={theme.colors.background.grey800}
+      rippleConfig={{ color: theme.colors.background.grey800 }}
       width="100%"
       {...rest}
     >

package/src/components/Toast.jsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { useWindowDimensions } from "react-native";
 
 import PropTypes from "prop-types";
@@ -16,9 +16,21 @@ import WarningIcon from "@assets/icons/warning.svg";
 import { Container, Typography, Card, Touchable } from "@components";
 import { defaultToasterConfig } from "@config";
 
-const ToastComponent = ({ type, text1, text2, hide }) => {
+let timer;
+const ToastComponent = ({ type, text1, text2, hide, isVisible }) => {
   const theme = useContext(ThemeContext);
   const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    if (isVisible) {
+      timer = setTimeout(() => {
+        hide();
+      }, 4000);
+    }
+
+    return;
+  }, [isVisible, hide]);
+
   const Icon = () => {
     switch (type) {
       case "success":
@@ -46,6 +58,9 @@ const ToastComponent = ({ type, text1, text2, hide }) => {
       mx={moderateScale(10)}
       px={moderateScale(10)}
       width={width - moderateScale(20)}
+      onPressIn={() => {
+        clearTimeout(timer);
+      }}
     >
       <Container
         alignItems="center"
@@ -84,7 +99,10 @@ const ToastComponent = ({ type, text1, text2, hide }) => {
           bottom: moderateScale(5),
           left: moderateScale(5),
         }}
-        onPress={hide}
+        onPress={() => {
+          clearTimeout(timer);
+          hide();
+        }}
       >
         <CloseIcon color={theme.colors.font.grey500} name="ri-close-line" />
       </Touchable>
@@ -97,6 +115,7 @@ ToastComponent.propTypes = {
   text1: PropTypes.string,
   text2: PropTypes.string,
   hide: PropTypes.func,
+  isVisible: PropTypes.bool,
 };
 
 /**
@@ -158,6 +177,7 @@ export const Toast = ({ toasterConfig, ...rest }) => {
   return (
     <T
       {...rest}
+      autoHide={false}
       config={{ ...defaultToasterConfig, ...customConfig, ...toasterConfig }}
       position="top"
     />

package/src/components/Touchable.jsx

@@ -2,7 +2,6 @@ import * as React from "react";
 
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
-import Ripple from "react-native-material-ripple";
 import styled from "styled-components/native";
 import {
   flexbox,
@@ -13,6 +12,8 @@ import {
   layout,
 } from "styled-system";
 
+import Ripple from "./Ripple";
+
 import { getShadowStyles } from "../utils/utils";
 
 const StyledRipple = styled(Ripple)`
@@ -25,7 +26,7 @@ const StyledRipple = styled(Ripple)`
 `;
 
 /**
- * Touchable component is a wrapper over https://github.com/n4kz/react-native-material-ripple.
+ * Touchable component is a wrapper over Ripple.
  *
  * This component supports below props categories from [styled-system ](/styled-system).
  * <ul>
@@ -48,9 +49,11 @@ const StyledRipple = styled(Ripple)`
  *       bg="background.primary"
  *       width="100px"
  *       height="30px"
- *       rippleOpacity = {0.09}
- *       rippleDuration = {600}
- *       rippleContainerBorderRadius = {moderateScale(50)}
+ *       rippleConfig={{
+ *          opacity: 0.09,
+ *          duration: 600,
+ *          containerBorderRadius: moderateScale(50),
+ *       }}
  *     >
  *       <Typography fontSize="10px">This is wrapped in Touchable component</Typography>
  *     </Touchable>
@@ -60,19 +63,41 @@ const StyledRipple = styled(Ripple)`
  *
  */
 
+const defaultRippleConfig = {
+  rippleCentered: false,
+  rippleSequential: false,
+  rippleFades: true,
+  rippleOutsideContainer: false,
+  rippleColor: "#000",
+  rippleOpacity: 0.09,
+  rippleDuration: 600,
+  rippleSize: 0,
+  rippleContainerBorderRadius: 0,
+};
+
 export const Touchable = React.forwardRef((props, ref) => {
-  const { children, elevation, ...rest } = props;
+  const { children, elevation, rippleConfig, ...rest } = props;
   const shadowStyles = elevation ? getShadowStyles(elevation) : {};
 
+  const rippleProps = {
+    ...defaultRippleConfig,
+    rippleCentered:
+      rippleConfig.isCentered ?? defaultRippleConfig.rippleCentered,
+    rippleSequential:
+      rippleConfig.isSequential ?? defaultRippleConfig.rippleSequential,
+    rippleFades: rippleConfig.shouldFade ?? defaultRippleConfig.rippleFades,
+    rippleOutsideContainer:
+      rippleConfig.shouldOverflowContainer ??
+      defaultRippleConfig.rippleOutsideContainer,
+    rippleColor: rippleConfig.color ?? defaultRippleConfig.rippleColor,
+    rippleOpacity: rippleConfig.opacity ?? defaultRippleConfig.rippleOpacity,
+    rippleDuration: rippleConfig.duration ?? defaultRippleConfig.rippleDuration,
+    rippleSize: rippleConfig.size ?? defaultRippleConfig.rippleSize,
+    rippleContainerBorderRadius: rest.borderRadius ? rest.borderRadius : 0,
+  };
+
   return (
-    <StyledRipple
-      ref={ref}
-      rippleContainerBorderRadius={rest.borderRadius ? rest.borderRadius : 0}
-      rippleDuration={600}
-      rippleOpacity={0.09}
-      style={shadowStyles}
-      {...rest}
-    >
+    <StyledRipple ref={ref} style={shadowStyles} {...rippleProps} {...rest}>
       {children}
     </StyledRipple>
   );
@@ -86,8 +111,23 @@ Touchable.propTypes = {
   ...propTypes.color,
   ...propTypes.buttonStyle,
 
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
   elevation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  rippleConfig: PropTypes.shape({
+    isCentered: PropTypes.bool,
+    isSequential: PropTypes.bool,
+    shouldFade: PropTypes.bool,
+    shouldOverflowContainer: PropTypes.bool,
+    color: PropTypes.string,
+    opacity: PropTypes.number,
+    duration: PropTypes.number,
+    size: PropTypes.number,
+    containerBorderRadius: PropTypes.number,
+  }),
+};
+
+Touchable.defaultProps = {
+  rippleConfig: {},
 };
 
 Touchable.displayName = "Touchable";

package/src/components/TouchableWithoutFeedback.jsx

@@ -0,0 +1,51 @@
+import React, { useRef } from "react";
+import { TouchableWithoutFeedback as RNTouchableWithoutFeedback } from "react-native";
+
+import PropTypes from "prop-types";
+
+const TouchableWithoutFeedback = ({ onPress, onPressIn, ...props }) => {
+  const _touchActivatePositionRef = useRef(null);
+
+  function _onPressIn(e) {
+    const { pageX, pageY } = e.nativeEvent;
+
+    _touchActivatePositionRef.current = {
+      pageX,
+      pageY,
+    };
+
+    onPressIn?.(e);
+  }
+
+  function _onPress(e) {
+    const { pageX, pageY } = e.nativeEvent;
+
+    const absX = Math.abs(_touchActivatePositionRef.current.pageX - pageX);
+    const absY = Math.abs(_touchActivatePositionRef.current.pageY - pageY);
+
+    const dragged = absX > 2 || absY > 2;
+    if (!dragged) {
+      onPress?.(e);
+    }
+  }
+
+  return (
+    <RNTouchableWithoutFeedback
+      onPress={_onPress}
+      onPressIn={_onPressIn}
+      {...props}
+    >
+      {props.children}
+    </RNTouchableWithoutFeedback>
+  );
+};
+
+TouchableWithoutFeedback.defaultProps = {};
+
+TouchableWithoutFeedback.propTypes = {
+  onPress: PropTypes.func,
+  onPressIn: PropTypes.func,
+  children: PropTypes.element.isRequired,
+};
+
+export default TouchableWithoutFeedback;