@bigbinary/neetoui-rn 0.0.74 → 0.0.78

package/lib/components/Avatar.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Avatar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _=require("./");var _excluded=["name","size","bgColor","fontColor","imageUrl"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Avatar.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 Avatar=function Avatar(_ref){var name=_ref.name,_ref$size=_ref.size,size=_ref$size===void 0?80:_ref$size,_ref$bgColor=_ref.bgColor,bgColor=_ref$bgColor===void 0?"background.grey200":_ref$bgColor,_ref$fontColor=_ref.fontColor,fontColor=_ref$fontColor===void 0?"font.grey600":_ref$fontColor,imageUrl=_ref.imageUrl,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),fallback=_useState2[0],setFallback=_useState2[1];var acronym=name==null?void 0:name.split(/\s/).reduce(function(response,word){return response+=word.slice(0,1);},"").slice(0,2);var fontSize=size/2-8;var styles={profileImage:{height:size,width:size,alignSelf:"center",borderRadius:size/2}};var renderFallbackText=fallback||!imageUrl;return _react.default.createElement(_react.default.Fragment,null,renderFallbackText?_react.default.createElement(_.Container,(0,_extends2.default)({bg:bgColor,width:size,height:size,borderRadius:size/2},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter700",fontSize:fontSize>14?fontSize:14,color:fontColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:11}},acronym)):_react.default.createElement(_reactNative.Image,(0,_extends2.default)({style:styles.profileImage,source:{uri:imageUrl},onError:function onError(){return setFallback(true);}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,columnNumber:9}})));};exports.Avatar=Avatar;Avatar.defaultProps={alignItems:"center",justifyContent:"center"};Avatar.propTypes={name:_propTypes.default.string,size:_propTypes.default.number,bgColor:_propTypes.default.string,fontColor:_propTypes.default.string,imageUrl:_propTypes.default.string};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Avatar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _=require("./");var _excluded=["name","size","bgColor","fontColor","imageUrl"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Avatar.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 Avatar=function Avatar(_ref){var name=_ref.name,_ref$size=_ref.size,size=_ref$size===void 0?80:_ref$size,_ref$bgColor=_ref.bgColor,bgColor=_ref$bgColor===void 0?"background.grey200":_ref$bgColor,_ref$fontColor=_ref.fontColor,fontColor=_ref$fontColor===void 0?"font.grey600":_ref$fontColor,imageUrl=_ref.imageUrl,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),fallback=_useState2[0],setFallback=_useState2[1];var acronym=name==null?void 0:name.split(/\s/).reduce(function(response,word){return response+=word.slice(0,1);},"").slice(0,2);var fontSize=size/2-8;var styles={profileImage:{height:size,width:size,alignSelf:"center",borderRadius:size/2}};var renderFallbackText=fallback||!imageUrl;return _react.default.createElement(_react.default.Fragment,null,renderFallbackText?_react.default.createElement(_.Container,(0,_extends2.default)({bg:bgColor,width:size,height:size,borderRadius:size/2},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter700",fontSize:fontSize>14?fontSize:14,color:fontColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:11}},acronym.toUpperCase())):_react.default.createElement(_reactNative.Image,(0,_extends2.default)({style:styles.profileImage,source:{uri:imageUrl},onError:function onError(){return setFallback(true);}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,columnNumber:9}})));};exports.Avatar=Avatar;Avatar.defaultProps={alignItems:"center",justifyContent:"center"};Avatar.propTypes={name:_propTypes.default.string,size:_propTypes.default.number,bgColor:_propTypes.default.string,fontColor:_propTypes.default.string,imageUrl:_propTypes.default.string};

