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: about 13 hours 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)