@bigbinary/neetoui-rn 0.0.263 → 0.0.265

package/lib/config/toasterConfig.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.defaultToasterConfig=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeToastMessage=_interopRequireWildcard(require("react-native-toast-message"));var _theme=require("../theme");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/config/toasterConfig.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 CloseButton=function CloseButton(){return _react.default.createElement(_reactNative.Pressable,{style:styles.closeButtonStyle,onPress:_reactNativeToastMessage.default.hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:10,columnNumber:3}},_react.default.createElement(_reactNativeRemixIcon.default,{color:_theme.theme.colors.background.white,name:"ri-close-fill",size:25,__self:_this,__source:{fileName:_jsxFileName,lineNumber:11,columnNumber:5}}));};var defaultToasterConfig={success:function success(props){return _react.default.createElement(_reactNativeToastMessage.BaseToast,(0,_extends2.default)({},props,{contentContainerStyle:styles.contentContainerStyle,leadingIconContainerStyle:styles.toasterBGColor,renderTrailingIcon:function renderTrailingIcon(){return _react.default.createElement(CloseButton,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:25,columnNumber:33}});},text1NumberOfLines:10,text1Style:styles.text1Style,text2NumberOfLines:10,text2Style:styles.text2Style,touchableContainerProps:{style:[styles.touchableContainerProps,styles.successStyle]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:21,columnNumber:5}}));},error:function error(props){return _react.default.createElement(_reactNativeToastMessage.BaseToast,(0,_extends2.default)({},props,{contentContainerStyle:styles.contentContainerStyle,leadingIconContainerStyle:styles.toasterBGColor,renderTrailingIcon:function renderTrailingIcon(){return _react.default.createElement(CloseButton,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:40,columnNumber:33}});},text1NumberOfLines:10,text1Style:styles.text1Style,text2NumberOfLines:10,text2Style:styles.text2Style,touchableContainerProps:{style:[styles.touchableContainerProps,styles.errorStyle]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:36,columnNumber:5}}));},info:function info(props){return _react.default.createElement(_reactNativeToastMessage.BaseToast,(0,_extends2.default)({},props,{contentContainerStyle:styles.contentContainerStyle,leadingIconContainerStyle:styles.toasterBGColor,renderTrailingIcon:function renderTrailingIcon(){return _react.default.createElement(CloseButton,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:33}});},text1NumberOfLines:10,text1Style:styles.text1Style,text2NumberOfLines:10,text2Style:styles.text2Style,touchableContainerProps:{style:[styles.touchableContainerProps,styles.infoStyle]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:5}}));},warning:function warning(props){return _react.default.createElement(_reactNativeToastMessage.BaseToast,(0,_extends2.default)({},props,{contentContainerStyle:styles.contentContainerStyle,leadingIconContainerStyle:styles.toasterBGColor,renderTrailingIcon:function renderTrailingIcon(){return _react.default.createElement(CloseButton,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:33}});},text1NumberOfLines:10,text1Style:styles.text1Style,text2NumberOfLines:10,text2Style:styles.text2Style,touchableContainerProps:{style:[styles.touchableContainerProps,styles.warningStyle]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:5}}));}};exports.defaultToasterConfig=defaultToasterConfig;defaultToasterConfig.success.displayName="Success";defaultToasterConfig.error.displayName="Error";var styles=_reactNative.StyleSheet.create({touchableContainerProps:{flexDirection:"row",flex:1,paddingVertical:10,width:340,borderRadius:6,shadowOffset:{width:0,height:0},shadowOpacity:0.1,shadowRadius:6,elevation:2,backgroundColor:"#FFF",borderLeftWidth:5,borderLeftColor:"#D8D8D8"},successStyle:{borderLeftColor:_theme.theme.colors.toast.success,backgroundColor:_theme.theme.colors.background.grey800},errorStyle:{borderLeftColor:_theme.theme.colors.toast.error,backgroundColor:_theme.theme.colors.background.grey800},infoStyle:{borderLeftColor:_theme.theme.colors.toast.info,backgroundColor:_theme.theme.colors.background.grey800},warningStyle:{borderLeftColor:_theme.theme.colors.toast.warning,backgroundColor:_theme.theme.colors.background.grey800},toasterBGColor:{backgroundColor:_theme.theme.colors.background.grey800},contentContainerStyle:{paddingHorizontal:15,backgroundColor:_theme.theme.colors.background.grey800},text1Style:{fontSize:15,fontFamily:_theme.theme.fonts.sf700,color:_theme.theme.colors.font.white},text2Style:{fontSize:16,fontFamily:_theme.theme.fonts.sf700,color:_theme.theme.colors.font.white},closeButtonStyle:{justifyContent:"center",alignItems:"center",paddingRight:10,backgroundColor:_theme.theme.colors.background.grey800,shadowColor:_theme.theme.colors.background.grey800,flexDirection:"row",borderTopRightRadius:6,borderBottomRightRadius:6,shadowOffset:{width:0,height:0},shadowOpacity:0.1,shadowRadius:6,elevation:2}});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.defaultToasterConfig=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _neetoIconsRn=require("@bigbinary/neeto-icons-rn");var _reactNativeSizeMatters=require("react-native-size-matters");var _reactNativeToastMessage=_interopRequireWildcard(require("react-native-toast-message"));var _theme=require("../theme");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/config/toasterConfig.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 CloseButton=function CloseButton(){return _react.default.createElement(_reactNative.Pressable,{style:styles.closeButtonStyle,onPress:_reactNativeToastMessage.default.hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:11,columnNumber:3}},_react.default.createElement(_neetoIconsRn.Close,{color:_theme.theme.colors.background.white,size:(0,_reactNativeSizeMatters.moderateScale)(22),__self:_this,__source:{fileName:_jsxFileName,lineNumber:12,columnNumber:5}}));};var defaultToasterConfig={success:function success(props){return _react.default.createElement(_reactNativeToastMessage.BaseToast,(0,_extends2.default)({},props,{contentContainerStyle:styles.contentContainerStyle,leadingIconContainerStyle:styles.toasterBGColor,renderTrailingIcon:function renderTrailingIcon(){return _react.default.createElement(CloseButton,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:33}});},text1NumberOfLines:10,text1Style:styles.text1Style,text2NumberOfLines:10,text2Style:styles.text2Style,touchableContainerProps:{style:[styles.touchableContainerProps,styles.successStyle]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:18,columnNumber:5}}));},error:function error(props){return _react.default.createElement(_reactNativeToastMessage.BaseToast,(0,_extends2.default)({},props,{contentContainerStyle:styles.contentContainerStyle,leadingIconContainerStyle:styles.toasterBGColor,renderTrailingIcon:function renderTrailingIcon(){return _react.default.createElement(CloseButton,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:37,columnNumber:33}});},text1NumberOfLines:10,text1Style:styles.text1Style,text2NumberOfLines:10,text2Style:styles.text2Style,touchableContainerProps:{style:[styles.touchableContainerProps,styles.errorStyle]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:5}}));},info:function info(props){return _react.default.createElement(_reactNativeToastMessage.BaseToast,(0,_extends2.default)({},props,{contentContainerStyle:styles.contentContainerStyle,leadingIconContainerStyle:styles.toasterBGColor,renderTrailingIcon:function renderTrailingIcon(){return _react.default.createElement(CloseButton,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:52,columnNumber:33}});},text1NumberOfLines:10,text1Style:styles.text1Style,text2NumberOfLines:10,text2Style:styles.text2Style,touchableContainerProps:{style:[styles.touchableContainerProps,styles.infoStyle]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}}));},warning:function warning(props){return _react.default.createElement(_reactNativeToastMessage.BaseToast,(0,_extends2.default)({},props,{contentContainerStyle:styles.contentContainerStyle,leadingIconContainerStyle:styles.toasterBGColor,renderTrailingIcon:function renderTrailingIcon(){return _react.default.createElement(CloseButton,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:33}});},text1NumberOfLines:10,text1Style:styles.text1Style,text2NumberOfLines:10,text2Style:styles.text2Style,touchableContainerProps:{style:[styles.touchableContainerProps,styles.warningStyle]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:5}}));}};exports.defaultToasterConfig=defaultToasterConfig;defaultToasterConfig.success.displayName="Success";defaultToasterConfig.error.displayName="Error";var styles=_reactNative.StyleSheet.create({touchableContainerProps:{flexDirection:"row",flex:1,paddingVertical:10,width:340,borderRadius:6,shadowOffset:{width:0,height:0},shadowOpacity:0.1,shadowRadius:6,elevation:2,backgroundColor:"#FFF",borderLeftWidth:5,borderLeftColor:"#D8D8D8"},successStyle:{borderLeftColor:_theme.theme.colors.toast.success,backgroundColor:_theme.theme.colors.background.grey800},errorStyle:{borderLeftColor:_theme.theme.colors.toast.error,backgroundColor:_theme.theme.colors.background.grey800},infoStyle:{borderLeftColor:_theme.theme.colors.toast.info,backgroundColor:_theme.theme.colors.background.grey800},warningStyle:{borderLeftColor:_theme.theme.colors.toast.warning,backgroundColor:_theme.theme.colors.background.grey800},toasterBGColor:{backgroundColor:_theme.theme.colors.background.grey800},contentContainerStyle:{paddingHorizontal:15,backgroundColor:_theme.theme.colors.background.grey800},text1Style:{fontSize:15,fontFamily:_theme.theme.fonts.sf700,color:_theme.theme.colors.font.white},text2Style:{fontSize:16,fontFamily:_theme.theme.fonts.sf700,color:_theme.theme.colors.font.white},closeButtonStyle:{justifyContent:"center",alignItems:"center",paddingRight:10,backgroundColor:_theme.theme.colors.background.grey800,shadowColor:_theme.theme.colors.background.grey800,flexDirection:"row",borderTopRightRadius:6,borderBottomRightRadius:6,shadowOffset:{width:0,height:0},shadowOpacity:0.1,shadowRadius:6,elevation:2}});