package/lib/components/BottomSheet.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","itemContainerStyle","itemTextStyle"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);exports.TouchableOpacity=TouchableOpacity;var Border=function Border(){return React.createElement(_.Container,{bg:"border.primary",height:"1px",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:26,columnNumber:10}});};var Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle;var touchY;return React.createElement(React.Fragment,null,React.createElement(_.Container,(0,_extends2.default)({px:2,bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},alignItems:"center",py:20,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:7}}),title&&React.createElement(_.Typography,(0,_extends2.default)({color:"font.secondary",fontFamily:"inter700",textStyle:"subtext"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:11}}),title)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:7}}));};Title.propTypes={title:_propTypes.default.string,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object};var ContentRow=React.memo(function(_ref2){var label=_ref2.label,onPress=_ref2.onPress,bg=_ref2.bg,isSelected=_ref2.isSelected,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle;return!!label&&React.createElement(React.Fragment,null,React.createElement(TouchableOpacity,(0,_extends2.default)({alignItems:"center",bg:bg,py:12,borderRadius:20,onPress:onPress,px:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:11}}),React.createElement(_.Typography,(0,_extends2.default)({textStyle:"body",fontFamily:isSelected?"inter700":"inter400"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:13}}),label)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:92,columnNumber:11}}));});ContentRow.displayName="ContentRow";ContentRow.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,bg:_propTypes.default.string,isSelected:_propTypes.default.bool,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object};var BottomSheet=function BottomSheet(_ref3){var data=_ref3.data,title=_ref3.title,hide=_ref3.hide,isVisible=_ref3.isVisible,onItemPress=_ref3.onItemPress,selectedItemIndex=_ref3.selectedItemIndex,bg=_ref3.bg,children=_ref3.children,titleContainerStyle=_ref3.titleContainerStyle,titleTextStyle=_ref3.titleTextStyle,itemContainerStyle=_ref3.itemContainerStyle,itemTextStyle=_ref3.itemTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);return React.createElement(_reactNativeModal.default,{style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,hideModalContentWhileAnimating:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:146,columnNumber:5}},React.createElement(_.Container,(0,_extends2.default)({bg:bg,flex:1,borderRadius:20},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:153,columnNumber:7}}),React.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:154,columnNumber:9}},React.createElement(Title,{bg:bg,title:title,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:11}}),data&&React.createElement(_reactNative.FlatList,{contentContainerStyle:styles.flatListContentContainerStyle,initialNumToRender:data.length,data:data,renderItem:function renderItem(_ref4){var item=_ref4.item,index=_ref4.index;return React.createElement(ContentRow,{isSelected:index===selectedItemIndex,bg:bg,key:index,onPress:function onPress(){hide();onItemPress(index);},label:item,itemContainerStyle:itemContainerStyle,itemTextStyle:itemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:170,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:164,columnNumber:13}}),children)));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary"};BottomSheet.propTypes={data:_propTypes.default.array,title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,onItemPress:_propTypes.default.func,selectedItemIndex:_propTypes.default.number,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,children:_propTypes.default.node};var styles=_reactNative.StyleSheet.create({flatListContentContainerStyle:{paddingBottom:40},modalStyle:{margin:0,alignItems:"flex-end",flexDirection:"row"}});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","itemContainerStyle","itemTextStyle"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);exports.TouchableOpacity=TouchableOpacity;var Border=function Border(){return React.createElement(_.Container,{bg:"border.primary",height:"1px",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:26,columnNumber:10}});};var Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle;var touchY;return React.createElement(React.Fragment,null,React.createElement(_.Container,(0,_extends2.default)({px:2,bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},alignItems:"center",py:20,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:7}}),title&&React.createElement(_.Typography,(0,_extends2.default)({color:"font.secondary",fontFamily:"inter700",textStyle:"subtext"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:11}}),title)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:7}}));};Title.propTypes={title:_propTypes.default.string,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object};var ContentRow=React.memo(function(_ref2){var label=_ref2.label,onPress=_ref2.onPress,bg=_ref2.bg,isSelected=_ref2.isSelected,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle;return!!label&&React.createElement(React.Fragment,null,React.createElement(TouchableOpacity,(0,_extends2.default)({alignItems:"center",bg:bg,py:12,borderRadius:20,onPress:onPress,px:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:11}}),React.createElement(_.Typography,(0,_extends2.default)({textStyle:"body",fontFamily:isSelected?"inter700":"inter400"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:13}}),label)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:92,columnNumber:11}}));});ContentRow.displayName="ContentRow";ContentRow.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,bg:_propTypes.default.string,isSelected:_propTypes.default.bool,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object};var BottomSheet=function BottomSheet(_ref3){var data=_ref3.data,title=_ref3.title,hide=_ref3.hide,isVisible=_ref3.isVisible,onItemPress=_ref3.onItemPress,selectedItemIndex=_ref3.selectedItemIndex,bg=_ref3.bg,children=_ref3.children,titleContainerStyle=_ref3.titleContainerStyle,titleTextStyle=_ref3.titleTextStyle,itemContainerStyle=_ref3.itemContainerStyle,itemTextStyle=_ref3.itemTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);return React.createElement(_reactNativeModal.default,{style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:5}},React.createElement(_.Container,(0,_extends2.default)({bg:bg,flex:1,borderTopRightRadius:20,borderTopLeftRadius:20},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:7}}),React.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:9}},React.createElement(Title,{bg:bg,title:title,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:176,columnNumber:11}}),data&&React.createElement(_reactNative.FlatList,{contentContainerStyle:styles.flatListContentContainerStyle,initialNumToRender:data.length,data:data,renderItem:function renderItem(_ref4){var item=_ref4.item,index=_ref4.index;return React.createElement(ContentRow,{isSelected:index===selectedItemIndex,bg:bg,key:index,onPress:function onPress(){hide();onItemPress(index);},label:item,itemContainerStyle:itemContainerStyle,itemTextStyle:itemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:185,columnNumber:13}}),children)));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary"};BottomSheet.propTypes={data:_propTypes.default.array,title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,onItemPress:_propTypes.default.func,selectedItemIndex:_propTypes.default.number,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,children:_propTypes.default.node};var styles=_reactNative.StyleSheet.create({flatListContentContainerStyle:{paddingBottom:40},modalStyle:{margin:0,alignItems:"flex-end",flexDirection:"row"}});

