https://github.com/jefelewis/react-native-edit-fields
npm Link: https://www.npmjs.com/package/react-native-edit-fields
https://github.com/jefelewis/react-native-edit-fields
moment npm-package react-native-modal typescript
Last synced: about 2 months ago
JSON representation
npm Link: https://www.npmjs.com/package/react-native-edit-fields
- Host: GitHub
- URL: https://github.com/jefelewis/react-native-edit-fields
- Owner: jefelewis
- License: mit
- Created: 2020-02-06T19:30:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T06:39:20.000Z (over 2 years ago)
- Last Synced: 2024-03-24T18:21:35.946Z (about 1 year ago)
- Topics: moment, npm-package, react-native-modal, typescript
- Language: TypeScript
- Homepage:
- Size: 1.05 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Edit Fields
[](https://badge.fury.io/js/react-native-edit-fields)
[](https://www.npmjs.com/package/react-native-edit-fields)
* [Built With](#built-with)
* [Pending Items](#pending-items)
* [Getting Started](#getting-started)
* [Example Code](#example-code)
* [Changelog](#changelog)
## Built With
* [TypeScript](https://github.com/microsoft/TypeScript) - Programming Language
* [React Native](https://facebook.github.io/react-native/) - Mobile (iOS/Android) Framework
* [React Native Modal](https://github.com/react-native-community/react-native-modal) - Modal
* [React Native Datetime Picker](https://github.com/react-native-community/react-native-datetimepicker) - Native Date/Time Picker
* [React Hooks](https://reactjs.org/docs/hooks-intro.html) - Functional Component State/Lifecycle Methods
* [Moment](https://github.com/moment/moment) - Date/Time Formatting
## Pending Items
## Getting Started
**1. Install Package:**
```
npm i react-native-edit-fields
```
**2. Add Pod (For iOS)**
Add the following line to ios/podfile:
```
pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec'
```
**3. Install Pods (For iOS)**
```
cd ios
pod install
```
**4. Add Dependencies (For Android)**
Add the following lines to android/settings.gradle:
```
include ':react-native-datetimepicker'
project(':react-native-datetimepicker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/datetimepicker/android')
```
Add the following line to android/app/build.gradle:
```
dependencies {
...
implementation project(':react-native-datetimepicker')
}
```
**5. Run Project:**
```
react-native run-ios
```
## Example Code
**Functional Component (Using React Hooks):**
```javascript
// Imports: Dependencies
import React from 'react';
import { SafeAreaView } from 'react-native';
// Imports: Components
import {
EditTextField,
EditDateField,
EditDateTimeField,
EditTimeField,
EditDateRangeField,
EditStateField,
EditListField,
} from 'react-native-edit-fields';
// React Native App
const App = () => {
// Test Data
const items: any = [
{ label: '1', value: '1' },
{ label: '2', value: '2' },
{ label: '3', value: '3' },
{ label: '4', value: '4' },
{ label: '5', value: '5' },
{ label: '6', value: '6' },
{ label: '7', value: '7' },
{ label: '8', value: '8' },
{ label: '9', value: '9' },
{ label: '10', value: '10' }
];
return (
console.log(text)}
/>
console.log(newDate)}
/>
console.log(newDate)}
/>
console.log(newDate)}
/>
console.log(state)}
/>
console.log(item)}
/>
console.log(date)}
currentFromValue={new Date()}
newFromValue={(date: Date) => console.log(date)}
mode="spinner"
/>
)
};
// Exports
export default App;
```
## Changelog
### [0.0.3] - 2/7/2020
***Changed***
- Increased `pickerHeaderContainer` height to 45px.