@bigbinary/neetoui-rn 0.0.233 → 0.0.235

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/SearchBar.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));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 _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.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 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 SearchBar=function SearchBar(_ref){var _ref$placeholder=_ref.placeholder,placeholder=_ref$placeholder===void 0?"Search":_ref$placeholder,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,_ref$onCancel=_ref.onCancel,onCancel=_ref$onCancel===void 0?function(){}:_ref$onCancel,_ref$debounceDelay=_ref.debounceDelay,debounceDelay=_ref$debounceDelay===void 0?1000:_ref$debounceDelay,_ref$showCancelButton=_ref.showCancelButton,showCancelButton=_ref$showCancelButton===void 0?true:_ref$showCancelButton,containerProps=_ref.containerProps,searchbarProps=_ref.searchbarProps;var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText.trim(),Number(debounceDelay));var buttonWidthController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;var buttonOpacityController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.sequence([_reactNative.Animated.timing(buttonOpacityController,{toValue:val,duration:350,useNativeDriver:false}),_reactNative.Animated.timing(buttonWidthController,{toValue:val,duration:200,useNativeDriver:false})]).start();};var cancelButtonWidth=buttonWidthController.interpolate({inputRange:[0,1],outputRange:[0,60]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,columnNumber:5}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){var _inputRef$current;if(!(inputRef!=null&&(_inputRef$current=inputRef.current)!=null&&_inputRef$current.isFocused())){var _inputRef$current2;inputRef==null?void 0:(_inputRef$current2=inputRef.current)==null?void 0:_inputRef$current2.focus();}},__self:_this,__source:{fileName:_jsxFileName,lineNumber:103,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",borderColor:_theme.theme.colors.border.grey400,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),borderWidth:(0,_reactNativeSizeMatters.moderateScale)(1),flex:1,flexDirection:"row",height:(0,_reactNativeSizeMatters.moderateScale)(42)},containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:9}}),_react.default.createElement(_.Container,{px:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:11}},_react.default.createElement(_reactNativeRemixIcon.default,{color:_theme.theme.colors.font.grey600,name:"ri-search-line",size:(0,_reactNativeSizeMatters.moderateScale)(20),__self:_this,__source:{fileName:_jsxFileName,lineNumber:121,columnNumber:13}})),_react.default.createElement(TextInput,(0,_extends2.default)({autoCapitalize:"none",color:"font.primary",flex:1,fontSize:(0,_reactNativeSizeMatters.moderateScale)(16),placeholder:placeholder,placeholderTextColor:_theme.theme.colors.font.grey600,ref:inputRef,returnKeyType:"search",value:searchText,onChangeText:setSearchText,onBlur:function onBlur(){if(!searchText)animateSearchInput(0);},onFocus:function onFocus(){animateSearchInput(1);}},searchbarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:11}})))),showCancelButton&&_react.default.createElement(_reactNative.Animated.View,{style:{opacity:buttonOpacityController,width:cancelButtonWidth,alignItems:"flex-end",justifyContent:"center"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:149,columnNumber:9}},_react.default.createElement(_.Button,{height:(0,_reactNativeSizeMatters.moderateScale)(20),label:"Cancel",labelStyle:{mx:0},variant:"text",onPress:onCancelHandle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:11}})));};exports.SearchBar=SearchBar;SearchBar.propTypes={placeholder:_propTypes.default.string,onChangeText:_propTypes.default.func.isRequired,debounceDelay:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),searchbarProps:_propTypes.default.object,onCancel:_propTypes.default.func,showCancelButton:_propTypes.default.bool,containerProps:_propTypes.default.object};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));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 _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.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 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 _Dimensions$get=_reactNative.Dimensions.get("window"),screenWidth=_Dimensions$get.width;var buttonSize=(0,_reactNativeSizeMatters.moderateScale)(screenWidth*0.19);var SearchBar=function SearchBar(_ref){var _ref$placeholder=_ref.placeholder,placeholder=_ref$placeholder===void 0?"Search":_ref$placeholder,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,_ref$onCancel=_ref.onCancel,onCancel=_ref$onCancel===void 0?function(){}:_ref$onCancel,_ref$debounceDelay=_ref.debounceDelay,debounceDelay=_ref$debounceDelay===void 0?1000:_ref$debounceDelay,_ref$showCancelButton=_ref.showCancelButton,showCancelButton=_ref$showCancelButton===void 0?true:_ref$showCancelButton,containerProps=_ref.containerProps,searchbarProps=_ref.searchbarProps;var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText.trim(),Number(debounceDelay));var buttonWidth=(0,_reactNativeReanimated.useSharedValue)(0);var buttonOpacity=(0,_reactNativeReanimated.useSharedValue)(0);(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){buttonWidth.value=(0,_reactNativeReanimated.withTiming)(val,{easing:_reactNativeReanimated.Easing.linear,duration:200});buttonOpacity.value=(0,_reactNativeReanimated.withTiming)(val,{easing:_reactNativeReanimated.Easing.linear,duration:100});};var cancelButtonStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{width:(0,_reactNativeReanimated.interpolate)(buttonWidth.value,[0,1],[0,buttonSize]),opacity:buttonOpacity.value};};_f._closure={interpolate:_reactNativeReanimated.interpolate,buttonWidth:buttonWidth,buttonSize:buttonSize,buttonOpacity:buttonOpacity};_f.asString="function _f(){const{interpolate,buttonWidth,buttonSize,buttonOpacity}=jsThis._closure;{return{width:interpolate(buttonWidth.value,[0,1],[0,buttonSize]),opacity:buttonOpacity.value};}}";_f.__workletHash=14021668969407;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.jsx (96:45)";_f.__optimalization=3;return _f;}());var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:5}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){var _inputRef$current;if(!(inputRef!=null&&(_inputRef$current=inputRef.current)!=null&&_inputRef$current.isFocused())){var _inputRef$current2;inputRef==null?void 0:(_inputRef$current2=inputRef.current)==null?void 0:_inputRef$current2.focus();}},__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",borderColor:_theme.theme.colors.border.grey400,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),borderWidth:(0,_reactNativeSizeMatters.moderateScale)(1),flex:1,flexDirection:"row",height:(0,_reactNativeSizeMatters.moderateScale)(42)},containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:9}}),_react.default.createElement(_.Container,{px:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:11}},_react.default.createElement(_reactNativeRemixIcon.default,{color:_theme.theme.colors.font.grey600,name:"ri-search-line",size:(0,_reactNativeSizeMatters.moderateScale)(20),__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:13}})),_react.default.createElement(TextInput,(0,_extends2.default)({autoCapitalize:"none",color:"font.primary",flex:1,fontSize:(0,_reactNativeSizeMatters.moderateScale)(16),padding:0,placeholder:placeholder,placeholderTextColor:_theme.theme.colors.font.grey600,ref:inputRef,returnKeyType:"search",value:searchText,onChangeText:setSearchText,onBlur:function onBlur(){if(!searchText)animateSearchInput(0);},onFocus:function onFocus(){animateSearchInput(1);}},searchbarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:11}})))),showCancelButton&&_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.cancelButtonWrapper,cancelButtonStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:9}},_react.default.createElement(_.Touchable,{flexGrow:1,height:(0,_reactNativeSizeMatters.moderateScale)(42),justifyContent:"center",px:(0,_reactNativeSizeMatters.moderateScale)(8),onPress:onCancelHandle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:158,columnNumber:11}},_react.default.createElement(_.Typography,{fontFamily:_theme.theme.fonts.sf500,numberOfLines:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,columnNumber:13}},"Cancel"))));};exports.SearchBar=SearchBar;var styles=_reactNative.StyleSheet.create({cancelButtonWrapper:{alignItems:"flex-end",justifyContent:"center"}});SearchBar.propTypes={placeholder:_propTypes.default.string,onChangeText:_propTypes.default.func.isRequired,debounceDelay:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),searchbarProps:_propTypes.default.object,onCancel:_propTypes.default.func,showCancelButton:_propTypes.default.bool,containerProps:_propTypes.default.object};

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/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.233",
+  "version": "0.0.235",
   "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",

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/SearchBar.jsx