package/lib/components/OtpInputs.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _theme=require("../theme");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.js";var OtpInputs=function OtpInputs(_ref){var _ref$handleChange=_ref.handleChange,handleChange=_ref$handleChange===void 0?function(){}:_ref$handleChange,_ref$numberOfInputs=_ref.numberOfInputs,numberOfInputs=_ref$numberOfInputs===void 0?4:_ref$numberOfInputs,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,_ref$code=_ref.code,code=_ref$code===void 0?"":_ref$code,textContainerStyle=_ref.textContainerStyle,textStyle=_ref.textStyle;var inputRef=_react.default.useRef();return _react.default.createElement(_.Container,{style:styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:5}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){_reactNative.Keyboard.dismiss();inputRef&&inputRef.current.focus();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:52,columnNumber:7}},_react.default.createElement(_.Container,{style:styles.inputsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:58,columnNumber:9}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,{key:index,style:[styles.textContainer,textContainerStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:17}},_react.default.createElement(_reactNative.Text,{testID:"otp",accessibilityLabel:"otp",style:[styles.otpInput,error===true?{color:_theme.theme.colors.font.danger}:{},textStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:19}},code[index]||""));}),_react.default.createElement(_reactNative.TextInput,{keyboardType:"phone-pad",selectionColor:"transparent",onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,style:styles.emptyViewStyle,value:code||"",__self:_this,__source:{fileName:_jsxFileName,lineNumber:81,columnNumber:11}}))));};exports.OtpInputs=OtpInputs;OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,textContainerStyle:_propTypes.default.object,textStyle:_propTypes.default.object};var styles=_reactNative.StyleSheet.create({container:{marginTop:5,marginBottom:5},otpInput:(0,_extends2.default)({color:_theme.theme.colors.font.secondary,fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.inter700,textAlign:"center",minHeight:40,minWidth:40,textAlignVertical:"center",alignItems:"center"},_reactNative.Platform.select({ios:{paddingTop:5},android:{}}),{backgroundColor:"transparent"}),textContainer:{margin:5,borderRadius:6,borderWidth:1,borderColor:_theme.theme.colors.background.secondary,backgroundColor:_theme.theme.colors.background.white},inputsContainer:{flexDirection:"row",alignItems:"center",justifyContent:"center"},emptyViewStyle:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"}});exports.styles=styles;

