@bigbinary/neetoui-rn 0.0.209 → 0.0.211

package/index.d.ts

@@ -219,7 +219,7 @@ type CarouselProps = {
   renderItem: () => React.ReactNode;
   carouselRef?: React.RefObject<Carousel>;
   onSnapToItem?: (index: number) => void;
-  containerStyle: ViewProps
+  containerStyle: ViewProps;
 };
 
 interface CheckBoxProps extends TouchableProps {
@@ -294,6 +294,20 @@ interface ListItemProps extends ViewProps {
   RightComponent: React.FC;
 }
 
+type NotificationPreferenceListItem = {
+  label: string;
+  enabled: boolean;
+  onSwitch: (item: any, index: number) => void;
+  LeftIcon?: React.FC;
+};
+interface NotificationPreferenceListProps extends ViewProps {
+  data: Array<NotificationPreferenceListItem>;
+  itemWrapperProps?: ViewProps;
+  itemContainerProps?: ViewProps;
+  labelContainerProps?: ViewProps;
+  labelProps?: TypographyProps;
+}
+
 interface MultiSelectProps extends ViewProps {
   options?: Array<any>;
   label?: string;
@@ -336,6 +350,17 @@ type OnBoardingProps = {
   logoWidth?: number;
 };
 
+interface OrganizationItemProps extends ViewProps {
+  label?: string;
+  name: string;
+  containerProps?: ViewProps;
+  iconContainerProps?: ViewProps;
+  iconProps?: { size: number; color: typeof theme.colors.font; name: string };
+  textContainerProps?: ViewProps;
+  labelProps?: TypographyProps;
+  nameProps?: TypographyProps;
+}
+
 type OtpInputsProps = {
   handleChange: (value: string) => void;
   numberOfInputs: number;
@@ -458,8 +483,10 @@ export const FlashList: React.FC<FlashListProps>;
 export const FlatList: React.FC<FlatListProps>;
 export const Input: React.FC<InputProps>;
 export const ListItem: React.FC<ListItemProps>;
+export const NotificationPreferenceList: React.FC<NotificationPreferenceListProps>;
 export const MultiSelect: React.FC<MultiSelectProps>;
 export const OnBoarding: React.FC<OnBoardingProps>;
+export const OrganizationItem: React.FC<OrganizationItemProps>;
 export const OtpInputs: React.FC<OtpInputsProps>;
 export const ParentView: React.FC<ParentViewProps>;
 export const Popover: React.FC<PopoverProps>;

package/lib/components/NotificationPreferenceList.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.NotificationPreferenceList=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["data","itemWrapperProps","itemContainerProps","labelContainerProps","labelProps"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/NotificationPreferenceList.js";var NotificationPreferenceList=function NotificationPreferenceList(props){var data=props.data,itemWrapperProps=props.itemWrapperProps,itemContainerProps=props.itemContainerProps,labelContainerProps=props.labelContainerProps,labelProps=props.labelProps,rest=(0,_objectWithoutProperties2.default)(props,_excluded);return _react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.secondary",borderRadius:8},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,columnNumber:5}}),data==null?void 0:data.map(function(item,index){var label=item.label,enabled=item.enabled,onSwitch=item.onSwitch,LeftIcon=item.LeftIcon;var isLastItem=index===data.length-1;return _react.default.createElement(_.Container,(0,_extends2.default)({key:index,px:12},itemWrapperProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:93,columnNumber:11}}),_react.default.createElement(_.Container,(0,_extends2.default)({py:15,flexDirection:"row",alignItems:"center",justifyContent:"space-between"},itemContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:13}}),_react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",alignItems:"center",width:"85%",pr:15},labelContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:101,columnNumber:15}}),LeftIcon&&_react.default.createElement(_.Container,{mr:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:19}},_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:21}})),_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.grey800",fontSize:"l",fontFamily:"sf400"},labelProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:17}}),label)),_react.default.createElement(_.ToggleSwitch,{value:enabled,onValueChange:function onValueChange(){return onSwitch(item,index);},mt:4,__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:15}})),!isLastItem&&_react.default.createElement(_.Divider,{bg:"background.grey300",__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:29}}));}));};exports.NotificationPreferenceList=NotificationPreferenceList;NotificationPreferenceList.propTypes={data:_propTypes.default.array.isRequired,itemWrapperProps:_propTypes.default.object,itemContainerProps:_propTypes.default.object,labelContainerProps:_propTypes.default.object,labelProps:_propTypes.default.object};

