@bigbinary/neetoui-rn 0.0.232 → 0.0.233

package/lib/components/Input.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireWildcard(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _theme=require("../theme");var _utils=require("../utils/utils");var _excluded=["label","value","onChangeText","onBlur","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled","noBorder","showInputAccessoryView","textAlignVertical","containerProps"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Typography=_native.default.Text(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var AnimatedLabel=_reactNative.Animated.createAnimatedComponent(Typography);var Input=function Input(_ref){var _rest$inputProps,_rest$inputProps2;var label=_ref.label,_ref$value=_ref.value,value=_ref$value===void 0?"":_ref$value,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,_ref$onBlur=_ref.onBlur,_onBlur=_ref$onBlur===void 0?function(){}:_ref$onBlur,_ref$errorMessage=_ref.errorMessage,errorMessage=_ref$errorMessage===void 0?null:_ref$errorMessage,PrefixIcon=_ref.PrefixIcon,SuffixIcon=_ref.SuffixIcon,_ref$autoFocus=_ref.autoFocus,autoFocus=_ref$autoFocus===void 0?false:_ref$autoFocus,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$noBorder=_ref.noBorder,noBorder=_ref$noBorder===void 0?false:_ref$noBorder,_ref$showInputAccesso=_ref.showInputAccessoryView,showInputAccessoryView=_ref$showInputAccesso===void 0?true:_ref$showInputAccesso,_ref$textAlignVertica=_ref.textAlignVertical,textAlignVertical=_ref$textAlignVertica===void 0?"top":_ref$textAlignVertica,containerProps=_ref.containerProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var colors=(0,_react.useContext)(_native.ThemeContext).colors;var inputRef=(0,_react.useRef)();var containerRef=(0,_react.useRef)();var animatedController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){if(autoFocus){handleLabelAnimation(true);}else{handleLabelAnimation(false);}},[autoFocus]);(0,_react.useEffect)(function(){if(value){if(Math.floor(animatedController._value)===0){handleLabelAnimation(true);}}else{handleLabelAnimation(false);}},[value]);var handleLabelAnimation=function handleLabelAnimation(isFocused){_reactNative.Animated.timing(animatedController,{toValue:!!isFocused||!!value?1:0,duration:300,useNativeDriver:false}).start();};var handleStyles=(0,_react.useCallback)(function(isFocused){containerRef.current&&containerRef.current.setNativeProps({borderColor:errorMessage?colors.border.danger:isFocused?colors.border.purple500:colors.border.grey400,borderWidth:errorMessage||isFocused?(0,_reactNativeSizeMatters.moderateScale)(1.5):(0,_reactNativeSizeMatters.moderateScale)(1)});},[]);var labelStyles={paddingLeft:(0,_utils.isAndroid)()?(0,_reactNativeSizeMatters.moderateScale)(4):0,fontSize:animatedController.interpolate({inputRange:[0,1],outputRange:[(0,_reactNativeSizeMatters.moderateScale)(17),(0,_reactNativeSizeMatters.moderateScale)(13)]}),top:animatedController.interpolate({inputRange:[0,1],outputRange:[(0,_reactNativeSizeMatters.moderateScale)(16),(0,_reactNativeSizeMatters.moderateScale)(6)]})};var handleFocusBlur=function handleFocusBlur(isFocused){if(label){if(!value)handleLabelAnimation(isFocused);if(!noBorder)handleStyles(isFocused);}};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){var _inputRef$current;if(!(inputRef!=null&&(_inputRef$current=inputRef.current)!=null&&_inputRef$current.isFocused())){var _inputRef$current2;inputRef==null?void 0:(_inputRef$current2=inputRef.current)==null?void 0:_inputRef$current2.focus();}},__self:_this,__source:{fileName:_jsxFileName,lineNumber:184,columnNumber:7}},_react.default.createElement(View,(0,_extends2.default)({alignItems:"center",borderColor:errorMessage?"border.danger":"border.grey400",borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),borderWidth:noBorder?0:(0,_reactNativeSizeMatters.moderateScale)(1),flexDirection:"row",justifyContent:"space-between",overflow:"hidden",ref:containerRef},containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:9}}),!!PrefixIcon&&_react.default.createElement(View,{pl:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:203,columnNumber:13}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:204,columnNumber:15}})),_react.default.createElement(View,{flex:1,left:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:11}},!!label&&_react.default.createElement(AnimatedLabel,{color:disabled?"font.grey400":"font.grey600",position:"absolute",style:labelStyles,zIndex:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:209,columnNumber:15}},label),_react.default.createElement(TextInput,(0,_extends2.default)({autoCapitalize:"sentences",autoFocus:autoFocus,color:disabled?"font.grey500":"font.primary",editable:!disabled,fontSize:(0,_reactNativeSizeMatters.moderateScale)(17),inputAccessoryViewID:label,paddingVertical:0,pb:(0,_reactNativeSizeMatters.moderateScale)(8),pt:label?(0,_reactNativeSizeMatters.moderateScale)(22):(0,_reactNativeSizeMatters.moderateScale)(12),ref:inputRef,returnKeyType:(_rest$inputProps=rest.inputProps)!=null&&_rest$inputProps.multiline?"default":"done",textAlignVertical:textAlignVertical,top:0,value:value,zIndex:2,onChangeText:onChangeText,onBlur:function onBlur(){_onBlur();handleFocusBlur(false);},onFocus:function onFocus(){handleFocusBlur(true);}},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:13}})),((_rest$inputProps2=rest.inputProps)==null?void 0:_rest$inputProps2.multiline)&&showInputAccessoryView&&_reactNative.Platform.OS==="ios"&&_react.default.createElement(_reactNative.InputAccessoryView,{nativeID:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:247,columnNumber:17}},_react.default.createElement(_.Container,{alignItems:"center",bg:"background.white",flexDirection:"row",justifyContent:"flex-end",p:(0,_reactNativeSizeMatters.moderateScale)(2),pr:(0,_reactNativeSizeMatters.moderateScale)(20),width:width,__self:_this,__source:{fileName:_jsxFileName,lineNumber:248,columnNumber:19}},_react.default.createElement(_.Button,{height:(0,_reactNativeSizeMatters.moderateScale)(30),label:"Done",labelStyle:styles.doneButtonStyle,left:(0,_reactNativeSizeMatters.moderateScale)(10),variant:"text",onPress:function onPress(){_reactNative.Keyboard.dismiss();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:257,columnNumber:21}})))),!!SuffixIcon&&_react.default.createElement(View,{px:(0,_reactNativeSizeMatters.moderateScale)(2),__self:_this,__source:{fileName:_jsxFileName,lineNumber:272,columnNumber:13}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:273,columnNumber:15}})))),!!errorMessage&&_react.default.createElement(Typography,{color:"font.danger",pt:(0,_reactNativeSizeMatters.moderateScale)(2),__self:_this,__source:{fileName:_jsxFileName,lineNumber:279,columnNumber:9}},errorMessage));};exports.Input=Input;Input.propTypes={label:_propTypes.default.string,value:_propTypes.default.string.isRequired,onChangeText:_propTypes.default.func.isRequired,onBlur:_propTypes.default.func,errorMessage:_propTypes.default.string,disabled:_propTypes.default.bool,autoFocus:_propTypes.default.bool,PrefixIcon:_propTypes.default.elementType,SuffixIcon:_propTypes.default.elementType,noBorder:_propTypes.default.bool,containerProps:_propTypes.default.object,textAlignVertical:_propTypes.default.oneOf(["auto","top","bottom","center"]),showInputAccessoryView:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({doneButtonStyle:{fontFamily:"sf700",color:_theme.theme.colors.font.base}});exports.styles=styles;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireWildcard(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _theme=require("../theme");var _utils=require("../utils/utils");var _excluded=["label","value","onChangeText","onBlur","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled","noBorder","showInputAccessoryView","textAlignVertical","containerProps"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Typography=_native.default.Text(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var AnimatedLabel=_reactNative.Animated.createAnimatedComponent(Typography);var Input=function Input(_ref){var _rest$inputProps,_rest$inputProps2,_rest$inputProps3;var label=_ref.label,_ref$value=_ref.value,value=_ref$value===void 0?"":_ref$value,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,_ref$onBlur=_ref.onBlur,_onBlur=_ref$onBlur===void 0?function(){}:_ref$onBlur,_ref$errorMessage=_ref.errorMessage,errorMessage=_ref$errorMessage===void 0?null:_ref$errorMessage,PrefixIcon=_ref.PrefixIcon,SuffixIcon=_ref.SuffixIcon,_ref$autoFocus=_ref.autoFocus,autoFocus=_ref$autoFocus===void 0?false:_ref$autoFocus,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$noBorder=_ref.noBorder,noBorder=_ref$noBorder===void 0?false:_ref$noBorder,_ref$showInputAccesso=_ref.showInputAccessoryView,showInputAccessoryView=_ref$showInputAccesso===void 0?true:_ref$showInputAccesso,_ref$textAlignVertica=_ref.textAlignVertical,textAlignVertical=_ref$textAlignVertica===void 0?"top":_ref$textAlignVertica,containerProps=_ref.containerProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var colors=(0,_react.useContext)(_native.ThemeContext).colors;var inputRef=(0,_react.useRef)();var containerRef=(0,_react.useRef)();var animatedController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){if(autoFocus){handleLabelAnimation(true);}else{handleLabelAnimation(false);}},[autoFocus]);(0,_react.useEffect)(function(){if(value){if(Math.floor(animatedController._value)===0){handleLabelAnimation(true);}}else{handleLabelAnimation(false);}},[value]);var handleLabelAnimation=function handleLabelAnimation(isFocused){_reactNative.Animated.timing(animatedController,{toValue:!!isFocused||!!value?1:0,duration:300,useNativeDriver:false}).start();};var moderateScale=function moderateScale(scaleFactor){return Math.floor((0,_reactNativeSizeMatters.moderateScale)(scaleFactor));};var handleStyles=(0,_react.useCallback)(function(isFocused){containerRef.current&&containerRef.current.setNativeProps({borderColor:errorMessage?colors.border.danger:isFocused?colors.border.purple500:colors.border.grey400,borderWidth:errorMessage||isFocused?moderateScale(1.5):moderateScale(1)});},[]);var labelStyles={zIndex:100,paddingLeft:(0,_utils.isAndroid)()?moderateScale(4):0,fontSize:animatedController.interpolate({inputRange:[0,1],outputRange:[moderateScale(17),moderateScale(13)]}),top:animatedController.interpolate({inputRange:[0,1],outputRange:[moderateScale(15),moderateScale(6)]})};var handleFocusBlur=function handleFocusBlur(isFocused){if(label){if(!value)handleLabelAnimation(isFocused);if(!noBorder)handleStyles(isFocused);}};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){var _inputRef$current;if(!(inputRef!=null&&(_inputRef$current=inputRef.current)!=null&&_inputRef$current.isFocused())){var _inputRef$current2;inputRef==null?void 0:(_inputRef$current2=inputRef.current)==null?void 0:_inputRef$current2.focus();}},__self:_this,__source:{fileName:_jsxFileName,lineNumber:187,columnNumber:7}},_react.default.createElement(View,(0,_extends2.default)({alignItems:"center",borderColor:errorMessage?"border.danger":"border.grey400",borderRadius:moderateScale(8),borderWidth:noBorder?0:moderateScale(1),flexDirection:"row",justifyContent:"space-between",overflow:"hidden",ref:containerRef},containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:194,columnNumber:9}}),!!PrefixIcon&&_react.default.createElement(View,{pl:moderateScale(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:206,columnNumber:13}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:15}})),_react.default.createElement(View,{flex:1,left:moderateScale(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:11}},!!label&&_react.default.createElement(AnimatedLabel,{color:disabled?"font.grey400":"font.grey600",position:"absolute",style:labelStyles,zIndex:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,columnNumber:15}},label),_react.default.createElement(TextInput,(0,_extends2.default)({autoCapitalize:"sentences",autoFocus:autoFocus,color:disabled?"font.grey500":"font.primary",editable:!disabled,fontSize:moderateScale(17),inputAccessoryViewID:label,paddingRight:moderateScale(20),paddingVertical:0,pb:moderateScale(4),pt:!label?moderateScale(5):0,ref:inputRef,returnKeyType:(_rest$inputProps=rest.inputProps)!=null&&_rest$inputProps.multiline?"default":"done",textAlignVertical:textAlignVertical,top:0,value:value,zIndex:2,style:{marginTop:label?moderateScale(22):0,marginBottom:(_rest$inputProps2=rest.inputProps)!=null&&_rest$inputProps2.multiline?moderateScale(10):0},onChangeText:onChangeText,onBlur:function onBlur(){_onBlur();handleFocusBlur(false);},onFocus:function onFocus(){handleFocusBlur(true);}},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:13}})),((_rest$inputProps3=rest.inputProps)==null?void 0:_rest$inputProps3.multiline)&&showInputAccessoryView&&_reactNative.Platform.OS==="ios"&&_react.default.createElement(_reactNative.InputAccessoryView,{nativeID:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:257,columnNumber:17}},_react.default.createElement(_.Container,{alignItems:"center",bg:"background.white",flexDirection:"row",justifyContent:"flex-end",p:moderateScale(2),pr:moderateScale(20),width:width,__self:_this,__source:{fileName:_jsxFileName,lineNumber:258,columnNumber:19}},_react.default.createElement(_.Button,{height:moderateScale(30),label:"Done",labelStyle:styles.doneButtonStyle,left:moderateScale(10),variant:"text",onPress:function onPress(){_reactNative.Keyboard.dismiss();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:267,columnNumber:21}})))),!!SuffixIcon&&_react.default.createElement(View,{pr:moderateScale(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:282,columnNumber:13}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:283,columnNumber:15}})))),!!errorMessage&&_react.default.createElement(Typography,{color:"font.danger",pt:moderateScale(2),__self:_this,__source:{fileName:_jsxFileName,lineNumber:289,columnNumber:9}},errorMessage));};exports.Input=Input;Input.propTypes={label:_propTypes.default.string,value:_propTypes.default.string.isRequired,onChangeText:_propTypes.default.func.isRequired,onBlur:_propTypes.default.func,errorMessage:_propTypes.default.string,disabled:_propTypes.default.bool,autoFocus:_propTypes.default.bool,PrefixIcon:_propTypes.default.elementType,SuffixIcon:_propTypes.default.elementType,noBorder:_propTypes.default.bool,containerProps:_propTypes.default.object,textAlignVertical:_propTypes.default.oneOf(["auto","top","bottom","center"]),showInputAccessoryView:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({doneButtonStyle:{fontFamily:"sf700",color:_theme.theme.colors.font.base}});exports.styles=styles;

package/package.json

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

package/src/components/Input.jsx

@@ -10,7 +10,7 @@ import {
 } from "react-native";
 
 import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
+import { moderateScale as scaleItem } from "react-native-size-matters";
 import styled, { ThemeContext } from "styled-components/native";
 import {
   flexbox,
@@ -146,6 +146,8 @@ export const Input = ({
     }).start();
   };
 
+  const moderateScale = scaleFactor => Math.floor(scaleItem(scaleFactor));
+
   const handleStyles = useCallback(isFocused => {
     containerRef.current &&
       containerRef.current.setNativeProps({
@@ -160,6 +162,7 @@ export const Input = ({
   }, []);
 
   const labelStyles = {
+    zIndex: 100,
     paddingLeft: isAndroid() ? moderateScale(4) : 0,
     fontSize: animatedController.interpolate({
       inputRange: [0, 1],
@@ -167,7 +170,7 @@ export const Input = ({
     }),
     top: animatedController.interpolate({
       inputRange: [0, 1],
-      outputRange: [moderateScale(16), moderateScale(6)],
+      outputRange: [moderateScale(15), moderateScale(6)],
     }),
   };
 
@@ -200,7 +203,7 @@ export const Input = ({
           {...containerProps}
         >
           {!!PrefixIcon && (
-            <View pl={moderateScale(8)}>
+            <View pl={moderateScale(10)}>
               <PrefixIcon />
             </View>
           )}
@@ -222,15 +225,22 @@ export const Input = ({
               editable={!disabled}
               fontSize={moderateScale(17)}
               inputAccessoryViewID={label}
+              paddingRight={moderateScale(20)}
               paddingVertical={0}
-              pb={moderateScale(8)}
-              pt={label ? moderateScale(22) : moderateScale(12)}
+              pb={moderateScale(4)}
+              pt={!label ? moderateScale(5) : 0}
               ref={inputRef}
               returnKeyType={rest.inputProps?.multiline ? "default" : "done"}
               textAlignVertical={textAlignVertical}
               top={0}
               value={value}
               zIndex={2}
+              style={{
+                marginTop: label ? moderateScale(22) : 0,
+                marginBottom: rest.inputProps?.multiline
+                  ? moderateScale(10)
+                  : 0,
+              }}
               onChangeText={onChangeText}
               onBlur={() => {
                 onBlur();
@@ -269,7 +279,7 @@ export const Input = ({
               )}
           </View>
           {!!SuffixIcon && (
-            <View px={moderateScale(2)}>
+            <View pr={moderateScale(10)}>
               <SuffixIcon />
             </View>
           )}