{"id":23384478,"url":"https://github.com/jefelewis/react-native-edit-fields","last_synced_at":"2026-04-24T16:06:23.830Z","repository":{"id":38919060,"uuid":"238767548","full_name":"jefelewis/react-native-edit-fields","owner":"jefelewis","description":"npm Link: https://www.npmjs.com/package/react-native-edit-fields","archived":false,"fork":false,"pushed_at":"2023-01-05T06:39:20.000Z","size":1105,"stargazers_count":1,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-03-24T18:21:35.946Z","etag":null,"topics":["moment","npm-package","react-native-modal","typescript"],"latest_commit_sha":null,"homepage":"","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/jefelewis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-06T19:30:23.000Z","updated_at":"2024-03-13T05:35:17.000Z","dependencies_parsed_at":"2023-02-03T16:01:31.830Z","dependency_job_id":null,"html_url":"https://github.com/jefelewis/react-native-edit-fields","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/jefelewis%2Freact-native-edit-fields","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-edit-fields/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-edit-fields/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-edit-fields/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jefelewis","download_url":"https://codeload.github.com/jefelewis/react-native-edit-fields/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247830633,"owners_count":21003237,"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":["moment","npm-package","react-native-modal","typescript"],"created_at":"2024-12-21T23:27:25.638Z","updated_at":"2026-04-24T16:06:18.783Z","avatar_url":"https://github.com/jefelewis.png","language":"TypeScript","readme":"# React Native Edit Fields\n\n[![npm version](https://badge.fury.io/js/react-native-edit-fields.svg)](https://badge.fury.io/js/react-native-edit-fields)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-edit-fields.svg)](https://www.npmjs.com/package/react-native-edit-fields)\n\n*  [Built With](#built-with)\n*  [Pending Items](#pending-items)\n*  [Getting Started](#getting-started)\n*  [Example Code](#example-code)\n\n*  [Changelog](#changelog)\n\n## Built With\n* [TypeScript](https://github.com/microsoft/TypeScript) - Programming Language\n* [React Native](https://facebook.github.io/react-native/) - Mobile (iOS/Android) Framework\n* [React Native Modal](https://github.com/react-native-community/react-native-modal) - Modal\n* [React Native Datetime Picker](https://github.com/react-native-community/react-native-datetimepicker) - Native Date/Time Picker\n* [React Hooks](https://reactjs.org/docs/hooks-intro.html) - Functional Component State/Lifecycle Methods\n* [Moment](https://github.com/moment/moment) - Date/Time Formatting\n\n## Pending Items\n\n\n## Getting Started\n**1. Install Package:**\n```\nnpm i react-native-edit-fields\n```\n\n**2. Add Pod (For iOS)**\n\nAdd the following line to ios/podfile:\n```\npod 'RNDateTimePicker', :path =\u003e '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec'\n```\n\n**3. Install Pods (For iOS)**\n```\ncd ios\npod install\n```\n\n**4. Add Dependencies (For Android)**\n\nAdd the following lines to android/settings.gradle:\n```\ninclude ':react-native-datetimepicker'\nproject(':react-native-datetimepicker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/datetimepicker/android')\n```\n\nAdd the following line to android/app/build.gradle:\n```\ndependencies {\n  ...\n  implementation project(':react-native-datetimepicker')\n}\n```\n\n**5. Run Project:**\n```\nreact-native run-ios\n```\n\n\n## Example Code\n**Functional Component (Using React Hooks):**\n\n```javascript\n// Imports: Dependencies\nimport React from 'react';\nimport { SafeAreaView } from 'react-native';\n\n// Imports: Components\nimport {\n  EditTextField,\n  EditDateField,\n  EditDateTimeField,\n  EditTimeField,\n  EditDateRangeField,\n  EditStateField,\n  EditListField,\n} from 'react-native-edit-fields';\n\n// React Native App\nconst App = () =\u003e {\n\n  // Test Data\n  const items: any = [\n    { label: '1', value: '1' },\n    { label: '2', value: '2' },\n    { label: '3', value: '3' },\n    { label: '4', value: '4' },\n    { label: '5', value: '5' },\n    { label: '6', value: '6' },\n    { label: '7', value: '7' },\n    { label: '8', value: '8' },\n    { label: '9', value: '9' },\n    { label: '10', value: '10' }\n  ];\n\n  return (\n    \u003cSafeAreaView style={{ display: 'flex', flex: 1 }}\u003e\n      \u003cEditTextField\n        title=\"Text\"\n        currentValue={'Current Text'}\n        newValue={(text: string | number) =\u003e console.log(text)}\n      /\u003e\n\n      \u003cEditDateField\n        title=\"Date\"\n        mode=\"spinner\"\n        currentValue={new Date()}\n        newValue={(newDate: Date) =\u003e console.log(newDate)}\n      /\u003e\n\n      \u003cEditDateTimeField\n        title=\"Date/Time\"\n        currentValue={new Date()}\n        newValue={(newDate: Date) =\u003e console.log(newDate)}\n      /\u003e\n\n      \u003cEditTimeField\n        title=\"Time\"\n        mode=\"spinner\"\n        currentValue={new Date()}\n        newValue={(newDate: Date) =\u003e console.log(newDate)}\n      /\u003e\n\n      \u003cEditStateField\n        title=\"State\"\n        currentValue={'CA'}\n        newValue={(state: string) =\u003e console.log(state)}\n      /\u003e\n\n      \u003cEditListField\n        title=\"List\"\n        items={items}\n        currentValue={'1'}\n        newValue={(item: any) =\u003e console.log(item)}\n      /\u003e\n\n      \u003cEditDateRangeField\n        toTitle=\"To Date\"\n        fromTitle=\"From Date\"\n        currentToValue={new Date()}\n        newToValue={(date: Date) =\u003e console.log(date)}\n        currentFromValue={new Date()}\n        newFromValue={(date: Date) =\u003e console.log(date)}\n        mode=\"spinner\"\n      /\u003e\n    \u003c/SafeAreaView\u003e\n  )\n};\n\n// Exports\nexport default App;\n```\n\n\u003c!-- ## Picker Types (iOS)\n### 1. Date\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"/screenshots/ios/iosDate.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e --\u003e\n\n\u003c!-- ## Picker Types (Android)\n### 1. Date (Mode: Spinner)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"/screenshots/android/androidDateSpinner.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e --\u003e\n\n\n## Changelog\n\n### [0.0.3] - 2/7/2020\n\n***Changed***\n\n- Increased `pickerHeaderContainer` height to 45px.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjefelewis%2Freact-native-edit-fields","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjefelewis%2Freact-native-edit-fields","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjefelewis%2Freact-native-edit-fields/lists"}