package/lib/components/OrganizationItem.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.OrganizationItem=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("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _native=require("styled-components/native");var _excluded=["label","name","containerProps","iconContainerProps","iconProps","textContainerProps","labelProps","nameProps"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OrganizationItem.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var OrganizationItem=function OrganizationItem(props){var label=props.label,name=props.name,containerProps=props.containerProps,iconContainerProps=props.iconContainerProps,iconProps=props.iconProps,textContainerProps=props.textContainerProps,labelProps=props.labelProps,nameProps=props.nameProps,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);return _react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.secondary",width:"100%",px:16,py:12,borderRadius:6,alignItems:"center",justifyContent:"space-between"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:5}}),_react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",alignItems:"flex-start"},containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:54,columnNumber:7}}),_react.default.createElement(_.Container,(0,_extends2.default)({mr:9},iconContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:9}}),_react.default.createElement(_reactNativeRemixIcon.default,(0,_extends2.default)({size:20,color:theme.colors.font.grey800,name:"building-line"},iconProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:11}}))),_react.default.createElement(_.Container,(0,_extends2.default)({flex:1},textContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:9}}),_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.grey800",fontSize:"l",fontFamily:"sf500"},labelProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:11}}),label||"Organization"),_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.grey",fontSize:"m",fontFamily:"sf500",mt:"8px"},nameProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:76,columnNumber:11}}),name))));};exports.OrganizationItem=OrganizationItem;OrganizationItem.propTypes={label:_propTypes.default.string,name:_propTypes.default.string.isRequired,containerProps:_propTypes.default.object,iconContainerProps:_propTypes.default.object,iconProps:_propTypes.default.object,textContainerProps:_propTypes.default.object,labelProps:_propTypes.default.object,nameProps:_propTypes.default.object};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"AnimatedImage",{enumerable:true,get:function get(){return _AnimatedImage.AnimatedImage;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"BottomTabBar",{enumerable:true,get:function get(){return _BottomTabBar.BottomTabBar;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlashList",{enumerable:true,get:function get(){return _FlashList.FlashList;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentedTopBar",{enumerable:true,get:function get(){return _SegmentedTopBar.SegmentedTopBar;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _SocialButton=require("./SocialButton");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentedTopBar=require("./SegmentedTopBar");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");var _FlashList=require("./FlashList");var _BottomTabBar=require("./BottomTabBar");var _AnimatedImage=require("./AnimatedImage");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"AnimatedImage",{enumerable:true,get:function get(){return _AnimatedImage.AnimatedImage;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"BottomTabBar",{enumerable:true,get:function get(){return _BottomTabBar.BottomTabBar;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlashList",{enumerable:true,get:function get(){return _FlashList.FlashList;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"NotificationPreferenceList",{enumerable:true,get:function get(){return _NotificationPreferenceList.NotificationPreferenceList;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});Object.defineProperty(exports,"OrganizationItem",{enumerable:true,get:function get(){return _OrganizationItem.OrganizationItem;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentedTopBar",{enumerable:true,get:function get(){return _SegmentedTopBar.SegmentedTopBar;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _SocialButton=require("./SocialButton");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentedTopBar=require("./SegmentedTopBar");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");var _FlashList=require("./FlashList");var _BottomTabBar=require("./BottomTabBar");var _AnimatedImage=require("./AnimatedImage");var _NotificationPreferenceList=require("./NotificationPreferenceList");var _OrganizationItem=require("./OrganizationItem");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.209",
+  "version": "0.0.211",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -63,7 +63,7 @@
     "react-native-popover-view": "^4.1.0",
     "react-native-remix-icon": "^0.3.0",
     "react-native-safe-area-context": "^3.3.2",
-    "react-native-snap-carousel": "^3.9.1",
+    "react-native-snap-carousel": "4.0.0-beta.6",
     "react-native-toast-message": "^2.1.0",
     "styled-components": "^5.3.3",
     "styled-system": "^5.1.5"

package/src/components/NotificationPreferenceList.js

@@ -0,0 +1,157 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Container, Typography, Divider, ToggleSwitch } from "@components";
+
+/**
+ *
+ * Buttons are touchable elements used to interact with the screen and to trigger an action.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/notificationPreferenceList/notificationPreferenceList.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Container, NotificationPreferenceList } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  const [data, setData] = useState([]);
+ * 
+ *  const handleSwitch = (item, index) => {
+ *    setData(prevData => {
+ *      const newData = [...prevData];
+ *      newData[index].enabled = !newData[index].enabled;
+ *      return newData;
+ *    });
+ *  };
+
+ *  useEffect(() => {
+ *    setData([
+ *      {
+ *        label: "Preference 1",
+ *        enabled: true,
+ *        onSwitch: handleSwitch,
+ *      },
+ *      {
+ *        label: "Preference 2",
+ *        enabled: true,
+ *        onSwitch: handleSwitch,
+ *      },
+ *      {
+ *        label: "Preference 3",
+ *        enabled: false,
+ *        onSwitch: handleSwitch,
+ *      },
+ *      {
+ *        label: "Preference 4",
+ *        enabled: false,
+ *        onSwitch: handleSwitch,
+ *      },
+ *      {
+ *        label: "Preference 5",
+ *        enabled: false,
+ *        onSwitch: handleSwitch,
+ *        LeftIcon: () => (
+ *          <Icon
+ *            name="ri-notification-2-line"
+ *            size={20}
+ *            color={theme.colors.font.secondary}
+ *          />
+ *        ),
+ *      },
+ *    ]);
+ *  }, []);
+
+ *  return (
+ *    <Container flex={1} alignItems="center" justifyContent="center">
+ *      {data && <NotificationPreferenceList data={data} />}
+ *    </Container>
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const NotificationPreferenceList = props => {
+  const {
+    data,
+    itemWrapperProps,
+    itemContainerProps,
+    labelContainerProps,
+    labelProps,
+    ...rest
+  } = props;
+
+  return (
+    <Container bg="background.secondary" borderRadius={8} {...rest}>
+      {data?.map((item, index) => {
+        const { label, enabled, onSwitch, LeftIcon } = item;
+        const isLastItem = index === data.length - 1;
+        return (
+          <Container key={index} px={12} {...itemWrapperProps}>
+            <Container
+              py={15}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="space-between"
+              {...itemContainerProps}
+            >
+              <Container
+                flexDirection="row"
+                alignItems="center"
+                width="85%"
+                pr={15}
+                {...labelContainerProps}
+              >
+                {LeftIcon && (
+                  <Container mr={10}>
+                    <LeftIcon />
+                  </Container>
+                )}
+                <Typography
+                  color="font.grey800"
+                  fontSize="l"
+                  fontFamily="sf400"
+                  {...labelProps}
+                >
+                  {label}
+                </Typography>
+              </Container>
+              <ToggleSwitch
+                value={enabled}
+                onValueChange={() => onSwitch(item, index)}
+                mt={4}
+              />
+            </Container>
+            {!isLastItem && <Divider bg="background.grey300" />}
+          </Container>
+        );
+      })}
+    </Container>
+  );
+};
+
+NotificationPreferenceList.propTypes = {
+  /**
+   * Array of preference list
+   */
+  data: PropTypes.array.isRequired,
+  /**
+   * Customize outer container for each item
+   */
+  itemWrapperProps: PropTypes.object,
+  /**
+   * Customize inner container for each item
+   */
+  itemContainerProps: PropTypes.object,
+  /**
+   * Customize container for each item label
+   */
+  labelContainerProps: PropTypes.object,
+  /**
+   * Customize item label
+   */
+  labelProps: PropTypes.object,
+};

package/src/components/OrganizationItem.js

@@ -0,0 +1,124 @@
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import Icon from "react-native-remix-icon";
+
+import { Container, Typography } from "@components";
+import { ThemeContext } from "styled-components/native";
+
+/**
+ *
+ * Buttons are touchable elements used to interact with the screen and to trigger an action.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/organizationItem/organizationItem.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { OrganizationItem } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <OrganizationItem name="BigBinary Solutions Pvt. Ltd." />
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const OrganizationItem = props => {
+  const {
+    label,
+    name,
+    containerProps,
+    iconContainerProps,
+    iconProps,
+    textContainerProps,
+    labelProps,
+    nameProps,
+    ...rest
+  } = props;
+  const theme = useContext(ThemeContext);
+  return (
+    <Container
+      bg="background.secondary"
+      width="100%"
+      px={16}
+      py={12}
+      borderRadius={6}
+      alignItems="center"
+      justifyContent="space-between"
+      {...rest}
+    >
+      <Container
+        flexDirection="row"
+        alignItems="flex-start"
+        {...containerProps}
+      >
+        <Container mr={9} {...iconContainerProps}>
+          <Icon
+            size={20}
+            color={theme.colors.font.grey800}
+            name="building-line"
+            {...iconProps}
+          />
+        </Container>
+        <Container flex={1} {...textContainerProps}>
+          <Typography
+            color="font.grey800"
+            fontSize="l"
+            fontFamily="sf500"
+            {...labelProps}
+          >
+            {label || "Organization"}
+          </Typography>
+          <Typography
+            color="font.grey"
+            fontSize="m"
+            fontFamily="sf500"
+            mt="8px"
+            {...nameProps}
+          >
+            {name}
+          </Typography>
+        </Container>
+      </Container>
+    </Container>
+  );
+};
+
+OrganizationItem.propTypes = {
+  /**
+   * Organization label
+   */
+  label: PropTypes.string,
+  /**
+   * Organization name
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * Customize inner container
+   */
+  containerProps: PropTypes.object,
+  /**
+   * Customize icon container
+   */
+  iconContainerProps: PropTypes.object,
+  /**
+   * Customize icon
+   */
+  iconProps: PropTypes.object,
+  /**
+   * Customize label and name container
+   */
+  textContainerProps: PropTypes.object,
+  /**
+   * Customize label
+   */
+  labelProps: PropTypes.object,
+  /**
+   * Customize name
+   */
+  nameProps: PropTypes.object,
+};

package/src/components/index.js

@@ -36,3 +36,5 @@ export { Calendar } from "./Calendar";
 export { FlashList } from "./FlashList";
 export { BottomTabBar } from "./BottomTabBar";
 export { AnimatedImage } from "./AnimatedImage";
+export { NotificationPreferenceList } from "./NotificationPreferenceList";
+export { OrganizationItem } from "./OrganizationItem";