@bigbinary/neetoui-rn 0.0.61 → 0.0.65

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 _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 _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;var touchY;return React.createElement(React.Fragment,null,React.createElement(_.Container,{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,style:{},__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:7}},React.createElement(_.Typography,{color:"font.secondary",fontFamily:"inter700",textStyle:"subtext",__self:_this,__source:{fileName:_jsxFileName,lineNumber:45,columnNumber:9}},title)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:53,columnNumber:7}}));};Title.propTypes={title:_propTypes.default.string,hide:_propTypes.default.func,bg:_propTypes.default.string};var ContentRow=React.memo(function(_ref2){var label=_ref2.label,onPress=_ref2.onPress,bg=_ref2.bg,isSelected=_ref2.isSelected;return React.createElement(React.Fragment,null,React.createElement(TouchableOpacity,{alignItems:"center",bg:bg,py:12,borderRadius:20,onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:7}},React.createElement(_.Typography,{textStyle:"body",fontFamily:isSelected?"inter700":"inter400",__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}},label)),React.createElement(Border,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:81,columnNumber:7}}));});ContentRow.displayName="ContentRow";ContentRow.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,bg:_propTypes.default.string,isSelected:_propTypes.default.bool};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;return React.createElement(_reactNativeModal.default,{style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,hideModalContentWhileAnimating:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:5}},React.createElement(_.Container,{bg:bg,flex:1,borderRadius:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:7}},React.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:133,columnNumber:9}},React.createElement(Title,{bg:bg,title:title,hide:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:11}}),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,__self:_this,__source:{fileName:_jsxFileName,lineNumber:141,columnNumber:17}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:11}}))));};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};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,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"}});

package/lib/components/ParentView.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ParentView=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNativeKeyboardAwareScrollView=require("react-native-keyboard-aware-scroll-view");var _=require("./");var _excluded=["barStyle","children","backgroundColor","bg"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ParentView.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 ParentView=function ParentView(_ref){var _ref$barStyle=_ref.barStyle,barStyle=_ref$barStyle===void 0?"light-content":_ref$barStyle,children=_ref.children,backgroundColor=_ref.backgroundColor,bg=_ref.bg,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var newBackgroundColor=backgroundColor||bg||theme.colors.background.parentView;var statusBarColors={default:theme.colors.background.white,"dark-content":theme.colors.background.white,"light-content":theme.colors.background.base};var statusBarColor=statusBarColors[barStyle]||statusBarColors["default"];return _react.default.createElement(_reactNativeKeyboardAwareScrollView.KeyboardAwareScrollView,{enableOnAndroid:true,contentContainerStyle:styles.scrollView,showsVerticalScrollIndicator:false,style:{backgroundColor:newBackgroundColor},__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:5}},_react.default.createElement(_.Container,{backgroundColor:statusBarColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:7}},_react.default.createElement(_reactNative.SafeAreaView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:9}},_react.default.createElement(_reactNative.StatusBar,{barStyle:barStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:11}}))),_react.default.createElement(_.Container,(0,_extends2.default)({flex:1,backgroundColor:newBackgroundColor},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:7}}),children));};exports.ParentView=ParentView;ParentView.propTypes={barStyle:_propTypes.default.string,children:_propTypes.default.node,backgroundColor:_propTypes.default.string,bg:_propTypes.default.string};var styles=_reactNative.StyleSheet.create({scrollView:{flexGrow:1}});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ParentView=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _=require("./");var _excluded=["barStyle","children","backgroundColor","bg"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ParentView.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 ParentView=function ParentView(_ref){var _ref$barStyle=_ref.barStyle,barStyle=_ref$barStyle===void 0?"light-content":_ref$barStyle,children=_ref.children,backgroundColor=_ref.backgroundColor,bg=_ref.bg,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var newBackgroundColor=backgroundColor||bg||theme.colors.background.parentView;var statusBarColors={default:theme.colors.background.white,"dark-content":theme.colors.background.white,"light-content":theme.colors.background.base};var statusBarColor=statusBarColors[barStyle]||statusBarColors["default"];return _react.default.createElement(_.Container,{flex:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}},_react.default.createElement(_.Container,{backgroundColor:statusBarColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:7}},_react.default.createElement(_reactNative.SafeAreaView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:9}},_react.default.createElement(_reactNative.StatusBar,{barStyle:barStyle,backgroundColor:statusBarColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:11}}))),_react.default.createElement(_.Container,(0,_extends2.default)({flex:1,backgroundColor:newBackgroundColor},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:54,columnNumber:7}}),children));};exports.ParentView=ParentView;ParentView.propTypes={barStyle:_propTypes.default.string,children:_propTypes.default.node,backgroundColor:_propTypes.default.string,bg:_propTypes.default.string};

