Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/halilb/react-native-textinput-effects

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.
https://github.com/halilb/react-native-textinput-effects

Last synced: 3 days ago
JSON representation

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

Awesome Lists containing this project

README 

        
# 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 **Codrops** 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)



## Blog Post



I've recently written a blog post about [Creating an Animated TextField with React Native](https://bilir.me/blog/creating-an-animated-textfield-with-react-native). While it isn't directly related to this library, I think you might still find it useful to understand the basics of creating an animated text input with `React Native Animated` library.



## Installation



The latest version of this project needs **react-native >= 0.55(March 2018 release)** due to **createRef** usage. Go with the latest version:



`$ npm install react-native-textinput-effects --save`



You can stick with version 0.4 if you have an older react-native version:



`$ npm install [email protected] --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.|

|**`value`**|String|This value will be applied to the TextInput and change it's state on every render. Use this prop if you want a [Controlled Component](https://facebook.github.io/react/docs/forms.html#controlled-components).|

|**`defaultValue`**|String|If you want to initialize the component with a non-empty value, you can supply a defaultValue prop. This prop creates an [Uncontrolled Component](https://facebook.github.io/react/docs/forms.html#uncontrolled-components) and is only used during initial render.|



You can also use default [TextInput Props](https://facebook.github.io/react-native/docs/textinput.html#props). They'll be passed into TextInput component. E.g., use `TextInput`'s `onChange` prop to be notified on text changes.

```js

 { this.setState({textValue: text}) }

/>

```



### 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 Icon component.|

|**`iconSize`**|Number|Applied to the Icon 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.



You can also check out the example library without any installation on [Appetize.io](https://appetize.io/app/uhgu1wc1htqfcf7bp812gevr2r?device=iphone6s&scale=75&orientation=portrait&osVersion=9.3)!



## Input Types



### Sae



![](screenshots/sae.gif)



```js

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

import { Sae } from 'react-native-textinput-effects';



const saeInput = (

  

);

```



### Fumi



![](screenshots/fumi.gif)



```js

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

import { Fumi } from 'react-native-textinput-effects';



const fumiInput = (

  

);

```

### Kohana



![](screenshots/kohana.gif)



Kohana supports [Animated Native Driver](https://facebook.github.io/react-native/docs/animations.html#using-the-native-driver). You can use native driver by passing `useNativeDriver`.



```js

import MaterialsIcon from 'react-native-vector-icons/MaterialIcons';

import { Kohana } from 'react-native-textinput-effects';



const kohanaInput = (

  

);

```



### Makiko



![](screenshots/makiko.gif)



```js

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

import { Makiko } from 'react-native-textinput-effects';



const makikoInput = (

  

);

```

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 = (

  

);

```



### Hoshi



![](screenshots/hoshi.gif)



```js

import { Hoshi } from 'react-native-textinput-effects';



const hoshiInput = (

  

);

```



### Jiro



![](screenshots/jiro.gif)



```js

import { Jiro } from 'react-native-textinput-effects';



const jiroInput = (

  

);

```



### Kaede



![](screenshots/kaede.gif)



```js

import { Kaede } from 'react-native-textinput-effects';



const kaedeInput = (

  

);

```



### Akira



![](screenshots/akira.gif)



```js

import { Akira } from 'react-native-textinput-effects';



const akiraInput = (

  

);

```



### Madoka



![](screenshots/madoka.gif)



```js

import { Madoka } from 'react-native-textinput-effects';



const madokaInput = (

  

);

```



### Hideo



![](screenshots/hideo.gif)



```js

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

import { Hideo } from 'react-native-textinput-effects';



const hideoInput = (

  

);

```



## Licence

[MIT](http://opensource.org/licenses/mit-license.html)