{"id":18546741,"url":"https://github.com/bradleygore/nativescript-textinputlayout","last_synced_at":"2025-10-17T17:35:27.663Z","repository":{"id":57308804,"uuid":"53456979","full_name":"bradleygore/nativescript-textinputlayout","owner":"bradleygore","description":"Android Material Design TextInputLayout for NativeScript","archived":false,"fork":false,"pushed_at":"2019-02-24T05:40:18.000Z","size":11979,"stargazers_count":36,"open_issues_count":5,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T05:38:06.212Z","etag":null,"topics":["android-material","nativescript","textinputlayout"],"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/bradleygore.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-03-09T01:03:52.000Z","updated_at":"2024-05-30T15:56:01.000Z","dependencies_parsed_at":"2022-08-29T06:50:59.537Z","dependency_job_id":null,"html_url":"https://github.com/bradleygore/nativescript-textinputlayout","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradleygore%2Fnativescript-textinputlayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradleygore%2Fnativescript-textinputlayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradleygore%2Fnativescript-textinputlayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradleygore%2Fnativescript-textinputlayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bradleygore","download_url":"https://codeload.github.com/bradleygore/nativescript-textinputlayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248107245,"owners_count":21048884,"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":["android-material","nativescript","textinputlayout"],"created_at":"2024-11-06T20:26:47.704Z","updated_at":"2025-10-17T17:35:27.560Z","avatar_url":"https://github.com/bradleygore.png","language":"JavaScript","readme":"# nativescript-textinputlayout\n## Android Material Design TextInputLayout for NativeScript\n\n#### [Android TextInputLayout Documentation](http://developer.android.com/reference/android/support/design/widget/TextInputLayout.html)\n\n#### [iOS SkyFloatingLabelTextField Documentation](https://github.com/Skyscanner/SkyFloatingLabelTextField)\n\n----------\n\n## NO LONGER MAINTAINED\n\nWhen I built this plugin, I was exploring NativeScript a lot in my spare time for fun. I currently do not have the spare time I used to have, so I will no longer be maintaining this plugin. PRs are welcome, or if you wish to take over maintenance submit an issue with your information and I'll contact you.\n\n\\- Bradley\n\n\n----------\n\n## Usage\n\nInstall the plugin by running this command in your project root:\n`tns plugin add nativescript-textinputlayout`\n\nThe android and iOS implementations, while very similar in effect, have several differences. The below sections break up usage by platform.\n\n### Android\n\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:TIL=\"nativescript-textinputlayout\"\u003e\n    \u003cStackLayout\u003e\n        \u003c!--TIL with all possible attrs via bindings--\u003e\n        \u003cTIL:TextInputLayout class=\"demo-text-input-layout\"\n            hint=\"{{ hint }}\"\n            error=\"{{ error }}\"\n            errorEnabled=\"{{ isErrorEnabled }}\"\n            hintAnimationEnabled=\"{{ isHintAnimationEnabled }}\"\n            hintTextAppearance=\"SpecialTextInputLayout\"\n            errorTextAppearance=\"SpecialErrorTextInputLayout\"\n            counterEnabled=\"{{ isCounterEnabled }}\"\u003e\n\n            \u003c!--ONE child element can be added, MUST be either TextField or TextView--\u003e\n            \u003cTextField text=\"{{ demoText }}\" /\u003e\n        \u003c/TIL:TextInputLayout\u003e\n\n        \u003c!--TIL with just a static hint--\u003e\n        \u003cTIL:TextInputLayout hint=\"Hint Text\"\u003e\n            \u003cTextField text=\"\" /\u003e\n        \u003c/TIL:TextInputLayout\u003e\n    \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### Attributes\n\nName | Description | Value Type | Default\n-----|-------------|------------|---------\nhint | Text that shows up in the hint, and floating label | String | \"\"\nerror | Text that will display as error message and make the widget look invalid | String | \"\"\nerrorEnabled | Whether or not an error is enabled for the widget.  If no error, it won't pad the bottom so much.  However, if you set the error attr, it auto-sets this property under the hood to true | Boolean | false\nhintAnimationEnabled | Whether or not the 'float' action of the label should be animated | Boolean | true\nhintTextAppearance | Name of the style definition to apply to the floating label | String | \"\"\nerrorTextAppearance | Name of the style definition to apply to the error message | String | \"\"\ncounterEnabled | Whether or not a char counter should display in bottom-right of widget | Boolean | false\n\n#### Styling\nSeveral of the styles for the TextInputLayout need to be declared in the Theme for your app.\nThis top-level set of styles will apply to the entire app.\nOne way to do this is to have a style defined whose parent is AppTheme (the theme that NativeScript generates) and then set the app to use the new theme by updating the AndroidManifest.xml file. There are examples of this in the Demo.\n\nThere is one property that you can use to style the floating label. It's power is limited - it only applies when the field is focused - but it's something.\nSimply create a style rule, such as the one below, and set the TextInputLayout's hintTextAppearance property to the name of that style rule (see sample TextInputLayout XML above):\n\n```xml\n\u003c!-- app/App_Resources/Android/values/appStyles.xml --\u003e\n\u003cresources xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n    \u003cstyle name=\"SpecialTextInputLayout\" parent=\"@android:style/TextAppearance\"\u003e\n        \u003citem name=\"android:textColor\"\u003e#F9D02A\u003c/item\u003e\n        \u003citem name=\"android:textSize\"\u003e12dp\u003c/item\u003e\n    \u003c/style\u003e\n    \u003cstyle name=\"SpecialErrorTextInputLayout\" parent=\"@android:style/TextAppearance\"\u003e\n        \u003citem name=\"android:textColor\"\u003e#FF0000\u003c/item\u003e\n        \u003citem name=\"android:textSize\"\u003e12dp\u003c/item\u003e\n    \u003c/style\u003e\n\u003c/resources\u003e\n```\n\n#### Demo\n\nTo run the demo locally, run the following commands from the root folder after pulling down this repo:\n`npm run setup` and `npm run demo.android`\n\n\u003cp align=\"center\"\u003e\n    \u003cimg height=\"750\" src=\"https://raw.githubusercontent.com/bradleygore/nativescript-textinputlayout/master/demo.gif\" alt=\"NativeScript Text Input Layout demo\"/\u003e\n\u003c/p\u003e\n\n------------------\n\n## iOS\n\nThe pod in use - `pod 'SkyFloatingLabelTextField', '~\u003e 3.3.0'` -  for the iOS functionality actually allows for a bit nicer markup as it extends UITextField, which NativeScript already has a wrapper for. So, instead of a `TextInpuLayout` that wraps a `TextField`, we just need a single element and we get to take advantage of all the normal `TextField` bindings that comes from NativeScript! Note, however, that there are two different kinds of inputs:\n\n* `TextInputLayout` - standard input with floating label, error message capability, etc..\n* `TextInputLayoutWithIcon` - same as above, with addition of an icon and icon-related properties..\n\n*NOTE*: This pod relies on Swift 3.0, so I ended up using the [NativeScript Swift 3.0 Plugin](https://github.com/naderio/nativescript-swift-3.0) for this.\n\n```xml\n\n\u003cTIL:TextInputLayout\n    hint=\"{{ hint }}\"\n    isEnabled=\"{{ isEnabled }}\"\n    disabledColor=\"#c3c3c3\"\n    error=\"{{ error }}\"\n    text=\"{{ demoText }}\"\n    title=\"{{ title }}\"\n    color=\"{{ error ? '#aa0000' : '#d745ff' }}\"\n    tintColor=\"#d745ff\"\n    lineColor=\"#d745ff\"\n    selectedTitleColor=\"#ff45ca\"\n    selectedLineColor=\"#7a45ff\"\n    lineHeight=\"1.25\"\n    selectedLineHeight=\"3.5\" /\u003e\n\n\u003cTIL:TextInputLayoutWithIcon\n    hint=\"Is there an error?\"\n    text=\"{{ error }}\"\n    iconFont=\"{{ iconFont }}\"\n    iconText=\"{{ iconText }}\"\n    iconColor=\"#48c8ff\"\n    selectedIconColor=\"#aa0000\"\n    iconMarginLeft=\"2\"\n    iconMarginBottom=\"2\"\n    iconRotationDegrees=\"45\"\n    title=\"Error Text\"\n    tintColor=\"#48c8ff\"\n    lineColor=\"#48c8ff\"\n    selectedTitleColor=\"#6348ff\"\n    selectedLineColor=\"#48ff7f\"\n    lineHeight=\"0.5\"\n    selectedLineHeight=\"1\" /\u003e\n\n```\n\n#### Attributes\n\n*Note*: Any properties relating to **color** must be a value that is valid to pass to NativeScript's [Color constructor](https://github.com/NativeScript/NativeScript/tree/v2.5.2/tns-core-modules/color)\n\n*Note*: Any properties relating to **icon** apply only to the `TextInputLayoutWithIcon` widget and will not do anything on the regular `TextInputLayout` widget.\n\nName | Description | Value Type | Default\n-----|-------------|------------|---------\nhint | Text that shows up in the text field's placeholder area | String | \"\"\nisDisabled | Dictates if field is disabled | Boolean | false\ndisabledColor | Field overall color (label, underline, text) when it's disabled | String | \"\"\nerror | Text that will display as error message and make the widget look invalid | String | \"\"\ntitle | Text that will display in the 'floating label' when there is a value in the field (`hint` value used if nothing supplied) | String | \"\"\ntintColor | Color of the blinking cursor when field focused | String | \"\"\nlineColor | Color of the line underneath the field | String | \"\"\nselectedTitleColor | Color of the floating label when field is selected | String | \"\"\nselectedLineColor | Color of the line underneath the field when field is selected | String | \"\"\nlineHeight | Thickness of the line underneath the field (set to 0 for no line at all) | Number | 1\niconFont | UIFont to use for the icon. Easiest way is to use the `ui/styling/font` module and create the font: \u003cbr\u003e `Font.default.withFontFamily(\"FontAwesome\").withFontSize(16).getUIFont(null))` | UIFont | null\niconText | Unicode value to pass to the icon. *NOTE*: I was only able to get this to work by binding it to a view model rather than passing the value in directly: \u003cbr\u003e i.e. `viewModel.set('iconText', '\\uf06a')` vs `iconText=\"\u0026#xf06a;\"` | String | \"\"\niconColor | Color of the icon | String | \"\"\nselectedIconColor | Color of the icon when field focused | String | \"\"\niconMarginLeft | Margin on the left of the icon | Number | *pod's default*\niconMarginBottom | Margin on the bottom of the icon | Number | *pod's default*\niconRotationDegrees | Amount to rotate the icon | Number | *pod's default*\n\n#### Demo\n\nTo run the demo locally, run the following commands from the root folder after pulling down this repo:\n`npm run setup` and `npm run demo.ios`\n\n\u003cp align=\"center\"\u003e\n    \u003cimg height=\"750\" src=\"https://raw.githubusercontent.com/bradleygore/nativescript-textinputlayout/master/iosDemo.gif\" alt=\"NativeScript Text Input Layout demo\"/\u003e\n\u003c/p\u003e\n\n------------------\n\n## Attributions\n\n[Nathanael Anderson](https://github.com/NathanaelA) - He helped me with what (LayoutBase, ContentView, View, ...) to subclass off of and helped me understand more of the nuances of each.\n\n[Brad Martin](https://github.com/bradmartin) - I used his {N} plugins as guides for this one, and pestered him when I had questions.\n\n[Nathan Walker](https://github.com/NathanWalker) - I followed his [tutorial](http://developer.telerik.com/featured/creating-nativescript-plugins-in-typescript/) in setting up this plugin.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradleygore%2Fnativescript-textinputlayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbradleygore%2Fnativescript-textinputlayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradleygore%2Fnativescript-textinputlayout/lists"}