{"id":4360,"url":"https://github.com/akshit5230/React-Native-Material-TextInput","last_synced_at":"2025-07-31T13:30:58.554Z","repository":{"id":143906677,"uuid":"184722830","full_name":"akshit5230/React-Native-Material-TextInput","owner":"akshit5230","description":"A simple TextInput wrapper for material styling in iOS and Android","archived":false,"fork":false,"pushed_at":"2019-05-14T06:20:30.000Z","size":7,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-29T18:23:30.876Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akshit5230.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}},"created_at":"2019-05-03T08:30:16.000Z","updated_at":"2023-03-09T05:52:06.000Z","dependencies_parsed_at":"2024-01-27T01:20:38.547Z","dependency_job_id":"66b18cdd-46fe-48cd-952d-a545c8712ead","html_url":"https://github.com/akshit5230/React-Native-Material-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/akshit5230%2FReact-Native-Material-TextInput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshit5230%2FReact-Native-Material-TextInput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshit5230%2FReact-Native-Material-TextInput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshit5230%2FReact-Native-Material-TextInput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akshit5230","download_url":"https://codeload.github.com/akshit5230/React-Native-Material-TextInput/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228248583,"owners_count":17891447,"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:17:09.479Z","updated_at":"2024-12-05T06:31:42.848Z","avatar_url":"https://github.com/akshit5230.png","language":"JavaScript","readme":"# React-Native-Material-TextInput\n\nA simple TextInput wrapper for material styling in iOS and Android. Customizable styles :+1:. Animated label :+1:.\n\n## Installation\n\n`npm i --save rn-material-textinput`\n\n## Usage\n\n1. Minimalist Example\n\n```\n\u003cCustomTextInput\n    label=\"EMAIL\"\n    value={this.state.value}\n    onChangeText={(value) =\u003e this.setState({ value })}\n/\u003e\n```\n \n2. Full example\n```\nimport React from 'react';\nimport {\n  View\n} from 'react-native';\nimport CustomTextInput from 'rn-material-textinput';\n\nexport default class MyExample extends React.Component {\n\n  state = {\n    value: \"\"\n  }\n  \n  render() {\n    return (\n      \u003cView style = {{\n        padding: 10\n      }}\u003e\n        \u003cCustomTextInput\n          label=\"EMAIL\"\n          value={this.state.value}\n          onChangeText={(value) =\u003e this.setState({ value })}\n          labelStyle={{\n              fontFamily: 'ProximaNova-SemiBold',\n              color: '#9E9E9E',\n              fontSize: 15,\n          }}\n          inputStyle={{\n              fontFamily: 'ProximaNova-SemiBold',\n              color: '#2196F3',\n              fontSize: 18,\n          }}\n          focusedBorderBottomColor=\"#2196F3\"\n          unfocusedBorderBottomColor=\"#9E9E9E\"\n        /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n## Props\n| Name  | Usage | Example Value |\n| --- | --- | --- |\n| label | define the placeholder label for the input which animated upwards when focused | \"USERNAME\" |\n| value | provide value variable and set this with onChangeText | {this.state.value} |\n| unfocusedBorderBottomColor | provide custom color for bottom border when not focused | \"#DDDDDD\" |\n| focusedBorderBottomColor | provide custom color for bottom border when focused | \"#DDFFFF\" |\n| labelStyle | give styling to label text | { fontSize: 15, color: \"#dsdsdd\", fontFamily: \"Nunito-Bold\"} |\n| inputStyle | give styling to input text | { fontSize: 18, color: \"#dsgfgd\", fontFamily: \"Nunito-Bold\"} |\n\n## Functions\n| Name | Usage | Example |\n| --- | --- | --- |\n| handleFocus() | fuction to focus the input programmatically | `this._emailInputRef.handleFocus()` |\n| handleBlur() | fuction to unfocus the input programmatically | `this._emailInputRef.handleBlur()` |\n\nYou can provide other props available to TextInput component. For example \n`secureTextEntry={true},\nkeyboardType=\"number-pad\",\nreturnKeyLabel=\"next\"`\n\n### Programmatically focusing on input\nIn cases such as prefilled values in the input, you need to focus the inputs to animate the label upwards. To do this, save reference of the `CustomTextInput` component and use `handleFocus()` and `handleBlur()` functions. For example:\n```\n\u003cCustomTextInput\n    ref={(ref) =\u003e this._emailInputRef = ref}\n    label=\"EMAIL\"\n    value={this.props.value}\n    onChangeText={(value) =\u003e this.setState({ value })}\n/\u003e\n```\nUse reference to focus that input\n```\ncomponentDidMount() {\n  this._emailInputRef.handleFocus()\n}\n```\n","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakshit5230%2FReact-Native-Material-TextInput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakshit5230%2FReact-Native-Material-TextInput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakshit5230%2FReact-Native-Material-TextInput/lists"}