package/lib/components/RichTextEditor.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ScrollView=exports.RichTextEditor=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePellRichEditor=require("react-native-pell-rich-editor");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _hooks=require("../hooks");var _=require("./");var _excluded=["onChange","placeholderText","children","toolbarActions","editorProps","toolBarProps"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RichTextEditor.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 ScrollView=_native.default.ScrollView.attrs(function(){return{keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:true,showsHorizontalScrollIndicator:false,contentContainerStyle:{flexGrow:1}};})(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.flexbox,_styledSystem.border,_styledSystem.layout);exports.ScrollView=ScrollView;var RichTextEditor=function RichTextEditor(_ref){var onChange=_ref.onChange,placeholderText=_ref.placeholderText,children=_ref.children,toolbarActions=_ref.toolbarActions,editorProps=_ref.editorProps,toolBarProps=_ref.toolBarProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var richTextRef=(0,_react.useRef)();var keyboardHeight=(0,_hooks.useKeyboard)();var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),toolbarVisible=_useState2[0],setToolbar=_useState2[1];var showToolbar=keyboardHeight>0&&toolbarVisible;var computeToolbarActions=function computeToolbarActions(){var actionItems=[];toolbarActions==null?void 0:toolbarActions.map(function(actionItem){actionItems.push(_reactNativePellRichEditor.actions[actionItem]);});return actionItems;};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(ScrollView,(0,_extends2.default)({},rest==null?void 0:rest.editorWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:7}}),_react.default.createElement(_reactNativePellRichEditor.RichEditor,(0,_extends2.default)({placeholder:placeholderText||"Type here...",ref:richTextRef,onChange:onChange,useContainer:false,onFocus:function onFocus(){setToolbar(true);editorProps==null?void 0:editorProps.onFocusFn();},onBlur:function onBlur(){setToolbar(false);editorProps==null?void 0:editorProps.onBlurFn();}},editorProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:9}})),children),showToolbar&&_react.default.createElement(_.Container,(0,_extends2.default)({bottom:keyboardHeight},rest==null?void 0:rest.toolbarWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:116,columnNumber:9}}),_react.default.createElement(_reactNativePellRichEditor.RichToolbar,(0,_extends2.default)({editor:richTextRef,actions:computeToolbarActions()},toolBarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:11}}))));};exports.RichTextEditor=RichTextEditor;RichTextEditor.defaultProps={editorProps:{},toolBarProps:{}};RichTextEditor.propTypes={onChange:_propTypes.default.func.isRequired,children:_propTypes.default.node,placeholderText:_propTypes.default.string,toolbarActions:_propTypes.default.array.isRequired,editorProps:_propTypes.default.object,toolBarProps:_propTypes.default.object};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ScrollView=exports.RichTextEditor=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePellRichEditor=require("react-native-pell-rich-editor");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _hooks=require("../hooks");var _=require("./");var _excluded=["onChange","placeholderText","children","toolbarActions","editorProps","toolBarProps"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RichTextEditor.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 ScrollView=_native.default.ScrollView.attrs(function(){return{keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:true,showsHorizontalScrollIndicator:false,contentContainerStyle:{flexGrow:1}};})(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.flexbox,_styledSystem.border,_styledSystem.layout);exports.ScrollView=ScrollView;var RichTextEditor=function RichTextEditor(_ref){var onChange=_ref.onChange,placeholderText=_ref.placeholderText,children=_ref.children,toolbarActions=_ref.toolbarActions,editorProps=_ref.editorProps,toolBarProps=_ref.toolBarProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var richTextRef=(0,_react.useRef)();var keyboardHeight=(0,_hooks.useKeyboard)();var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),toolbarVisible=_useState2[0],setToolbar=_useState2[1];var showToolbar=keyboardHeight>0&&toolbarVisible;var computeToolbarActions=function computeToolbarActions(){var actionItems=[];toolbarActions==null?void 0:toolbarActions.map(function(actionItem){actionItems.push(_reactNativePellRichEditor.actions[actionItem]);});return actionItems;};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(ScrollView,(0,_extends2.default)({},rest==null?void 0:rest.editorWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:7}}),_react.default.createElement(_reactNativePellRichEditor.RichEditor,(0,_extends2.default)({placeholder:placeholderText,ref:richTextRef,onChange:onChange,useContainer:false,onFocus:function onFocus(){setToolbar(true);editorProps==null?void 0:editorProps.onFocusFn();},onBlur:function onBlur(){setToolbar(false);editorProps==null?void 0:editorProps.onBlurFn();}},editorProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:9}})),children),showToolbar&&_react.default.createElement(_.Container,(0,_extends2.default)({bottom:keyboardHeight},rest==null?void 0:rest.toolbarWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:116,columnNumber:9}}),_react.default.createElement(_reactNativePellRichEditor.RichToolbar,(0,_extends2.default)({editor:richTextRef,actions:computeToolbarActions()},toolBarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:11}}))));};exports.RichTextEditor=RichTextEditor;RichTextEditor.defaultProps={editorProps:{},toolBarProps:{},placeholderText:"Type here..."};RichTextEditor.propTypes={onChange:_propTypes.default.func.isRequired,children:_propTypes.default.node,placeholderText:_propTypes.default.string,toolbarActions:_propTypes.default.array.isRequired,editorProps:_propTypes.default.object,toolBarProps:_propTypes.default.object};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});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,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});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,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});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,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");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");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});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,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});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,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});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,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});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,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");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");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.74",
+  "version": "0.0.78",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/Avatar.js

