Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 15 hours ago
JSON representation
Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.
- Host: GitHub
- URL: https://github.com/halilb/react-native-textinput-effects
- Owner: halilb
- License: mit
- Created: 2016-06-01T12:22:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-08T12:39:25.000Z (8 months ago)
- Last Synced: 2024-12-04T20:04:59.457Z (8 days ago)
- Language: JavaScript
- Homepage:
- Size: 3.31 MB
- Stars: 2,986
- Watchers: 35
- Forks: 293
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - react-native-textinput-effects ★2062 - Text inputs with custom label and icon animations for iOS and Android. Built by react native and inspired by Codrops. (Components / UI)
- awesome-react-native - react-native-textinput-effects ★2062 - Text inputs with custom label and icon animations for iOS and Android. Built by react native and inspired by Codrops. (Components / UI)
- awesome-reactnative-ui - react-native-textinput-effects - native-textinput-effects/master/screenshots/full.gif)| (Others)
- awesome-reactnative-ui - react-native-textinput-effects - native-textinput-effects/master/screenshots/full.gif)| (Others)
- awesome-react-native - react-native-textinput-effects ★2062 - Text inputs with custom label and icon animations for iOS and android. Built by react native and inspired by Codrops. (Components / UI)
- awesome-react-native-ui - react-native-textinput-effects ★841 - Text inputs with custom label and icon animations for iOS and android. Built by react native and inspired by Codrops. (Components / UI)
- awesome-react-native - react-native-textinput-effects ★2062 - Text inputs with custom label and icon animations for iOS and Android. Built by react native and inspired by Codrops. (Components / UI)
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)