React Native Edit Fields

• Built With

• Pending Items

• Getting Started

• Example Code

• Changelog

Built With

• TypeScript - Programming Language
• React Native - Mobile (iOS/Android) Framework
• React Native Modal - Modal
• React Native Datetime Picker - Native Date/Time Picker
• React Hooks - Functional Component State/Lifecycle Methods
• 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):

// 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 (
    <SafeAreaView style={{ display: 'flex', flex: 1 }}>
      <EditTextField
        title="Text"
        currentValue={'Current Text'}
        newValue={(text: string | number) => console.log(text)}
      />

      <EditDateField
        title="Date"
        mode="spinner"
        currentValue={new Date()}
        newValue={(newDate: Date) => console.log(newDate)}
      />

      <EditDateTimeField
        title="Date/Time"
        currentValue={new Date()}
        newValue={(newDate: Date) => console.log(newDate)}
      />

      <EditTimeField
        title="Time"
        mode="spinner"
        currentValue={new Date()}
        newValue={(newDate: Date) => console.log(newDate)}
      />

      <EditStateField
        title="State"
        currentValue={'CA'}
        newValue={(state: string) => console.log(state)}
      />

      <EditListField
        title="List"
        items={items}
        currentValue={'1'}
        newValue={(item: any) => console.log(item)}
      />

      <EditDateRangeField
        toTitle="To Date"
        fromTitle="From Date"
        currentToValue={new Date()}
        newToValue={(date: Date) => console.log(date)}
        currentFromValue={new Date()}
        newFromValue={(date: Date) => console.log(date)}
        mode="spinner"
      />
    </SafeAreaView>
  )
};

// Exports
export default App;

Changelog

[0.0.3] - 2/7/2020

Changed

• Increased pickerHeaderContainer height to 45px.