{"id":3941,"url":"https://github.com/halilb/react-native-textinput-effects","last_synced_at":"2025-05-14T06:13:36.176Z","repository":{"id":37549843,"uuid":"60174648","full_name":"halilb/react-native-textinput-effects","owner":"halilb","description":"Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.","archived":false,"fork":false,"pushed_at":"2024-04-08T12:39:25.000Z","size":3472,"stargazers_count":2991,"open_issues_count":28,"forks_count":293,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-05-13T12:14:40.949Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/halilb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-01T12:22:28.000Z","updated_at":"2025-05-10T00:34:06.000Z","dependencies_parsed_at":"2024-04-08T13:46:43.322Z","dependency_job_id":"42106a33-72b1-4eee-822b-e64fe18cdb1d","html_url":"https://github.com/halilb/react-native-textinput-effects","commit_stats":{"total_commits":95,"total_committers":12,"mean_commits":7.916666666666667,"dds":"0.17894736842105263","last_synced_commit":"03252aee86a7280c3b9474f65b3e85c82d1986ef"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halilb%2Freact-native-textinput-effects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halilb%2Freact-native-textinput-effects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halilb%2Freact-native-textinput-effects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halilb%2Freact-native-textinput-effects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halilb","download_url":"https://codeload.github.com/halilb/react-native-textinput-effects/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254083261,"owners_count":22011843,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:16:55.987Z","updated_at":"2025-05-14T06:13:36.129Z","avatar_url":"https://github.com/halilb.png","language":"JavaScript","readme":"# React Native Textinput Effects\n\nI'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.\n\nThere is also a native iOS library called [TextFieldEffects](https://github.com/raulriera/TextFieldEffects) which has built some of them in Swift.\n\n![](screenshots/full.gif)\n\n## Blog Post\n\nI'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.\n\n## Installation\n\nThe latest version of this project needs **react-native \u003e= 0.55(March 2018 release)** due to **createRef** usage. Go with the latest version:\n\n`$ npm install react-native-textinput-effects --save`\n\nYou can stick with version 0.4 if you have an older react-native version:\n\n`$ npm install react-native-textinput-effects@0.4.2 --save`\n\nYou 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.\n\n## How to use\n\n### Common Props\n\n| Prop | Type | Description |\n|---|---|---|\n|**`label`**|String|Displayed as placeholder string of the input.|\n|**`style`**|View Style Object|Applied to the root container of the input.|\n|**`labelStyle`**|View Style Object|Applied to the container of the label view.|\n|**`inputStyle`**|Text Style Object|Applied to the TextInput component.|\n|**`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).|\n|**`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.|\n\nYou 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.\n```js\n\u003cSae\n  onChangeText={(text) =\u003e { this.setState({textValue: text}) }\n/\u003e\n```\n\n### Props for TextInputEffects with an Icon\n\nThis component needs `Icon` component from `react-native-vector-icons` to operate with icons. You should import it before creating a TextInputEffects component.\n\n`import Icon from 'react-native-vector-icons/FontAwesome';`\n\n| Prop | Type | Description |\n|---|---|---|\n|**`iconClass`**|Object|The Icon component class you've imported from react-native-vector-icons.|\n|**`iconName`**|String|Name of the icon that is passed to Icon component.|\n|**`iconColor`**|String|Applied to the Icon component.|\n|**`iconSize`**|Number|Applied to the Icon component.|\n\n\n## Example\n\nSee [TextInputEffectsExample.js](Example/TextInputEffectsExample.js) file.\n\nFollow those steps to run the example:\n\n1. Clone the repo `git clone https://github.com/halilb/react-native-textinput-effects \u0026\u0026 cd react-native-textinput-effects/Example`\n2. Install dependencies `npm install``\n3. Follow [official instructions](https://facebook.github.io/react-native/docs/getting-started.html) to run the example project in a simulator or device.\n\nYou can also check out the example library without any installation on [Appetize.io](https://appetize.io/app/uhgu1wc1htqfcf7bp812gevr2r?device=iphone6s\u0026scale=75\u0026orientation=portrait\u0026osVersion=9.3)!\n\n## Input Types\n\n### Sae\n\n![](screenshots/sae.gif)\n\n\n```js\nimport FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';\nimport { Sae } from 'react-native-textinput-effects';\n\nconst saeInput = (\n  \u003cSae\n    label={'Email Address'}\n    iconClass={FontAwesomeIcon}\n    iconName={'pencil'}\n    iconColor={'white'}\n    inputPadding={16}\n    labelHeight={24}\n    // active border height\n    borderHeight={2}\n    // TextInput props\n    autoCapitalize={'none'}\n    autoCorrect={false}\n  /\u003e\n);\n```\n\n### Fumi\n\n![](screenshots/fumi.gif)\n\n\n```js\nimport FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';\nimport { Fumi } from 'react-native-textinput-effects';\n\nconst fumiInput = (\n  \u003cFumi\n    label={'Course Name'}\n    iconClass={FontAwesomeIcon}\n    iconName={'university'}\n    iconColor={'#f95a25'}\n    iconSize={20}\n    iconWidth={40}\n    inputPadding={16}\n  /\u003e\n);\n```\n### Kohana\n\n![](screenshots/kohana.gif)\n\nKohana 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`.\n\n```js\nimport MaterialsIcon from 'react-native-vector-icons/MaterialIcons';\nimport { Kohana } from 'react-native-textinput-effects';\n\nconst kohanaInput = (\n  \u003cKohana\n    style={{ backgroundColor: '#f9f5ed' }}\n    label={'Line'}\n    iconClass={MaterialsIcon}\n    iconName={'directions-bus'}\n    iconColor={'#f4d29a'}\n    inputPadding={16}\n    labelStyle={{ color: '#91627b' }}\n    inputStyle={{ color: '#91627b' }}\n    labelContainerStyle={{ padding: 20 }}\n    iconContainerStyle={{ padding: 20 }}\n    useNativeDriver\n  /\u003e\n);\n```\n\n### Makiko\n\n![](screenshots/makiko.gif)\n\n\n```js\nimport FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';\nimport { Makiko } from 'react-native-textinput-effects';\n\nconst makikoInput = (\n  \u003cMakiko\n    label={'Comment'}\n    iconClass={FontAwesomeIcon}\n    iconName={'comment'}\n    iconColor={'white'}\n    inputPadding={16}\n    inputStyle={{ color: '#db786d' }}\n  /\u003e\n);\n```\nNote: 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.\n\n### Isao\n\n![](screenshots/isao.gif)\n\n\n```js\nimport { Isao } from 'react-native-textinput-effects';\n\nconst isaoInput = (\n  \u003cIsao\n    label={'First Name'}\n    // this is applied as active border and label color\n    activeColor={'#da7071'}\n    // active border height\n    borderHeight={8}\n    inputPadding={16}\n    labelHeight={24}\n    // this is applied as passive border and label color\n    passiveColor={'#dadada'}\n  /\u003e\n);\n```\n\n### Hoshi\n\n![](screenshots/hoshi.gif)\n\n\n```js\nimport { Hoshi } from 'react-native-textinput-effects';\n\nconst hoshiInput = (\n  \u003cHoshi\n    label={'Town'}\n    // this is used as active border color\n    borderColor={'#b76c94'}\n    // active border height\n    borderHeight={3}\n    inputPadding={16}\n    // this is used to set backgroundColor of label mask.\n    // please pass the backgroundColor of your TextInput container.\n    backgroundColor={'#F9F7F6'}\n  /\u003e\n);\n```\n\n### Jiro\n\n![](screenshots/jiro.gif)\n\n\n```js\nimport { Jiro } from 'react-native-textinput-effects';\n\nconst jiroInput = (\n  \u003cJiro\n    label={'Dog\\'s name'}\n    // this is used as active and passive border color\n    borderColor={'#9b537a'}\n    inputPadding={16}\n    inputStyle={{ color: 'white' }}\n  /\u003e\n);\n```\n\n### Kaede\n\n![](screenshots/kaede.gif)\n\n\n```js\nimport { Kaede } from 'react-native-textinput-effects';\n\nconst kaedeInput = (\n  \u003cKaede\n    label={'Website'}\n    inputPadding={16}\n  /\u003e\n);\n```\n\n### Akira\n\n![](screenshots/akira.gif)\n\n\n```js\nimport { Akira } from 'react-native-textinput-effects';\n\nconst akiraInput = (\n  \u003cAkira\n    label={'First Name'}\n    // this is used as active and passive border color\n    borderColor={'#a5d1cc'}\n    inputPadding={16}\n    labelHeight={24}\n    labelStyle={{ color: '#ac83c4' }}\n  /\u003e\n);\n```\n\n### Madoka\n\n![](screenshots/madoka.gif)\n\n\n```js\nimport { Madoka } from 'react-native-textinput-effects';\n\nconst madokaInput = (\n  \u003cMadoka\n    label={'Frequency'}\n    // this is used as active and passive border color\n    borderColor={'#aee2c9'}\n    inputPadding={16}\n    labelHeight={24}\n    labelStyle={{ color: '#008445' }}\n    inputStyle={{ color: '#f4a197' }}\n  /\u003e\n);\n```\n\n### Hideo\n\n![](screenshots/hideo.gif)\n\n\n```js\nimport FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';\nimport { Hideo } from 'react-native-textinput-effects';\n\nconst hideoInput = (\n  \u003cHideo\n    iconClass={FontAwesomeIcon}\n    iconName={'envelope'}\n    iconColor={'white'}\n    // this is used as backgroundColor of icon container view.\n    iconBackgroundColor={'#f2a59d'}\n    inputStyle={{ color: '#464949' }}\n  /\u003e\n);\n```\n\n## Licence\n[MIT](http://opensource.org/licenses/mit-license.html)\n","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalilb%2Freact-native-textinput-effects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalilb%2Freact-native-textinput-effects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalilb%2Freact-native-textinput-effects/lists"}