react-native-input-outline - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "react-native-input-outline",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A react-native component for a themed text input box.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # react-native-input-outline
+
 A react-native component that uses a customized text input.
 
+![](react-native-input-outline.gif)
+
 ## Installation
 
     $ npm i -- save react-native-input-outline
-   or
-   
 
+or
+
     $ yarn add react-native-input-outline
+
 ## Usage
-This component inherits props from TextInput in the standard React-Native library, so you can essentially use it in the same way that you would use that TextInput. However, you can configure the colors, and the placeholder, and the overall styling if you wish, however the whole point of this component is so you don't have to do any styling yourself. 
 
+This component inherits props from TextInput in the standard React-Native library, so you can essentially use it in the same way that you would use that TextInput. However, you can configure the colors, and the placeholder, and the overall styling if you wish, however the whole point of this component is so you don't have to do any styling yourself.
+
     import InputOutline from 'react-native-input-outline';
 
-    <InputOutline 
-      placeholder="Email" 
-      focusedColor='blue' 
+    <InputOutline
+      placeholder="Email"
+      focusedColor='blue'
       defaultColor='grey'
     />
 
-  ## Props
-  
-| Prop  | Description  | Default  | 
-|--:|:--|:--|
-|Inherited Props|Any prop from React-Native TextInput|[TextInput Props](https://facebook.github.io/react-native/docs/textinput#props)|
-| placeholder  | The label/placeholder that will display giving information about your input field.  | *String*("Placeholder") |
-| focusedColor  |  The color that shows when the input is focused. |*String*("blue")  |
-|defaultColor|The color that shows when the input is empty and not focused.|*String*("#c5b4b8")|
-    
+## Props
+
+|            Prop | Description                                                                        | Default                                                                         |
+| --------------: | :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ |
+| Inherited Props | Any prop from React-Native TextInput                                               | [TextInput Props](https://facebook.github.io/react-native/docs/textinput#props) |
+|     placeholder | The label/placeholder that will display giving information about your input field. | _String_("Placeholder")                                                         |
+|    focusedColor | The color that shows when the input is focused.                                    | _String_("blue")                                                                |
+|    defaultColor | The color that shows when the input is empty and not focused.                      | _String_("#c5b4b8")                                                             |

src/InputOutline.js

@@ -30,11 +30,7 @@ import * as React from "react";
       {
-        transform: [
-          { translateY: -(INPUT_HEIGHT / 2) },
-          { translateX: -PADDING },
-          { scale: 0.8 }
-        ]
+        transform: [{ translateY: -(INPUT_HEIGHT / 2) }, { scale: 0.8 }]
       },
       DURATION
     );
-    this.spacerRef.transitionTo({ transform: [{ scaleX: 0.85 }] }, DURATION);
+    this.spacerRef.transitionTo({ transform: [{ scaleX: 1 }] }, DURATION);
   }
@@ -83,2 +79,3 @@
             width: labelWidth,
+            left: PADDING,
             backgroundColor: focused ? BG_COLOR : currColor,
@@ -85,0 +82,0 @@ height: BORDER_WIDTH,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32604

increased by422.84%

Number of package files

6

increased by20%

Number of lines in readme file

35

increased by12.9%

Worsened metrics

Lines of code

132

decreased by-2.22%

No dependency changes