@@ -1,7 +1,14 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Animated, TouchableWithoutFeedback } from "react-native";
+import { Dimensions, TouchableWithoutFeedback, StyleSheet } from "react-native";
 
 import PropTypes from "prop-types";
+import Animated, {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 import styled from "styled-components/native";
@@ -14,7 +21,7 @@ import {
   color,
 } from "styled-system";
 
-import { Container, Button } from "@components";
+import { Container, Touchable, Typography } from "@components";
 import { useDebounce } from "@hooks";
 import { theme } from "@theme";
 
@@ -49,6 +56,9 @@ const TextInput = styled.TextInput`
  * ```
  */
 
+const { width: screenWidth } = Dimensions.get("window");
+const buttonSize = moderateScale(screenWidth * 0.19);
+
 export const SearchBar = ({
   placeholder = "Search",
   onChangeText = () => {},
@@ -64,32 +74,29 @@ export const SearchBar = ({
     searchText.trim(),
     Number(debounceDelay)
   );
-  const buttonWidthController = useRef(new Animated.Value(0)).current;
-  const buttonOpacityController = useRef(new Animated.Value(0)).current;
+  const buttonWidth = useSharedValue(0);
+  const buttonOpacity = useSharedValue(0);
 
   useEffect(() => {
     onChangeText(debouncedSearchTextValue);
   }, [debouncedSearchTextValue, onChangeText]);
 
   const animateSearchInput = val => {
-    Animated.sequence([
-      Animated.timing(buttonOpacityController, {
-        toValue: val,
-        duration: 350,
-        useNativeDriver: false,
-      }),
-      Animated.timing(buttonWidthController, {
-        toValue: val,
-        duration: 200,
-        useNativeDriver: false,
-      }),
-    ]).start();
+    buttonWidth.value = withTiming(val, {
+      easing: Easing.linear,
+      duration: 200,
+    });
+
+    buttonOpacity.value = withTiming(val, {
+      easing: Easing.linear,
+      duration: 100,
+    });
   };
 
-  const cancelButtonWidth = buttonWidthController.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 60],
-  });
+  const cancelButtonStyle = useAnimatedStyle(() => ({
+    width: interpolate(buttonWidth.value, [0, 1], [0, buttonSize]),
+    opacity: buttonOpacity.value,
+  }));
 
   const onCancelHandle = () => {
     animateSearchInput(0);
@@ -117,7 +124,7 @@ export const SearchBar = ({
           height={moderateScale(42)}
           {...containerProps}
         >
-          <Container px={moderateScale(10)}>
+          <Container px={moderateScale(8)}>
             <Icon
               color={theme.colors.font.grey600}
               name="ri-search-line"
@@ -129,6 +136,7 @@ export const SearchBar = ({
             color="font.primary"
             flex={1}
             fontSize={moderateScale(16)}
+            padding={0}
             placeholder={placeholder}
             placeholderTextColor={theme.colors.font.grey600}
             ref={inputRef}
@@ -146,27 +154,31 @@ export const SearchBar = ({
         </Container>
       </TouchableWithoutFeedback>
       {showCancelButton && (
-        <Animated.View
-          style={{
-            opacity: buttonOpacityController,
-            width: cancelButtonWidth,
-            alignItems: "flex-end",
-            justifyContent: "center",
-          }}
-        >
-          <Button
-            height={moderateScale(20)}
-            label="Cancel"
-            labelStyle={{ mx: 0 }}
-            variant="text"
+        <Animated.View style={[styles.cancelButtonWrapper, cancelButtonStyle]}>
+          <Touchable
+            flexGrow={1}
+            height={moderateScale(42)}
+            justifyContent="center"
+            px={moderateScale(8)}
             onPress={onCancelHandle}
-          />
+          >
+            <Typography fontFamily={theme.fonts.sf500} numberOfLines={1}>
+              Cancel
+            </Typography>
+          </Touchable>
         </Animated.View>
       )}
     </Container>
   );
 };
 
+const styles = StyleSheet.create({
+  cancelButtonWrapper: {
+    alignItems: "flex-end",
+    justifyContent: "center",
+  },
+});
+
 SearchBar.propTypes = {
   /**
    * Set the placeholder text

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/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;