{"id":4118,"url":"https://github.com/mayank-patel/react-native-floating-labels","last_synced_at":"2026-04-09T06:01:11.391Z","repository":{"id":31562265,"uuid":"35126991","full_name":"mayank-patel/react-native-floating-labels","owner":"mayank-patel","description":"React Native Floating Labels Library","archived":false,"fork":false,"pushed_at":"2026-04-08T06:13:30.000Z","size":10466,"stargazers_count":164,"open_issues_count":0,"forks_count":73,"subscribers_count":7,"default_branch":"main","last_synced_at":"2026-04-08T06:26:09.103Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-floating-labels","language":"TypeScript","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/mayank-patel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"license.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2015-05-05T22:24:53.000Z","updated_at":"2026-04-08T06:17:05.000Z","dependencies_parsed_at":"2022-08-17T19:50:28.915Z","dependency_job_id":"10f9350c-19a3-4e71-8648-b67f0ad065c8","html_url":"https://github.com/mayank-patel/react-native-floating-labels","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/mayank-patel/react-native-floating-labels","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayank-patel%2Freact-native-floating-labels","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayank-patel%2Freact-native-floating-labels/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayank-patel%2Freact-native-floating-labels/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayank-patel%2Freact-native-floating-labels/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mayank-patel","download_url":"https://codeload.github.com/mayank-patel/react-native-floating-labels/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayank-patel%2Freact-native-floating-labels/sbom","scorecard":{"id":630274,"data":{"date":"2025-08-11","repo":{"name":"github.com/mayank-patel/react-native-floating-labels","commit":"93d6e67e3dafb07a23c702b9114b891194788b39"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.1,"checks":[{"name":"Code-Review","score":4,"reason":"Found 9/20 approved changesets -- score normalized to 4","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: license.md:0","Info: FSF or OSI recognized license: MIT License: license.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 20 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-21T07:42:28.933Z","repository_id":31562265,"created_at":"2025-08-21T07:42:28.933Z","updated_at":"2025-08-21T07:42:28.933Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31588038,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-09T05:33:47.836Z","status":"ssl_error","status_checked_at":"2026-04-09T05:32:26.579Z","response_time":112,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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:01.644Z","updated_at":"2026-04-09T06:01:11.381Z","avatar_url":"https://github.com/mayank-patel.png","language":"TypeScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"## react-native-floating-labels\n\n[![CI](https://github.com/mayank-patel/react-native-floating-labels/actions/workflows/ci.yml/badge.svg)](https://github.com/mayank-patel/react-native-floating-labels/actions/workflows/ci.yml)\n![NPM Version](https://img.shields.io/npm/v/react-native-floating-labels)\n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n\nAn animated floating label `\u003cTextInput\u003e` component for React Native (iOS, Android, and web via react-native-web).\n\n**[Live demo →](https://react-native-floating-labels.js.org)**\n\n![Demo](https://raw.githubusercontent.com/mayank-patel/react-native-floating-labels/main/demo.gif)\n\n---\n\n## Installation\n\n```bash\nnpm install react-native-floating-labels\n```\n\n---\n\n## Usage\n\n```tsx\nimport FloatingLabel from 'react-native-floating-labels';\n\n\u003cFloatingLabel\u003eEmail\u003c/FloatingLabel\u003e;\n```\n\n### With custom styles\n\n```tsx\n\u003cFloatingLabel\n  labelStyle={{color: '#6200ea'}}\n  inputStyle={{borderColor: '#6200ea', borderWidth: 2, borderRadius: 8}}\n  style={{marginBottom: 16}}\n\u003e\n  Email address\n\u003c/FloatingLabel\u003e\n```\n\n### Controlled value\n\n```tsx\nconst [email, setEmail] = React.useState('');\n\n\u003cFloatingLabel value={email} onChangeText={setEmail}\u003e\n  Email address\n\u003c/FloatingLabel\u003e;\n```\n\n### Imperative ref controls\n\n```tsx\nimport FloatingLabel, {FloatingLabelHandle} from 'react-native-floating-labels';\n\nconst ref = React.useRef\u003cFloatingLabelHandle\u003e(null);\n\n\u003cFloatingLabel ref={ref}\u003eFirst Name\u003c/FloatingLabel\u003e;\n\nref.current?.focus();\nref.current?.blur();\nref.current?.clear();\n```\n\n---\n\n## Props\n\n`FloatingLabel` accepts all standard [`TextInput`](https://reactnative.dev/docs/textinput) props plus the following:\n\n| Prop              | Type                      | Default | Description                                                                                     |\n| ----------------- | ------------------------- | ------- | ----------------------------------------------------------------------------------------------- |\n| `children`        | `ReactNode`               | —       | The floating label text                                                                         |\n| `style`           | `ViewStyle`               | —       | Style for the outer container `View`                                                            |\n| `inputStyle`      | `TextInputProps['style']` | —       | Style applied to the inner `TextInput`                                                          |\n| `labelStyle`      | `TextStyle`               | —       | Style applied to the animated label                                                             |\n| `disabled`        | `boolean`                 | `false` | Disables the input (`editable={false}`); also sets `accessibilityState.disabled` automatically  |\n| `value`           | `string`                  | —       | Controlled value; animates the label when changed externally                                    |\n| `secureTextEntry` | `boolean`                 | `false` | Hides input text (password field); also sets `textContentType` and `autoComplete` automatically |\n| `errorMessage`    | `string`                  | —       | Error text rendered below the input and announced by screen readers                             |\n| `helperText`      | `string`                  | —       | Helper text rendered below the input and announced by screen readers                            |\n| `password`        | `boolean`                 | —       | **Deprecated** — use `secureTextEntry` instead                                                  |\n| `myRef`           | `React.Ref\u003cTextInput\u003e`    | —       | **Deprecated** — use the standard `ref` prop instead                                            |\n\n### `FloatingLabelHandle` (ref)\n\n| Method    | Description                                                               |\n| --------- | ------------------------------------------------------------------------- |\n| `focus()` | Focuses the input                                                         |\n| `blur()`  | Blurs the input                                                           |\n| `clear()` | Clears the input text and animates the label back to its resting position |\n\n---\n\n## Accessibility\n\n`react-native-floating-labels` is designed to work correctly with screen readers (VoiceOver on iOS, TalkBack on Android) and meets WCAG 2.1/2.2 AA, Section 508, and the React Native accessibility model out of the box — with no extra configuration required for common cases.\n\n### Label association (accessibilityLabel)\n\nThe component automatically derives `accessibilityLabel` from the `children` string so screen readers announce the label when the input is focused.\n\n```tsx\n// Screen readers announce \"Email\" when this input receives focus\n\u003cFloatingLabel\u003eEmail\u003c/FloatingLabel\u003e\n```\n\nOverride it by passing `accessibilityLabel` explicitly:\n\n```tsx\n\u003cFloatingLabel accessibilityLabel=\"Your email address\"\u003eEmail\u003c/FloatingLabel\u003e\n```\n\nOn web (react-native-web), `accessibilityLabel` is mapped to `aria-label` automatically.\n\n### Disabled state\n\nWhen `disabled={true}` is passed, the component automatically sets `accessibilityState={{ disabled: true }}` on the input so screen readers announce it as unavailable.\n\n```tsx\n\u003cFloatingLabel disabled\u003eEmail\u003c/FloatingLabel\u003e\n```\n\nOverride or extend `accessibilityState` as needed — your values take precedence:\n\n```tsx\n\u003cFloatingLabel disabled accessibilityState={{disabled: false, selected: true}}\u003e\n  Email\n\u003c/FloatingLabel\u003e\n```\n\n### Password fields\n\nWhen `secureTextEntry={true}` is passed, the component automatically sets:\n\n- `textContentType=\"password\"` (iOS) — enables password autofill and correct VoiceOver announcement\n- `autoComplete=\"password\"` (Android/web) — enables password autofill\n\n```tsx\n\u003cFloatingLabel secureTextEntry\u003ePassword\u003c/FloatingLabel\u003e\n```\n\nOverride when you need a more specific value (e.g. for a new password field):\n\n```tsx\n\u003cFloatingLabel secureTextEntry textContentType=\"newPassword\" autoComplete=\"new-password\"\u003e\n  New Password\n\u003c/FloatingLabel\u003e\n```\n\nAdd an `accessibilityHint` to give users extra context:\n\n```tsx\n\u003cFloatingLabel secureTextEntry accessibilityHint=\"Must be at least 8 characters\"\u003e\n  Password\n\u003c/FloatingLabel\u003e\n```\n\n### Error messages\n\nPass `errorMessage` to render error text below the input. It is announced by screen readers whenever the value changes (via `accessibilityLiveRegion=\"polite\"`).\n\n```tsx\nconst [error, setError] = React.useState('');\n\n\u003cFloatingLabel value={email} onChangeText={setEmail} errorMessage={error}\u003e\n  Email\n\u003c/FloatingLabel\u003e;\n```\n\n### Helper text\n\nPass `helperText` to render supplementary guidance below the input. Like `errorMessage`, it uses `accessibilityLiveRegion=\"polite\"` for dynamic announcements.\n\n```tsx\n\u003cFloatingLabel helperText=\"We'll never share your email\"\u003eEmail\u003c/FloatingLabel\u003e\n```\n\n### Focus indicators\n\nThe component does not enforce focus styles — this keeps it flexible for any design system. To implement a WCAG 2.2-compliant visible focus indicator, use `onFocus`/`onBlur` with `inputStyle`:\n\n```tsx\nconst [focused, setFocused] = React.useState(false);\n\n\u003cFloatingLabel\n  inputStyle={focused ? {borderColor: '#0057b8', borderWidth: 2} : undefined}\n  onFocus={() =\u003e setFocused(true)}\n  onBlur={() =\u003e setFocused(false)}\n\u003e\n  Email\n\u003c/FloatingLabel\u003e;\n```\n\nWCAG 2.2 requires the focus indicator to have a contrast ratio of at least 3:1 against adjacent colors.\n\n### Touch target size\n\nApple and Google both recommend a minimum touch target of **44×44dp**. The component's default height is 40dp. To meet the recommendation, set `style` on the container:\n\n```tsx\n\u003cFloatingLabel style={{minHeight: 44}}\u003eEmail\u003c/FloatingLabel\u003e\n```\n\n### Screen reader testing checklist\n\nBefore shipping, verify the following manually with screen readers enabled:\n\n**iOS — VoiceOver** (`Settings → Accessibility → VoiceOver`):\n\n- [ ] Focusing the input announces the label text\n- [ ] A disabled input is announced as \"dimmed\" or \"unavailable\"\n- [ ] A password input is announced as a \"secure text field\"\n- [ ] Error messages are announced when they appear\n- [ ] Helper text is readable when navigating to the input\n\n**Android — TalkBack** (`Settings → Accessibility → TalkBack`):\n\n- [ ] Focusing the input announces the label text\n- [ ] A disabled input is announced as \"disabled\"\n- [ ] A password input is announced as a password field\n- [ ] Error messages are announced when they appear\n- [ ] Helper text is readable when navigating to the input\n\n---\n\n## Testing locally with a React Native app\n\nThe quickest way to test the library end-to-end against a real device or simulator before publishing.\n\n### 1. Create a test app\n\n**Expo (recommended — no Xcode/Android Studio required for quick tests):**\n\n```bash\nnpx create-expo-app@latest FloatingLabelsTest\ncd FloatingLabelsTest\n```\n\n**Bare React Native:**\n\n```bash\nnpx @react-native-community/cli init FloatingLabelsTest\ncd FloatingLabelsTest\n```\n\n### 2. Pack the library\n\nRun this from the library root. It produces a tarball (e.g. `react-native-floating-labels-2.0.0.tgz`) that mirrors exactly what gets published to npm:\n\n```bash\nnpm run build\nnpm pack\n```\n\n### 3. Install the tarball in the test app\n\n```bash\nnpm install /path/to/react-native-floating-labels-2.0.0.tgz\n```\n\nFor Expo, no additional linking is required. For bare React Native, run `npx pod-install` on iOS.\n\n### 4. Use it in the app\n\nReplace the contents of `App.tsx` (or `App.js`) with:\n\n```tsx\nimport React, {useRef} from 'react';\nimport {Button, SafeAreaView, StyleSheet} from 'react-native';\nimport FloatingLabel, {FloatingLabelHandle} from 'react-native-floating-labels';\n\nexport default function App() {\n  const ref = useRef\u003cFloatingLabelHandle\u003e(null);\n\n  return (\n    \u003cSafeAreaView style={styles.container}\u003e\n      \u003cFloatingLabel style={styles.field}\u003eFirst Name\u003c/FloatingLabel\u003e\n      \u003cFloatingLabel style={styles.field} secureTextEntry\u003e\n        Password\n      \u003c/FloatingLabel\u003e\n      \u003cFloatingLabel ref={ref} style={styles.field}\u003e\n        Ref-controlled field\n      \u003c/FloatingLabel\u003e\n      \u003cButton title=\"Clear via ref\" onPress={() =\u003e ref.current?.clear()} /\u003e\n    \u003c/SafeAreaView\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {flex: 1, padding: 24, backgroundColor: '#fff'},\n  field: {marginBottom: 16},\n});\n```\n\n### 5. Start the app\n\n```bash\n# Expo\nnpx expo start\n\n# Bare React Native — iOS\nnpx react-native run-ios\n\n# Bare React Native — Android\nnpx react-native run-android\n```\n\n### Testing the beta release from npm\n\nIf you want to test the published beta instead of a local tarball:\n\n```bash\nnpm install react-native-floating-labels@beta\n```\n\n---\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for the development workflow, Conventional Commits format, and release process.\n\n---\n\n**MIT Licensed**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayank-patel%2Freact-native-floating-labels","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmayank-patel%2Freact-native-floating-labels","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayank-patel%2Freact-native-floating-labels/lists"}