package/lib/components/RichTextEditor.js

@@ -0,0 +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:97,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:98,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:117,columnNumber:9}}),_react.default.createElement(_reactNativePellRichEditor.RichToolbar,(0,_extends2.default)({editor:richTextRef,actions:computeToolbarActions()},toolBarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:118,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};

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,"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,"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");
+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,"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");

package/lib/hooks/index.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"useKeyboard",{enumerable:true,get:function get(){return _useKeyboard.useKeyboard;}});var _useKeyboard=require("./useKeyboard");

package/lib/hooks/useKeyboard.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useKeyboard=useKeyboard;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactNative=require("react-native");function useKeyboard(){var _useState=(0,_react.useState)(0),_useState2=(0,_slicedToArray2.default)(_useState,2),keyboardHeight=_useState2[0],setKeyboardHeight=_useState2[1];function onKeyboardDidShow(e){setKeyboardHeight(e.endCoordinates.height);}function onKeyboardDidHide(){setKeyboardHeight(0);}(0,_react.useEffect)(function(){var keyboardDidShowListener=_reactNative.Keyboard.addListener("keyboardDidShow",onKeyboardDidShow);var keyboardDidHideListener=_reactNative.Keyboard.addListener("keyboardDidHide",onKeyboardDidHide);return function(){keyboardDidHideListener.remove();keyboardDidShowListener.remove();};},[]);return keyboardHeight;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.61",
+  "version": "0.0.65",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -13,7 +13,6 @@
     "lint": "eslint .",
     "format": "prettier --write .",
     "flow": "flow",
-    "precommit": "lint-staged",
     "prestart": "sb-rn-get-stories",
     "storybook-watcher": "sb-rn-watcher",
     "storybook": "start-storybook -p 7007",
@@ -24,7 +23,8 @@
     "storybook-web": "yarn prestart && ./node_modules/@storybook/react/bin/index.js",
     "get-stories": "sb-rn-get-stories --config-path=./.storybook",
     "preweb": "yarn get-stories",
-    "web": "yarn prestart && webpack serve --mode=development --config webpack.config.js"
+    "web": "yarn prestart && webpack serve --mode=development --config webpack.config.js",
+    "prepare": "husky install"
   },
   "files": [
     "lib",
@@ -32,11 +32,6 @@
     "react-native.config.js",
     "assets"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "src/**/*.{js,es6,jsx,ts,tsx}": [
       "./node_modules/prettier/bin-prettier.js --write",
@@ -45,12 +40,13 @@
     ]
   },
   "peerDependencies": {
-    "react-native-svg": "*"
+    "react-native-svg": "*",
+    "react-native-webview": "11.14.4"
   },
   "dependencies": {
     "@styled-system/prop-types": "^5.1.5",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal": "^13.0.0",
+    "react-native-pell-rich-editor": "^1.8.6",
     "react-native-remix-icon": "^0.3.0",
     "react-native-switch-toggle": "^2.2.1",
     "react-native-toast-message": "^2.1.0",
@@ -98,7 +94,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-react-native": "^3.11.0",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^7.0.4",
+    "husky": "^7.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^12.0.3",
     "metro-react-native-babel-preset": "^0.66.2",
@@ -109,6 +105,7 @@
     "react-native-storybook-loader": "^2.0.4",
     "react-native-svg": "^12.1.1",
     "react-native-web": "^0.17.5",
+    "react-native-webview": "11.14.4",
     "react-test-renderer": "17.0.2",
     "serve": "^13.0.2",
     "url-loader": "^4.1.1",

package/src/components/BottomSheet.js

@@ -26,11 +26,12 @@ const Border = () => {
   return <Container bg="border.primary" height="1px" width="100%" />;
 };
 
-const Title = ({ title, bg, hide }) => {
+const Title = ({ title, bg, hide, titleContainerStyle, titleTextStyle }) => {
   let touchY;
   return (
     <>
       <Container
+        px={2}
         bg={bg}
         onTouchStart={e => (touchY = e.nativeEvent.pageY)}
         onTouchEnd={e => {
@@ -40,15 +41,18 @@ const Title = ({ title, bg, hide }) => {
         alignItems="center"
         py={20}
         borderRadius={20}
-        style={{}}
+        {...titleContainerStyle}
       >
-        <Typography
-          color="font.secondary"
-          fontFamily="inter700"
-          textStyle="subtext"
-        >
-          {title}
-        </Typography>
+        {title && (
+          <Typography
+            color="font.secondary"
+            fontFamily="inter700"
+            textStyle="subtext"
+            {...titleTextStyle}
+          >
+            {title}
+          </Typography>
+        )}
       </Container>
       <Border />
     </>
@@ -59,35 +63,46 @@ Title.propTypes = {
   title: PropTypes.string,
   hide: PropTypes.func,
   bg: PropTypes.string,
+  titleContainerStyle: PropTypes.object,
+  titleTextStyle: PropTypes.object,
 };
 
-const ContentRow = React.memo(({ label, onPress, bg, isSelected }) => {
-  return (
-    <>
-      <TouchableOpacity
-        alignItems="center"
-        bg={bg}
-        py={12}
-        borderRadius={20}
-        onPress={onPress}
-      >
-        <Typography
-          textStyle="body"
-          fontFamily={isSelected ? "inter700" : "inter400"}
-        >
-          {label}
-        </Typography>
-      </TouchableOpacity>
-      <Border />
-    </>
-  );
-});
+const ContentRow = React.memo(
+  ({ label, onPress, bg, isSelected, itemContainerStyle, itemTextStyle }) => {
+    return (
+      !!label && (
+        <>
+          <TouchableOpacity
+            alignItems="center"
+            bg={bg}
+            py={12}
+            borderRadius={20}
+            onPress={onPress}
+            px={2}
+            {...itemContainerStyle}
+          >
+            <Typography
+              textStyle="body"
+              fontFamily={isSelected ? "inter700" : "inter400"}
+              {...itemTextStyle}
+            >
+              {label}
+            </Typography>
+          </TouchableOpacity>
+          <Border />
+        </>
+      )
+    );
+  }
+);
 ContentRow.displayName = "ContentRow";
 ContentRow.propTypes = {
   label: PropTypes.string,
   onPress: PropTypes.func,
   bg: PropTypes.string,
   isSelected: PropTypes.bool,
+  itemContainerStyle: PropTypes.object,
+  itemTextStyle: PropTypes.object,
 };
 
 /**
@@ -120,6 +135,12 @@ export const BottomSheet = ({
   onItemPress,
   selectedItemIndex,
   bg,
+  children,
+  titleContainerStyle,
+  titleTextStyle,
+  itemContainerStyle,
+  itemTextStyle,
+  ...rest
 }) => {
   return (
     <Modal
@@ -129,31 +150,43 @@ export const BottomSheet = ({
       useNativeDriver
       hideModalContentWhileAnimating
     >
-      <Container bg={bg} flex={1} borderRadius={20}>
+      <Container bg={bg} flex={1} borderRadius={20} {...rest}>
         <Container>
-          <Title bg={bg} title={title} hide={hide}></Title>
-          <FlatList
-            contentContainerStyle={styles.flatListContentContainerStyle}
-            initialNumToRender={data.length}
-            data={data}
-            renderItem={({ item, index }) => {
-              return (
-                <ContentRow
-                  isSelected={index === selectedItemIndex}
-                  bg={bg}
-                  key={index}
-                  onPress={() => {
-                    hide();
-                    onItemPress(index);
-                  }}
-                  label={item}
-                />
-              );
-            }}
-            keyExtractor={(item, index) => {
-              return index;
-            }}
-          />
+          <Title
+            bg={bg}
+            title={title}
+            hide={hide}
+            titleContainerStyle={titleContainerStyle}
+            titleTextStyle={titleTextStyle}
+          ></Title>
+
+          {data && (
+            <FlatList
+              contentContainerStyle={styles.flatListContentContainerStyle}
+              initialNumToRender={data.length}
+              data={data}
+              renderItem={({ item, index }) => {
+                return (
+                  <ContentRow
+                    isSelected={index === selectedItemIndex}
+                    bg={bg}
+                    key={index}
+                    onPress={() => {
+                      hide();
+                      onItemPress(index);
+                    }}
+                    label={item}
+                    itemContainerStyle={itemContainerStyle}
+                    itemTextStyle={itemTextStyle}
+                  />
+                );
+              }}
+              keyExtractor={(item, index) => {
+                return index;
+              }}
+            />
+          )}
+          {children}
         </Container>
       </Container>
     </Modal>
@@ -193,6 +226,23 @@ BottomSheet.propTypes = {
    * Background color.
    */
   bg: PropTypes.string,
+  /**
+   * To customise title container styles.
+   */
+  titleContainerStyle: PropTypes.object,
+  /**
+   * To customise title text styles.
+   */
+  titleTextStyle: PropTypes.object,
+  /**
+   * To customise item container styles.
+   */
+  itemContainerStyle: PropTypes.object,
+  /**
+   * To customise item text styles.
+   */
+  itemTextStyle: PropTypes.object,
+  children: PropTypes.node,
 };
 
 const styles = StyleSheet.create({

package/src/components/Input.js

@@ -63,11 +63,14 @@ export const Input = React.forwardRef((props, ref) => {
   const {
     label = "",
     labelStyles,
+    containerStyles,
     message = "",
     error = false,
     onFocus,
     onBlur,
     inline = false,
+    LeftIcon,
+    RightIcon,
     brandRight,
     brandLeft,
     brandColor = "font.grey600",
@@ -75,6 +78,7 @@ export const Input = React.forwardRef((props, ref) => {
     disabled = false,
     secureTextEntry = false,
     textAlignVertical = "top",
+    enableFocusStyle = false,
     ...rest
   } = props;
 
@@ -95,38 +99,44 @@ export const Input = React.forwardRef((props, ref) => {
     setIsFocus(false);
   };
 
-  const focusStyles = isFocus && {
-    borderRadius: 4,
-    borderColor: error
-      ? "rgba(255, 105, 105, 0.3)"
-      : theme.colors.border.grey400,
-    borderWidth: inline ? "0px" : "3px",
-    borderStyle: "solid",
-  };
+  const focusStyles = enableFocusStyle &&
+    isFocus && {
+      borderRadius: 4,
+      borderColor: error
+        ? "rgba(255, 105, 105, 0.3)"
+        : theme.colors.border.grey400,
+      borderWidth: inline ? "0px" : "3px",
+      borderStyle: "solid",
+    };
 
   const disabledStyles = disabled && {
     opacity: 0.5,
     bg: theme.colors.background.secondary,
   };
 
-  const inlineInputStyles = isFocus && {
-    backgroundColor: error
-      ? theme.colors.border.danger
-      : theme.colors.border.base,
-  };
+  const inlineInputStyles = enableFocusStyle &&
+    isFocus && {
+      backgroundColor: error
+        ? theme.colors.border.danger
+        : theme.colors.border.base,
+    };
 
   return (
     <Container>
-      {!inline && (
+      {!inline && !!label && (
         <LabelText labelStyles={labelStyles} inline={inline} label={label} />
       )}
       <Container
+        border={!inline}
+        borderColor={borderColor}
+        borderRadius={2}
         {...focusStyles}
         {...disabledStyles}
         flexDirection={inline ? "row" : "column"}
         onBlur={handleBlur}
         onFocus={handleFocus}
         position="relative"
+        {...containerStyles}
       >
         {inline && (
           <Container alignSelf="flex-end" maxWidth={100}>
@@ -138,10 +148,14 @@ export const Input = React.forwardRef((props, ref) => {
           </Container>
         )}
         <Container flexDirection="row" width="100%">
+          {LeftIcon && (
+            <Container alignSelf="center" mx="4px">
+              <LeftIcon />
+            </Container>
+          )}
           {brandLeft && (
             <InputText
               text={brandLeft}
-              borderColor={borderColor}
               brandColor={brandColor}
               brandBackground={brandBackground}
             />
@@ -151,7 +165,6 @@ export const Input = React.forwardRef((props, ref) => {
             height={40}
             flex={1}
             textStyle="subtext"
-            border={!inline && borderColor}
             editable={!disabled}
             color={error ? theme.colors.font.danger : theme.colors.font.primary}
             secureTextEntry={secureTextEntry && !isPasswordVisible}
@@ -162,26 +175,27 @@ export const Input = React.forwardRef((props, ref) => {
           {brandRight && (
             <InputText
               text={brandRight}
-              borderColor={borderColor}
               brandColor={brandColor}
               brandBackground={brandBackground}
             />
           )}
+
+          {RightIcon && (
+            <Container alignSelf="center" mx="4px">
+              <RightIcon />
+            </Container>
+          )}
+
+          {secureTextEntry && (
+            <Container justifyContent="center" mx="4px">
+              <Icon
+                name={isPasswordVisible ? "eye-line" : "eye-off-line"}
+                color={theme.colors.background.grey500}
+                onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+              />
+            </Container>
+          )}
         </Container>
-        {secureTextEntry && (
-          <Container
-            position="absolute"
-            left="90%"
-            height="100%"
-            justifyContent="center"
-          >
-            <Icon
-              name={isPasswordVisible ? "eye-line" : "eye-off-line"}
-              color={theme.colors.background.grey500}
-              onPress={() => setIsPasswordVisible(!isPasswordVisible)}
-            />
-          </Container>
-        )}
       </Container>
       {inline && (
         <View
@@ -195,14 +209,8 @@ export const Input = React.forwardRef((props, ref) => {
   );
 });
 
-const InputText = ({ text, borderColor, brandColor, brandBackground }) => (
-  <Container
-    bg={brandBackground}
-    justifyContent="center"
-    px={2}
-    borderColor={borderColor}
-    borderWidth="1px"
-  >
+const InputText = ({ text, brandColor, brandBackground }) => (
+  <Container bg={brandBackground} justifyContent="center" px={2}>
     {text && <Typography color={brandColor}>{text}</Typography>}
   </Container>
 );
@@ -239,9 +247,13 @@ Input.propTypes = {
    */
   label: PropTypes.string,
   /**
-   * To change the styles of label
+   * To change the styles of label.
    */
   labelStyles: PropTypes.object,
+  /**
+   * To change the styles of input text container.
+   */
+  containerStyles: PropTypes.object,
   /**
    * To display error/info messages
    */
@@ -251,15 +263,15 @@ Input.propTypes = {
    */
   error: PropTypes.bool,
   /**
-   * Changes input layout to inline
+   * Changes input layout to inline.
    */
   inline: PropTypes.bool,
   /**
-   * Display brand to the right of input
+   * Display brand to the right of input.
    */
   brandRight: PropTypes.string,
   /**
-   * Display brand to the left of input
+   * Display brand to the left of input.
    */
   brandLeft: PropTypes.string,
   /**
@@ -267,17 +279,29 @@ Input.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * To change the color of brand text
+   * To change the color of brand text.
    */
   brandColor: PropTypes.string,
   /**
-   * To change the color of brand text
+   * To change the color of brand text.
    */
   brandBackground: PropTypes.string,
   /**
-   * To hide and show password and enable secure text entry
+   * To hide and show password and enable secure text entry.
    */
   secureTextEntry: PropTypes.bool,
+  /**
+   * If true, shows border on focus.
+   */
+  enableFocusStyle: PropTypes.bool,
+  /**
+   * Display Icon to the left of input.
+   */
+  LeftIcon: PropTypes.func,
+  /**
+   * Display Icon to the Right of input.
+   */
+  RightIcon: PropTypes.func,
   children: PropTypes.node,
 };
 
@@ -301,9 +325,7 @@ ErrorMessage.propTypes = {
 
 TextInput.defaultProps = {
   height: 40,
-  border: 1,
   px: 2,
   fontFamily: "inter400",
   fontSize: "14px",
-  borderRadius: 2,
 };

package/src/components/ParentView.js

@@ -1,12 +1,11 @@
 import React, { useContext } from "react";
-import { SafeAreaView, StatusBar, StyleSheet } from "react-native";
+import { SafeAreaView, StatusBar } from "react-native";
 import PropTypes from "prop-types";
 import { ThemeContext } from "styled-components/native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { Container } from "@components";
 
 /**
- *ParentView wraps the childrens with SafeAreaview and KeyboardAwareScrollView.
+ *ParentView wraps the childrens with SafeAreaview.
  *
  *  ## Usage
  * ```js
@@ -46,21 +45,16 @@ export const ParentView = ({
     statusBarColors[barStyle] || statusBarColors["default"];
 
   return (
-    <KeyboardAwareScrollView
-      enableOnAndroid={true}
-      contentContainerStyle={styles.scrollView}
-      showsVerticalScrollIndicator={false}
-      style={{ backgroundColor: newBackgroundColor }}
-    >
+    <Container flex={1}>
       <Container backgroundColor={statusBarColor}>
         <SafeAreaView>
-          <StatusBar barStyle={barStyle} />
+          <StatusBar barStyle={barStyle} backgroundColor={statusBarColor} />
         </SafeAreaView>
       </Container>
       <Container flex={1} backgroundColor={newBackgroundColor} {...rest}>
         {children}
       </Container>
-    </KeyboardAwareScrollView>
+    </Container>
   );
 };
 
@@ -79,9 +73,3 @@ ParentView.propTypes = {
    */
   bg: PropTypes.string,
 };
-
-const styles = StyleSheet.create({
-  scrollView: {
-    flexGrow: 1,
-  },
-});

package/src/components/RichTextEditor.js

@@ -0,0 +1,156 @@
+import React, { useRef, useState } from "react";
+import {
+  RichEditor,
+  RichToolbar,
+  actions,
+} from "react-native-pell-rich-editor";
+import PropTypes from "prop-types";
+import styled from "styled-components/native";
+import { space, flexbox, border, layout } from "styled-system";
+
+import { useKeyboard } from "@hooks";
+import { Container } from "@components";
+
+export const ScrollView = styled.ScrollView.attrs(() => ({
+  keyboardShouldPersistTaps: "handled",
+  showsVerticalScrollIndicator: true,
+  showsHorizontalScrollIndicator: false,
+  contentContainerStyle: { flexGrow: 1 },
+}))`
+  ${space}
+  ${flexbox}
+  ${border}
+  ${layout}
+`;
+
+/**
+ * RichTextEditor component is wrapper created around react-native-pell-rich-editor. This has dependency on react-native-webview, so make sure to add that as well.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from "react";
+ * import { Container, RichTextEditor } from "@components";
+ * import { theme } from "@theme";
+ *
+ * export default function Main() {
+ * const [message, setMessage] = React.useState('');
+ *
+ * const editorProps = {
+ *   initialContentHTML: "Rich Text Component...",
+ *   initialFocus: true,
+ *   editorStyle: {
+ *     color: theme.colors.font.grey,
+ *   },
+ * };
+ *
+ * return (
+ *   <Container flex={1}>
+ *     <RichTextEditor
+ *       onChange={setMessage}
+ *       toolbarActions={[
+ *         "keyboard",
+ *         "setBold",
+ *         "setItalic",
+ *         "insertBulletsList",
+ *         "insertOrderedList",
+ *         "setStrikethrough",
+ *         "setUnderline",
+ *         "undo",
+ *         "redo",
+ *       ]}
+ *       toolbarWrapperStyle={{bottom: 0}}
+ *       editorProps={editorProps}
+ *       toolBarProps={{}}
+ *     />
+ *   </Container>
+ *  );
+ * };
+ *
+ * ```
+ */
+
+export const RichTextEditor = ({
+  onChange,
+  placeholderText,
+  children,
+  toolbarActions,
+  editorProps,
+  toolBarProps,
+  ...rest
+}) => {
+  const richTextRef = useRef();
+  const keyboardHeight = useKeyboard();
+  const [toolbarVisible, setToolbar] = useState(true);
+  const showToolbar = keyboardHeight > 0 && toolbarVisible;
+
+  const computeToolbarActions = () => {
+    const actionItems = [];
+    toolbarActions?.map(actionItem => {
+      actionItems.push(actions[actionItem]);
+    });
+
+    return actionItems;
+  };
+
+  return (
+    <>
+      <ScrollView {...rest?.editorWrapperStyle}>
+        <RichEditor
+          placeholder={placeholderText || "Type here..."}
+          ref={richTextRef}
+          onChange={onChange}
+          useContainer={false}
+          onFocus={() => {
+            setToolbar(true);
+            editorProps?.onFocusFn();
+          }}
+          onBlur={() => {
+            setToolbar(false);
+            editorProps?.onBlurFn();
+          }}
+          {...editorProps}
+        />
+
+        {children}
+      </ScrollView>
+      {showToolbar && (
+        <Container bottom={keyboardHeight} {...rest?.toolbarWrapperStyle}>
+          <RichToolbar
+            editor={richTextRef}
+            actions={computeToolbarActions()}
+            {...toolBarProps}
+          />
+        </Container>
+      )}
+    </>
+  );
+};
+
+RichTextEditor.defaultProps = {
+  editorProps: {},
+  toolBarProps: {},
+};
+
+RichTextEditor.propTypes = {
+  /**
+   * Callback that is called when the text input's text changes.
+   */
+  onChange: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  /**
+   * Placeholder for the input.
+   */
+  placeholderText: PropTypes.string,
+  /**
+   * An array of actions to be provided by this toolbar. Check react-native-pell-rich-editor for list of supported actions.
+   */
+  toolbarActions: PropTypes.array.isRequired,
+  /**
+   * Object which can be used to pass other supported props by the Editor.
+   */
+  editorProps: PropTypes.object,
+  /**
+   * Object which can be used to pass other supported props by the RichToolbar.
+   */
+  toolBarProps: PropTypes.object,
+};

package/src/components/index.js

@@ -11,3 +11,4 @@ export { Alert } from "./Alert";
 export { BottomSheet } from "./BottomSheet";
 export { Chip } from "./Chip";
 export { ParentView } from "./ParentView";
+export { RichTextEditor } from "./RichTextEditor";

package/src/hooks/index.js

@@ -0,0 +1 @@
+export { useKeyboard } from "./useKeyboard";

package/src/hooks/useKeyboard.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { Keyboard } from "react-native";
+
+export function useKeyboard() {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  function onKeyboardDidShow(e) {
+    setKeyboardHeight(e.endCoordinates.height);
+  }
+
+  function onKeyboardDidHide() {
+    setKeyboardHeight(0);
+  }
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      "keyboardDidShow",
+      onKeyboardDidShow
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      "keyboardDidHide",
+      onKeyboardDidHide
+    );
+
+    return () => {
+      keyboardDidHideListener.remove();
+      keyboardDidShowListener.remove();
+    };
+  }, []);
+
+  return keyboardHeight;
+}