created README

Author: halilb

README.md

@@ -0,0 +1,267 @@
+# React Native Textinput Effects
+
+I've come across with [those beautiful](http://tympanus.net/Development/TextInputEffects) text inputs created and [blogged](http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects) by **Coderops** and wanted to port them to react-native. Some of those text fields are now ready to use in iOS and android thanks to react-native.
+
+There is also a native iOS library called [TextFieldEffects](https://github.com/raulriera/TextFieldEffects) which has built some of them in Swift.
+
+![](screenshots/full.gif)
+
+## Installation 
+`$ npm install react-native-textinput-effects --save`
+
+You also need to install [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) if you'd like to use a TextInputEffect component with an icon. Please check out [Installation section](https://github.com/oblador/react-native-vector-icons#installation) on that project.
+
+## How to use
+
+### Common Props
+
+| Prop | Type | Description |
+|---|---|---|
+|**`label`**|String|Displayed as placeholder string of the input.|
+|**`style`**|View Style Object|Applied to the root container of the input.|
+|**`labelStyle`**|View Style Object|Applied to the container of the label view.|
+|**`inputStyle`**|Text Style Object|Applied to the TextInput component.|
+
+You can also use [TextInput Props](https://facebook.github.io/react-native/docs/textinput.html#props). They'll be passed into TextInput component.
+
+### Props for TextInputEffects with an Icon
+
+This component needs `Icon` component from `react-native-vector-icons` to operate with icons. You should import it before creating a TextInputEffects component.
+
+`import Icon from 'react-native-vector-icons/FontAwesome';`
+
+| Prop | Type | Description |
+|---|---|---|
+|**`iconClass`**|Object|The Icon component class you've imported from react-native-vector-icons.|
+|**`iconName`**|String|Name of the icon that is passed to Icon component.|
+|**`iconColor`**|String|Applied to the container of the label view.|
+|**`inputStyle`**|Text Style Object|Applied to the TextInput component.|
+
+
+## Example
+
+See [TextInputEffectsExample.js](Example/TextInputEffectsExample.js) file.
+
+Follow those steps to run the example:
+
+1. Clone the repo `git clone https://github.com/halilb/react-native-textinput-effects && cd react-native-textinput-effects/Example`
+2. Install dependencies `npm install``
+3. Follow [official instructions](https://facebook.github.io/react-native/docs/getting-started.html) to run the example project in a simulator or device.
+
+## Input Types
+
+### Sae
+
+![](screenshots/sae.gif)
+
+
+```js
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { Sae } from 'react-native-textinput-effects';
+
+const saeInput = (
+  <Sae
+    label={'Email Address'}
+    iconClass={FontAwesomeIcon}
+    iconName={'pencil'}
+    iconColor={'white'}
+    // TextInput props
+    autoCapitalize={'none'}
+    autoCorrect={false}
+  />
+);
+```
+
+### Fumi
+
+![](screenshots/fumi.gif)
+
+
+```js
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { Fumi } from 'react-native-textinput-effects';
+
+const fumiInput = (
+  <Fumi
+    label={'Course Name'}
+    iconClass={FontAwesomeIcon}
+    iconName={'university'}
+    iconColor={'#f95a25'}
+  />
+);
+```
+### Kohana
+
+![](screenshots/kohana.gif)
+
+
+```js
+import MaterialsIcon from 'react-native-vector-icons/MaterialIcons';
+import { Kohana } from 'react-native-textinput-effects';
+
+const kohanaInput = (
+  <Kohana
+    style={{ backgroundColor: '#f9f5ed' }}
+    label={'Line'}
+    iconClass={MaterialsIcon}
+    iconName={'directions-bus'}
+    iconColor={'#f4d29a'}
+    labelStyle={{ color: '#91627b' }}
+    inputStyle={{ color: '#91627b' }}
+  />
+);
+```
+
+### Makiko
+
+![](screenshots/makiko.gif)
+
+
+```js
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { Makiko } from 'react-native-textinput-effects';
+
+const makikoInput = (
+  <Makiko
+    label={'Comment'}
+    iconClass={FontAwesomeIcon}
+    iconName={'comment'}
+    iconColor={'white'}
+    inputStyle={{ color: '#db786d' }}
+  />
+);
+```
+Note: Icon component expands and covers the input. So, the icon should not have any blank spaces for the animation experience. This is the limitation for Makiko.
+
+### Isao
+
+![](screenshots/isao.gif)
+
+
+```js
+import { Isao } from 'react-native-textinput-effects';
+
+const isaoInput = (
+  <Isao
+    label={'First Name'}
+    // this is applied as active border and label color
+    activeColor={'#da7071'}
+    // this is applied as passive border and label color
+    passiveColor={'#dadada'}
+  />
+);
+```
+
+### Hoshi
+
+![](screenshots/hoshi.gif)
+
+
+```js
+import { Hoshi } from 'react-native-textinput-effects';
+
+const hoshiInput = (
+  <Hoshi
+    label={'Town'}
+    // this is used as active border color
+    borderColor={'#b76c94'}
+    // this is used to set backgroundColor of label mask.
+    // please pass the backgroundColor of your TextInput container.
+    backgroundColor={'#F9F7F6'}
+  />
+);
+```
+
+### Jiro
+
+![](screenshots/jiro.gif)
+
+
+```js
+import { Jiro } from 'react-native-textinput-effects';
+
+const jiroInput = (
+  <Jiro
+    label={'Dog\'s name'}
+    // this is used as active and passive border color
+    borderColor={'#9b537a'}
+    inputStyle={{ color: 'white' }}
+  />
+);
+```
+
+### Kaede
+
+![](screenshots/kaede.gif)
+
+
+```js
+import { Kaede } from 'react-native-textinput-effects';
+
+const kaedeInput = (
+  <Kaede
+    label={'Website'}
+  />
+);
+```
+
+### Akira
+
+![](screenshots/akira.gif)
+
+
+```js
+import { Akira } from 'react-native-textinput-effects';
+
+const akiraInput = (
+  <Akira
+    label={'First Name'}
+    // this is used as active and passive border color
+    borderColor={'#a5d1cc'}
+    labelStyle={{ color: '#ac83c4' }}
+  />
+);
+```
+
+### Madoka
+
+![](screenshots/madoka.gif)
+
+
+```js
+import { Madoka } from 'react-native-textinput-effects';
+
+const madokaInput = (
+  <Madoka
+    label={'Frequency'}
+    // this is used as active and passive border color
+    borderColor={'#aee2c9'}
+    labelStyle={{ color: '#008445' }}
+    inputStyle={{ color: '#f4a197' }}
+  />
+);
+```
+
+### Hideo
+
+![](screenshots/hideo.gif)
+
+
+```js
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { Hideo } from 'react-native-textinput-effects';
+
+const hideoInput = (
+  <Hideo
+    iconClass={FontAwesomeIcon}
+    iconName={'envelope'}
+    iconColor={'white'}
+    // this is used as backgroundColor of icon container view.
+    iconBackgroundColor={'#f2a59d'}
+    inputStyle={{ color: '#464949' }}
+  />
+);
+```
+
+## Licence
+[MIT](http://opensource.org/licenses/mit-license.html)