package/lib/hooks/useRefreshByUser.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useRefreshByUser=useRefreshByUser;var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");function useRefreshByUser(refetch){var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isRefetchingByUser=_useState2[0],setIsRefetchingByUser=_useState2[1];function refetchByUser(){return _regenerator.default.async(function refetchByUser$(_context){while(1){switch(_context.prev=_context.next){case 0:setIsRefetchingByUser(true);_context.prev=1;_context.next=4;return _regenerator.default.awrap(refetch());case 4:_context.prev=4;setIsRefetchingByUser(false);return _context.finish(4);case 7:case"end":return _context.stop();}}},null,null,[[1,,4,7]],Promise);}return{isRefetchingByUser:isRefetchingByUser,refetchByUser:refetchByUser};}
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useRefreshByUser=useRefreshByUser;var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");function useRefreshByUser(refetch){var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isRefetchingByUser=_useState2[0],setIsRefetchingByUser=_useState2[1];function refetchByUser(){return _regenerator.default.async(function refetchByUser$(_context){while(1)switch(_context.prev=_context.next){case 0:setIsRefetchingByUser(true);_context.prev=1;_context.next=4;return _regenerator.default.awrap(refetch());case 4:_context.prev=4;setIsRefetchingByUser(false);return _context.finish(4);case 7:case"end":return _context.stop();}},null,null,[[1,,4,7]],Promise);}return{isRefetchingByUser:isRefetchingByUser,refetchByUser:refetchByUser};}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.263",
+  "version": "0.0.265",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -51,6 +51,8 @@
     "react-native-webview": "11.14.4"
   },
   "dependencies": {
+    "@bigbinary/neeto-commons-frontend": "^2.0.129",
+    "@bigbinary/neeto-icons-rn": "^1.0.3",
     "@react-native-community/hooks": "^2.8.1",
     "@shopify/flash-list": "^1.2.0",
     "@styled-system/prop-types": "^5.1.5",
@@ -63,7 +65,6 @@
     "react-native-modal": "^13.0.0",
     "react-native-pell-rich-editor": "^1.8.6",
     "react-native-popover-view": "^5.1.7",
-    "react-native-remix-icon": "^0.3.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-size-matters": "^0.4.0",
     "react-native-snap-carousel": "4.0.0-beta.6",

package/src/components/Accordion.jsx

@@ -7,8 +7,8 @@ import React, {
 } from "react";
 import { Animated, StyleSheet } from "react-native";
 
+import { Down } from "@bigbinary/neeto-icons-rn";
 import PropTypes from "prop-types";
-import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 import styled, { ThemeContext } from "styled-components/native";
 import {
@@ -122,7 +122,7 @@ export const Accordion = React.forwardRef(
     },
     ref
   ) => {
-    const { name, Label, size, color } = iconProp;
+    const { Label, size, color } = iconProp;
     const theme = useContext(ThemeContext);
     const [isExpanded, setIsExpanded] = useState(false);
     const animationController = useRef(
@@ -190,9 +190,8 @@ export const Accordion = React.forwardRef(
                 }}
               >
                 <Container>
-                  <Icon
+                  <Down
                     color={color ?? theme.colors.font.grey700}
-                    name={name ?? "ri-arrow-down-s-line"}
                     size={size ?? moderateScale(24)}
                   />
                 </Container>

package/src/components/ActionIcon.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
+
+import { theme } from "@theme";
+
+import { Loader } from "./Loader";
+import { Touchable } from "./Touchable";
+import { Typography } from "./Typography";
+
+export const ActionIcon = ({
+  isLoading = false,
+  icon: Icon,
+  onPress,
+  size = moderateScale(24),
+  color = theme.colors.font.grey800,
+  disabled = false,
+  label,
+  iconProps,
+  ...rest
+}) => (
+  <Touchable
+    alignItems="center"
+    aspectRatio={1}
+    disabled={disabled || isLoading}
+    height={moderateScale(40)}
+    justifyContent="center"
+    maxHeight={moderateScale(64)}
+    maxWidth={moderateScale(64)}
+    opacity={disabled ? 0.5 : 1}
+    onPress={onPress}
+    {...rest}
+  >
+    {isLoading ? <Loader /> : <Icon color={color} size={size} {...iconProps} />}
+    {!!label && (
+      <Typography
+        color="font.grey600"
+        fontFamily="sf400"
+        fontSize="4xs"
+        mt={moderateScale(2)}
+      >
+        {label}
+      </Typography>
+    )}
+  </Touchable>
+);
+
+ActionIcon.propTypes = {
+  /**
+   * The icon that should be displayed
+   */
+  icon: PropTypes.elementType,
+  /**
+   * The Func that should be triggered on click of the action icon
+   */
+  onPress: PropTypes.func,
+  /** To customize the size of the icon
+   */
+  size: PropTypes.number,
+  /** To customize the color of the icon
+   */
+  color: PropTypes.string,
+  /** To set the disabled state
+   */
+  disabled: PropTypes.bool,
+  /** The label that should be displayed next to the icon
+   */
+  label: PropTypes.string,
+  /** To display the loading state
+   */
+  isLoading: PropTypes.bool,
+  /** To additionally customize the icon
+   */
+  iconProps: PropTypes.object,
+};

package/src/components/ChatInput/ChatInput.jsx

@@ -7,18 +7,20 @@ import React, {
   useImperativeHandle,
 } from "react";
 
+import {
+  ChatBubble,
+  Notes,
+  Attachment,
+  Forward,
+  CannedResponses,
+  Down,
+} from "@bigbinary/neeto-icons-rn";
 import { parse } from "node-html-parser";
 import PropTypes from "prop-types";
-import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 
-import AttachmentSVG from "@assets/icons/attachment.svg";
-import CannedResponseSVG from "@assets/icons/canned-response.svg";
 import ExpandSVG from "@assets/icons/expand.svg";
-import ForwardSVG from "@assets/icons/forward.svg";
 import MinimizeSVG from "@assets/icons/minimize.svg";
-import NoteSVG from "@assets/icons/note.svg";
-import ReplySVG from "@assets/icons/reply.svg";
 import { Container, LineLoader, Popover, Button } from "@components";
 
 import { AttachmentsView } from "./AttachmentsView";
@@ -383,19 +385,24 @@ export const ChatInput = forwardRef(
             >
               <Container flexDirection="row" justifyContent="space-between">
                 <IconButton
-                  Icon={ReplySVG}
+                  Icon={ChatBubble}
                   opacity={isReplyOptionSelected ? 1 : 0.5}
                   pl={moderateScale(10)}
+                  iconProps={{
+                    viewBox: "0 0 37 37",
+                    size: moderateScale(30),
+                    color: theme.colors.font.grey500,
+                  }}
                   onPress={onReplyClickHandler}
                 />
                 <IconButton
-                  Icon={NoteSVG}
+                  Icon={Notes}
                   opacity={isNoteOptionSelected ? 1 : 0.5}
                   onPress={onAddNoteClickHandler}
                 />
                 {onForward && (
                   <IconButton
-                    Icon={ForwardSVG}
+                    Icon={Forward}
                     opacity={isForwardOptionSelected ? 1 : 0.5}
                     onPress={onAddForwardClickHandler}
                   />
@@ -408,13 +415,17 @@ export const ChatInput = forwardRef(
                 {onCannedResponse &&
                   showCannedResponsesFor.includes(selectedOption) && (
                     <IconButton
-                      Icon={CannedResponseSVG}
+                      Icon={CannedResponses}
                       opacity={0.5}
+                      iconProps={{
+                        viewBox: "0 0 38 38",
+                        size: moderateScale(30),
+                      }}
                       onPress={onCannedResponse}
                     />
                   )}
                 <IconButton
-                  Icon={AttachmentSVG}
+                  Icon={Attachment}
                   opacity={0.5}
                   onPress={onAddAttachmentsClickHandler}
                 />
@@ -444,10 +455,9 @@ export const ChatInput = forwardRef(
                         p={0}
                         variant="text"
                         RightIcon={() => (
-                          <Icon
+                          <Down
                             color={theme.colors.background.grey800}
-                            name="ri-arrow-down-s-line"
-                            size={moderateScale(30)}
+                            size={moderateScale(22)}
                           />
                         )}
                       />

package/src/components/ChatInput/IconButton.jsx

@@ -1,22 +1,34 @@
-import React from "react";
+import React, { useContext } from "react";
 
 import PropTypes from "prop-types";
 import { moderateScale } from "react-native-size-matters";
+import { ThemeContext } from "styled-components/native";
 
 import { Touchable } from "@components";
 
-export const IconButton = ({ Icon, ...rest }) => (
-  <Touchable
-    alignItems="center"
-    height={moderateScale(22)}
-    px={moderateScale(18)}
-    width={moderateScale(22)}
-    {...rest}
-  >
-    {<Icon />}
-  </Touchable>
-);
+export const IconButton = ({ Icon, iconProps, ...rest }) => {
+  const theme = useContext(ThemeContext);
+
+  return (
+    <Touchable
+      alignItems="center"
+      height={moderateScale(22)}
+      px={moderateScale(18)}
+      width={moderateScale(22)}
+      {...rest}
+    >
+      {
+        <Icon
+          color={theme.colors.font.grey800}
+          size={moderateScale(22)}
+          {...iconProps}
+        />
+      }
+    </Touchable>
+  );
+};
 
 IconButton.propTypes = {
   Icon: PropTypes.elementType,
+  iconProps: PropTypes.object,
 };

package/src/components/CheckBox.jsx

@@ -1,7 +1,10 @@
 import React, { useContext } from "react";
 
+import {
+  Checkbox as CheckboxIcon,
+  CheckboxInactive,
+} from "@bigbinary/neeto-icons-rn";
 import Proptypes from "prop-types";
-import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
@@ -82,6 +85,8 @@ export const CheckBox = ({
     },
   };
 
+  const Icon = checked ? CheckboxIcon : CheckboxInactive;
+
   return (
     <Touchable
       alignItems="center"
@@ -105,8 +110,7 @@ export const CheckBox = ({
       </Typography>
       <Icon
         color={theme.colors.font.primary}
-        name={checked ? "checkbox-line" : "checkbox-blank-line"}
-        size={moderateScale(20)}
+        size={moderateScale(22)}
         {...checkIconStyle}
       />
     </Touchable>

package/src/components/Chip.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
+import { Close } from "@bigbinary/neeto-icons-rn";
 import PropTypes from "prop-types";
-import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 
 import { Typography, Touchable, Container } from "@components";
@@ -68,7 +68,8 @@ export const Chip = ({
   onChipPress,
   isDisabled,
   closeIconSize,
-  closeIcon,
+  closeIcon: CloseIcon,
+  closeIconProps,
   containerStyle,
   closeIconContainerStyle,
 }) => (
@@ -103,7 +104,11 @@ export const Chip = ({
         {...closeIconContainerStyle}
       >
         <Touchable disabled={isDisabled} onPress={onClose}>
-          <Icon color={closeIconColor} name={closeIcon} size={closeIconSize} />
+          <CloseIcon
+            color={closeIconColor}
+            size={closeIconSize}
+            {...closeIconProps}
+          />
         </Touchable>
       </Container>
     )}
@@ -115,9 +120,10 @@ Chip.defaultProps = {
   labelColor: "font.primary",
   closeIconBackground: "background.grey500",
   closeIconColor: "white",
+  closeIconProps: { viewBox: "0 0 25 25" },
   isDisabled: false,
   closeIconSize: moderateScale(14),
-  closeIcon: "ri-close-fill",
+  closeIcon: Close,
 };
 
 Chip.propTypes = {
@@ -154,9 +160,13 @@ Chip.propTypes = {
    */
   closeIconSize: PropTypes.number,
   /**
-   * Close icon name can be specified if default one needs to changed. Only supports remixIcons.
+   * Close icon can be specified if default one needs to changed. Only supports neeto-icons.
    */
-  closeIcon: PropTypes.string,
+  closeIcon: PropTypes.elementType,
+  /**
+   * Add additional customization to close icon.
+   */
+  closeIconProps: PropTypes.object,
   /**
    * Expects a function to execute on chip press.
    */

package/src/components/MultiSelect.jsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Keyboard, TouchableWithoutFeedback } from "react-native";
 
+import { Close, Up, Down } from "@bigbinary/neeto-icons-rn";
 import PropTypes from "prop-types";
 import Animated, {
   interpolate,
@@ -8,7 +9,6 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 import styled, { ThemeContext } from "styled-components/native";
 import {
@@ -106,10 +106,10 @@ const MultiSelectItem = ({
           disabled={disabled}
           onPress={handleItemUnSelection}
         >
-          <Icon
+          <Close
             color={theme.colors.font.grey800}
-            name="ri-close-line"
-            size={moderateScale(20)}
+            size={moderateScale(18)}
+            viewBox="0 0 25 20"
           />
         </TouchableWithoutFeedback>
       )}
@@ -337,6 +337,8 @@ export const MultiSelect = ({
     fontSize: interpolate(animatedLabelValue.value, [0, 1], [17, 13]),
   }));
 
+  const OpenCloseIcon = showDropdown ? Up : Down;
+
   return (
     <Container {...containerStyle}>
       <TouchableWithoutFeedback
@@ -419,11 +421,7 @@ export const MultiSelect = ({
               {isLoading ? (
                 <Loader color={theme.colors.background.base} />
               ) : (
-                <Icon
-                  color="grey"
-                  name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
-                  size={moderateScale(20)}
-                />
+                <OpenCloseIcon color="grey" size={moderateScale(20)} />
               )}
             </Container>
           </Container>

package/src/components/NotificationIcon.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { Notification } from "@bigbinary/neeto-icons-rn";
+import PropTypes from "prop-types";
+
+import { ActionIcon } from "./ActionIcon";
+import { Container } from "./Container";
+
+export const NotificationIcon = ({ unreadCount = 0, onPress = () => {} }) => (
+  <Container>
+    <ActionIcon icon={Notification} {...{ onPress }} />
+    {unreadCount > 0 && (
+      <Container
+        bg="background.danger"
+        borderRadius={5}
+        height={10}
+        position="absolute"
+        px={2}
+        py={1}
+        right={10}
+        top={7}
+        width={10}
+        zIndex={1}
+      />
+    )}
+  </Container>
+);
+
+NotificationIcon.propTypes = {
+  /**
+   * The unread notifications count to show red indicator
+   */
+  unreadCount: PropTypes.number,
+  /**
+   * Func which will be triggered on click of the notification icon.
+   */
+  onPress: PropTypes.func,
+};

package/src/components/Popover.jsx

@@ -90,7 +90,6 @@ PopOverItem.propTypes = {
  * import * as React from 'react';
  * import { Text } from "react-native";
  * import { Container, Button, Popover } from '@bigbinary/neetoui-rn';
- * import Icon from "react-native-remix-icon";
  * import { ThemeContext } from "styled-components/native";
  *
  * export default function Main(){

package/src/components/RadioButton.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 
+import { Radio, RadioInactive } from "@bigbinary/neeto-icons-rn";
 import Proptypes from "prop-types";
-import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
@@ -90,6 +90,8 @@ export const RadioButton = ({
     },
   };
 
+  const Icon = selected ? Radio : RadioInactive;
+
   return (
     <Touchable
       alignItems="center"
@@ -113,8 +115,7 @@ export const RadioButton = ({
       </Typography>
       <Icon
         color={theme.colors.font.primary}
-        name={selected ? "ri-radio-button-line" : "checkbox-blank-circle-line"}
-        size={moderateScale(20)}
+        size={moderateScale(22)}
         {...selectIconStyle}
       />
     </Touchable>

package/src/components/SearchBar.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Dimensions, TouchableWithoutFeedback, StyleSheet } from "react-native";
 
+import { Search } from "@bigbinary/neeto-icons-rn";
 import PropTypes from "prop-types";
 import Animated, {
   Easing,
@@ -9,7 +10,6 @@ import Animated, {
   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";
 import {
@@ -125,10 +125,9 @@ export const SearchBar = ({
           {...containerProps}
         >
           <Container px={moderateScale(8)}>
-            <Icon
+            <Search
               color={theme.colors.font.grey600}
-              name="ri-search-line"
-              size={moderateScale(20)}
+              size={moderateScale(22)}
             />
           </Container>
           <TextInput

package/src/components/Toast.jsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import { useContext, useEffect } from "react";
 import { useWindowDimensions } from "react-native";
 
+import { Close } from "@bigbinary/neeto-icons-rn";
 import PropTypes from "prop-types";
 import DeviceInfo from "react-native-device-info";
-import CloseIcon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 import T from "react-native-toast-message";
 import { ThemeContext } from "styled-components/native";
@@ -104,7 +104,7 @@ const ToastComponent = ({ type, text1, text2, hide, isVisible }) => {
           hide();
         }}
       >
-        <CloseIcon color={theme.colors.font.grey500} name="ri-close-line" />
+        <Close color={theme.colors.font.grey500} size={moderateScale(22)} />
       </Touchable>
     </Card>
   );

package/src/components/ToggleSwitch.jsx

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useRef } from "react";
 import { Animated } from "react-native";
 
+import { Check, Close } from "@bigbinary/neeto-icons-rn";
 import PropTypes from "prop-types";
-import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
@@ -61,6 +61,8 @@ export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
     ? theme.colors.background.purple500
     : theme.colors.font.grey500;
 
+  const Icon = value ? Check : Close;
+
   return (
     <Touchable
       bg={containerBg}
@@ -85,8 +87,8 @@ export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
         >
           <Icon
             color={iconColor}
-            name={`ri-${value ? "check" : "close"}-line`}
-            size={moderateScale(12)}
+            size={moderateScale(18)}
+            viewBox={value ? "0 0 22 27" : "0 0 25 25"}
           />
         </Container>
       </Animated.View>

package/src/components/index.js

@@ -41,3 +41,5 @@ export { ChatInput } from "./ChatInput/ChatInput";
 export { Loader } from "./Loader";
 export { InputEmailChip } from "./InputEmailChip";
 export { LineLoader } from "./LineLoader";
+export { ActionIcon } from "./ActionIcon";
+export { NotificationIcon } from "./NotificationIcon";

package/src/config/toasterConfig.jsx

@@ -1,18 +1,15 @@
 import React from "react";
 import { Pressable, StyleSheet } from "react-native";
 
-import Icon from "react-native-remix-icon";
+import { Close } from "@bigbinary/neeto-icons-rn";
+import { moderateScale } from "react-native-size-matters";
 import Toast, { BaseToast } from "react-native-toast-message";
 
 import { theme } from "@theme";
 
 const CloseButton = () => (
   <Pressable style={styles.closeButtonStyle} onPress={Toast.hide}>
-    <Icon
-      color={theme.colors.background.white}
-      name="ri-close-fill"
-      size={25}
-    />
+    <Close color={theme.colors.background.white} size={moderateScale(22)} />
   </Pressable>
 );
 

package/assets/icons/attachment.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 16.1163V6.90698C12 6.48233 11.6504 6.13953 11.2174 6.13953C10.7843 6.13953 10.4348 6.48233 10.4348 6.90698V16.1163C10.4348 18.5158 8.44696 20.4651 6 20.4651C3.55304 20.4651 1.56522 18.5158 1.56522 16.1163V4.34884C1.56522 2.7986 2.85391 1.53488 4.43478 1.53488C6.01565 1.53488 7.30435 2.7986 7.30435 4.34884V15.3488C7.30435 16.0549 6.72 16.6279 6 16.6279C5.28 16.6279 4.69565 16.0549 4.69565 15.3488V5.37209C4.69565 4.94744 4.34609 4.60465 3.91304 4.60465C3.48 4.60465 3.13043 4.94744 3.13043 5.37209V15.3488C3.13043 16.8991 4.41913 18.1628 6 18.1628C7.58087 18.1628 8.86957 16.8991 8.86957 15.3488V4.34884C8.86957 1.9493 6.88174 0 4.43478 0C1.98783 0 0 1.9493 0 4.34884V16.1163C0 19.36 2.69217 22 6 22C9.30783 22 12 19.36 12 16.1163Z" fill="#2F3941"/>
-</svg>

package/assets/icons/canned-response.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 5H3V21L7.5 18.3H19V11" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M21 5H14" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M18.999 3L21 5L18.999 7" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/assets/icons/forward.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 13.097V16.165C13 17.032 14.029 17.488 14.672 16.906L20.702 11.44C21.15 11.034 21.138 10.327 20.677 9.93697L14.647 4.81897C13.997 4.26697 13 4.72897 13 5.58097V8.01797C7.537 8.01797 3 11.39 3 17V18.129C4.847 14.445 8.687 13.097 13 13.097Z" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/assets/icons/note.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.414 6.414L15.586 3.586C15.211 3.211 14.702 3 14.172 3H7C5.895 3 5 3.895 5 5V19C5 20.105 5.895 21 7 21H17C18.105 21 19 20.105 19 19V7.828C19 7.298 18.789 6.789 18.414 6.414V6.414Z" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19 8H15C14.448 8 14 7.552 14 7V3" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>