@@ -79,7 +79,7 @@ export const Avatar = ({
             fontSize={fontSize > 14 ? fontSize : 14}
             color={fontColor}
           >
-            {acronym}
+            {acronym.toUpperCase()}
           </Typography>
         </Container>
       ) : (

package/src/components/BottomSheet.js

@@ -110,16 +110,30 @@ ContentRow.propTypes = {
  *
  * ## Usage
  * ```js
- * import * as React from 'react';
- * import { Typography, Container } from '@bigbinary/neetoui-rn';
+ * import React, { useState } from 'react';
+ * import { Container, BottomSheet } from '@bigbinary/neetoui-rn';
  *
  * export default function Main() {
+ *  const [isBottomSheetVisible, setBottomSheetVisibility] = useState(false);
+ *  const [selectedItemIndex, setSelectedItemIndex] = useState(null);
+ *  const data = ["neeto-ui-rn", "neeto-desk-rn", "neeto-hq"];
+ *
  *  return (
  *    <Container>
- *     <Typography>
- *         This is basic example of Typography
- *      </Typography>
- *     </Container>
+ *     <BottomSheet
+ *       maxHeight={200}
+ *       isVisible={isBottomSheetVisible}
+ *       hide={() => {
+ *         setBottomSheetVisibility(false);
+ *       }}
+ *       onItemPress={index => {
+ *         setSelectedItemIndex(index);
+ *       }}
+ *       title="PROJECT"
+ *       data={data}
+ *       selectedItemIndex={selectedItemIndex}
+ *      />
+ *   </Container>
  *  );
  * }
  * ```
@@ -148,9 +162,16 @@ export const BottomSheet = ({
       isVisible={isVisible}
       onBackdropPress={hide}
       useNativeDriver
+      avoidKeyboard
       hideModalContentWhileAnimating
     >
-      <Container bg={bg} flex={1} borderRadius={20} {...rest}>
+      <Container
+        bg={bg}
+        flex={1}
+        borderTopRightRadius={20}
+        borderTopLeftRadius={20}
+        {...rest}
+      >
         <Container>
           <Title
             bg={bg}

package/src/components/OtpInputs.js

@@ -0,0 +1,173 @@
+import React from "react";
+import {
+  Keyboard,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Platform,
+} from "react-native";
+import { theme } from "../theme";
+import PropTypes from "prop-types";
+import { Container } from "@components";
+
+/**
+ *
+ * One-Time password input component.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/otpInputs/otpInputs.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Container, OtpInputs, Typography} from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ * const [code, setCode] = useState("");
+ * return (
+ *   <Container flex={1} justifyContent="center" alignItems="center">
+ *      <OtpInputs code={code} numberOfInputs={6} handleChange={setCode} />
+ *      <Typography py={10} fontSize="xl">
+ *        {`Your entered OTP is ${code}`}
+ *      </Typography>
+ *    </Container>
+ *  );
+ * ```
+ */
+
+export const OtpInputs = ({
+  handleChange = () => {},
+  numberOfInputs = 4,
+  error = false,
+  code = "",
+  textContainerStyle,
+  textStyle,
+}) => {
+  const inputRef = React.useRef();
+
+  return (
+    <Container style={styles.container}>
+      <TouchableOpacity
+        onPress={() => {
+          Keyboard.dismiss();
+          inputRef && inputRef.current.focus();
+        }}
+      >
+        <Container style={styles.inputsContainer}>
+          {Array(numberOfInputs)
+            .fill()
+            .map((number, index) => {
+              return (
+                <Container
+                  key={index}
+                  style={[styles.textContainer, textContainerStyle]}
+                >
+                  <Text
+                    testID="otp"
+                    accessibilityLabel="otp"
+                    style={[
+                      styles.otpInput,
+                      error === true ? { color: theme.colors.font.danger } : {},
+                      textStyle,
+                    ]}
+                  >
+                    {code[index] || ""}
+                  </Text>
+                </Container>
+              );
+            })}
+          <TextInput
+            keyboardType="phone-pad"
+            selectionColor="transparent"
+            onChangeText={value => {
+              if (!isNaN(value)) {
+                if (value.length <= numberOfInputs) {
+                  handleChange && handleChange(value);
+                }
+                if (value.length >= numberOfInputs) {
+                  return Keyboard.dismiss();
+                }
+              }
+            }}
+            ref={inputRef}
+            style={styles.emptyViewStyle}
+            value={code || ""}
+          />
+        </Container>
+      </TouchableOpacity>
+    </Container>
+  );
+};
+
+OtpInputs.propTypes = {
+  /**
+   * This would be OTP code.
+   */
+  code: PropTypes.string.isRequired,
+  /**
+   * Number of Input Fields.
+   */
+  numberOfInputs: PropTypes.number.isRequired,
+  /**
+   * Callback called when code is changed.
+   */
+  handleChange: PropTypes.func.isRequired,
+  /**
+   * If true, code will be shown in red color.
+   */
+  error: PropTypes.bool,
+  /**
+   * To change the styles of main container.
+   */
+  textContainerStyle: PropTypes.object,
+  /**
+   * To change the styles of OTP text.
+   */
+  textStyle: PropTypes.object,
+};
+
+export const styles = StyleSheet.create({
+  container: {
+    marginTop: 5,
+    marginBottom: 5,
+  },
+  otpInput: {
+    color: theme.colors.font.secondary,
+    fontSize: theme.fontSizes.xl,
+    fontFamily: theme.fonts.inter700,
+    textAlign: "center",
+    minHeight: 40,
+    minWidth: 40,
+    textAlignVertical: "center",
+    alignItems: "center",
+    ...Platform.select({
+      ios: {
+        paddingTop: 5,
+      },
+      android: {},
+    }),
+    backgroundColor: "transparent",
+  },
+  textContainer: {
+    margin: 5,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: theme.colors.background.secondary,
+    backgroundColor: theme.colors.background.white,
+  },
+  inputsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  emptyViewStyle: {
+    fontSize: 0,
+    backgroundColor: "transparent",
+    color: "transparent",
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+  },
+});

package/src/components/RichTextEditor.js

@@ -95,7 +95,7 @@ export const RichTextEditor = ({
     <>
       <ScrollView {...rest?.editorWrapperStyle}>
         <RichEditor
-          placeholder={placeholderText || "Type here..."}
+          placeholder={placeholderText}
           ref={richTextRef}
           onChange={onChange}
           useContainer={false}
@@ -128,6 +128,7 @@ export const RichTextEditor = ({
 RichTextEditor.defaultProps = {
   editorProps: {},
   toolBarProps: {},
+  placeholderText: "Type here...",
 };
 
 RichTextEditor.propTypes = {

package/src/components/index.js

@@ -13,3 +13,4 @@ export { Chip } from "./Chip";
 export { ParentView } from "./ParentView";
 export { RichTextEditor } from "./RichTextEditor";
 export { ButtonGroup } from "./ButtonGroup";
+export { OtpInputs } from "./OtpInputs";