{"id":4051,"url":"https://github.com/evblurbs/react-native-md-textinput","last_synced_at":"2026-01-12T02:31:41.739Z","repository":{"id":51688456,"uuid":"50652343","full_name":"evblurbs/react-native-md-textinput","owner":"evblurbs","description":"React Native TextInput styled with Material Design.","archived":false,"fork":false,"pushed_at":"2018-10-16T14:47:51.000Z","size":3037,"stargazers_count":322,"open_issues_count":45,"forks_count":122,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-29T15:40:49.435Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/evblurbs.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}},"created_at":"2016-01-29T09:22:44.000Z","updated_at":"2024-09-06T17:44:20.000Z","dependencies_parsed_at":"2022-08-23T00:20:46.562Z","dependency_job_id":null,"html_url":"https://github.com/evblurbs/react-native-md-textinput","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evblurbs%2Freact-native-md-textinput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evblurbs%2Freact-native-md-textinput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evblurbs%2Freact-native-md-textinput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evblurbs%2Freact-native-md-textinput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evblurbs","download_url":"https://codeload.github.com/evblurbs/react-native-md-textinput/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576895,"owners_count":17939645,"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:59.602Z","updated_at":"2026-01-12T02:31:41.692Z","avatar_url":"https://github.com/evblurbs.png","language":"JavaScript","readme":"# React Native Material Design TextInput\n\nReact Native TextInput styled with Material Design.\n\n![demo](/demo.gif)\n\n## Installation\n```\nnpm install react-native-md-textinput\n```\n\n## Usage\n\nI'm going to refer to the `react-native-md-textinput` Component as `TextField`. You can name it whatever you like when importing it.\n\nThe most basic usage is to import the `TextField` Component and render it with the props `label` and `highlightColor`. Note that this example uses the [ScrollView](https://facebook.github.io/react-native/docs/scrollview.html) Component. This allows the keyboard to be dismissed when users tap outside the input and keyboard area.\n\n```javascript\nimport TextField from 'react-native-md-textinput';\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cScrollView\u003e\n        \u003cTextField label={'Name'} highlightColor={'#00BCD4'} /\u003e\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n```\n\n### TextInput\n\nTo customize the `TextInput` that is rendered inside the `TextField` Component, simply pass props the `TextInput` accepts to the `TextField` Component. You can find the props the `TextInput` Component accepts [here](https://facebook.github.io/react-native/docs/textinput.html#props).\n\nHere is an example of how to change the keyboard type to `numeric`.\n\n```javascript\nimport TextField from 'react-native-md-textinput';\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cScrollView\u003e\n        \u003cTextField\n          label={'Name'}\n          highlightColor={'#00BCD4'}\n          keyboardType={'numeric'}\n        /\u003e\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n```\n\n### Dense Styling\n\nTo use the \"dense\" styling that matches the [Material Design Style Guide](https://www.google.com/design/spec/components/text-fields.html#text-fields-labels), you can set the prop `dense` to `true`. By default, this prop is set to `false`.\n\n![demo dense](/demo-dense.gif)\n\n## Props\n\nBelow are the props you can pass to the React Component to customize the TextInput.\n\nProp | Type | Default | description\n-----|------|---------|------------\nlabel | string | | This string appears as the label.\nhighlightColor | string | | This string represents the hex code, rgb, or rgba color of the TextInput label and underline when it is active/focused on.\nduration | number | `200` | A number representing the duration of floating label and underline animations in milliseconds.\nlabelColor | string | `#9E9E9E` | This string represents the hex code, rgb, or rgba color of the TextInput label when it is inactive.\ntextColor | string | `#000` | This string represents the hex code, rgb, or rgba color of the text entered in the TextInput. Note: If you set textFocusColor or textBlurColor, those colors will override this one during the corresponding state of the TextInput.\ntextFocusColor | string | | This string represents the hex code, rgb, or rgba color of the text entered in the TextInput when it is active/focused on.\ntextBlurColor | string | | This string represents the hex code, rgb, or rgba color of the text entered in the TextInput when it is inactive.\nborderColor | string | `#E0E0E0` | This string represents the hex code, rgb, or rgba color of the TextInput underline when it is inactive.\ndense | bool | `false` | If true, it will render the \"dense\" input field which is smaller in height and has smaller font sizes. You can view more [here](https://www.google.com/design/spec/components/text-fields.html#text-fields-labels).\nmultiline | bool | `false` | If true, it will allow multiline text input\nheight | number | `undefined` | A number representing the initial height of the textInput\nautoGrow | bool | `false` | If true enables autogrow of the textInput \nunderlineColorAndroid | string | `rgba(0,0,0,0)` | This sets the default underline color on Android to transparent ([Issue #1](https://github.com/evblurbs/react-native-md-textinput/issues/1)).\n\n### Style Overrides\n\nThe main purpose of this component is to easily add a TextInput that matches the [Material Design Style Guide](https://www.google.com/design/spec/components/text-fields.html#text-fields-labels). With that said, there have been requests (i.e. [PR #4](https://github.com/evblurbs/react-native-md-textinput/pull/4)) to style the component beyond the [Material Design Style Guide](https://www.google.com/design/spec/components/text-fields.html#text-fields-labels). I've added the props below to allow you to do exactly that. **DO THIS AT YOUR OWN RISK**. Changing the layout requires an understanding of the main elements of this component (i.e. FloatingLabel, the Viewwrapper, and the TextInput), and may cause compatibility issues between Android and iOS ([Issue #2](https://github.com/evblurbs/react-native-md-textinput/issues/2)). I'll try to support any issues with these props, but they will be treated as second class citizens.\n\nProp | Type | Default | description\n-----|------|---------|------------\ninputStyle | Object | | Object to override the styles of the TextInput.\u003csup\u003e[1](#reactStyleObject)\u003c/sup\u003e\nwrapperStyle | Object | | Object to override the styles of the View that wraps the TextInput.\u003csup\u003e[1](#reactStyleObject)\u003c/sup\u003e\nlabelStyle | Object | | Object to override the styles of the Label that animates on focus of the TextInput.\u003csup\u003e[1](#reactStyleObject)\u003c/sup\u003e\n\n\u003ca name=\"reactStyleObject\"\u003e1\u003c/a\u003e: Object to override styles needs to match the format of [inline styles](https://facebook.github.io/react/tips/inline-styles.html). You can find the supported properties [here](https://facebook.github.io/react-native/docs/style.html#supported-properties).\n\n## TODO\n\n- [ ] Support multi-line TextInput fields\n- [ ] Support character limit\n- [ ] Add option for dark theme\n","funding_links":[],"categories":["Components","React Native","Others"],"sub_categories":["UI","Components React Native"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevblurbs%2Freact-native-md-textinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevblurbs%2Freact-native-md-textinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevblurbs%2Freact-native-md-textinput/lists"}