{"id":19928077,"url":"https://github.com/razorrun/react-native-floating-labels-smartlife","last_synced_at":"2026-05-06T04:31:15.103Z","repository":{"id":57337074,"uuid":"297461747","full_name":"razorRun/react-native-floating-labels-smartlife","owner":"razorRun","description":"React native floating labels with material outlook   ","archived":false,"fork":false,"pushed_at":"2020-09-21T23:39:47.000Z","size":1140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T02:46:32.869Z","etag":null,"topics":["android","floating-action-button","floating-labels","ios","matieral-design","react-native"],"latest_commit_sha":null,"homepage":"https://roshan.digital/","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/razorRun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-21T21:09:03.000Z","updated_at":"2020-09-22T06:06:32.000Z","dependencies_parsed_at":"2022-09-12T09:51:15.974Z","dependency_job_id":null,"html_url":"https://github.com/razorRun/react-native-floating-labels-smartlife","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/razorRun%2Freact-native-floating-labels-smartlife","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-floating-labels-smartlife/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-floating-labels-smartlife/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-floating-labels-smartlife/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/razorRun","download_url":"https://codeload.github.com/razorRun/react-native-floating-labels-smartlife/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241355036,"owners_count":19949292,"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","floating-action-button","floating-labels","ios","matieral-design","react-native"],"created_at":"2024-11-12T22:36:12.666Z","updated_at":"2026-05-06T04:31:13.101Z","avatar_url":"https://github.com/razorRun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"A `\u003cFloatingLabel\u003e` component for react-native projects was initially cloned from [`react-native-floating-labels`](https://github.com/mayank-patel/react-native-floating-labels#readme) And been actively maintaining it as we wanted to avoid any future changes to original repo that effects our existing applications. \n\n## react-native-floating-labels\n\n![Demo](https://raw.githubusercontent.com/mayank-patel/react-native-floating-labels/master/demo.gif)\n\n## Add it to your project\n\n1. Run `npm install react-native-floating-labels-smartlife --save`\n2. `var FloatingLabel = require('react-native-floating-labels-smartlife');`\n\n## Usage\n\n```javascript\n'use strict';\n\nvar React = require('react-native');\n\nvar FloatingLabel = require('react-native-floating-labels-smartlife');\n\nvar {\n  AppRegistry,\n  StyleSheet,\n  View,\n} = React;\n\nclass form extends React.Component {\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.state = {\n      dirty: false,\n    };\n  }\n\n  onBlur() {\n    console.log('#####: onBlur');\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cFloatingLabel \n            labelStyle={styles.labelInput}\n            inputStyle={styles.input}\n            style={styles.formInput}\n            value='john@email.com'\n            onBlur={this.onBlur}\n          \u003eEmail\u003c/FloatingLabel\u003e\n        \u003cFloatingLabel \n            labelStyle={styles.labelInput}\n            inputStyle={styles.input}\n\n            style={styles.formInput}\n          \u003eFirst Name\u003c/FloatingLabel\u003e\n        \u003cFloatingLabel\n            labelStyle={styles.labelInput}\n            inputStyle={styles.input}\n            style={styles.formInput}\n          \u003eLast Name\u003c/FloatingLabel\u003e\n      \u003c/View\u003e\n    );\n  }\n};\n\nvar styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    paddingTop: 65,\n    backgroundColor: 'white',\n  },\n  labelInput: {\n    color: '#673AB7',\n  },\n  formInput: {    \n    borderBottomWidth: 1.5, \n    marginLeft: 20,\n    borderColor: '#333',       \n  },\n  input: {\n    borderWidth: 0\n  }\n});\n\nAppRegistry.registerComponent('form', () =\u003e form);\n\n\n\n\n```\n\nAdditional Props: \n\nFloatingLabel is just like any TextInput. It supports the below mentioned events handlers:\n\n```\nFollowing properties of TextInput are supported:\n\n- autoCapitalize\n- autoCorrect\n- autoFocus\n- bufferDelay\n- clearButtonMode\n- clearTextOnFocus\n- controlled\n- editable\n- enablesReturnKeyAutomatically\n- keyboardType\n- multiline\n- password\n- returnKeyType\n- selectTextOnFocus\n- selectionState\n- style\n- testID\n- value\n\nFollowing events are supported:\n\n- onBlur\n- onChange\n- onChangeText\n- onEndEditing\n- onFocus\n- onSubmitEditing\n\n```\n\n\n\n\n**MIT Licensed**\n\n\n### credits\n[mayank-patel](https://github.com/mayank-patel/react-native-floating-labels#readme)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazorrun%2Freact-native-floating-labels-smartlife","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frazorrun%2Freact-native-floating-labels-smartlife","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazorrun%2Freact-native-floating-labels-smartlife/lists"}