<Periodic> – 🕐🕑🕒📆 Form inputs for periodic or recurring times – daily, weekly, or monthly at a chosen time

• UI
  • Demo
  • Daily
  • Weekly
  • Monthly
• Usage
• Credits

UI

A segmented control for daily, weekly, or monthly. Weekdays are multi-select, day of month is a Picker, and time is a DatePickerIOS (the only iOS component - if you want an Android version, let me know). If you need anything to be more customizable, send me a PR!

Demo

git clone [email protected]:lorensr/react-native-periodic.git
cd react-native-periodic
npm i
npm run storybook

open http://localhost:7007/
react-native run-ios

Select an example in the browser and see the demo in the simulator. You may need to refresh to get them started.

Here are some screenshots from the demo:

Daily

Weekly

Monthly

Usage

<Periodic
  ref="periodic"
  initialState={{
    period: 'Weekly',
    date: new Date,
    weekdays: ['Monday', 'Friday']
  }}
  segmentedControl={{
    tint: 'white',
    backTint: 'gray',
  }}
  />
<Button onPress={() => console.log(this.refs.periodic.state)}>
  Submit
</Button>

Only the time part of state.date is used. If state.period is 'Daily', only state.date is used. If it's 'Weekly', state.date and state.weekdays are used. If it's 'Monthly', state.date and state.dayOfMonth is used.

Props are optional:

segmentedControl: PropTypes.object,
initialState: PropTypes.shape({
  period: PropTypes.string,
  date: PropTypes.instanceOf(Date),
  weekdays: PropTypes.arrayOf(PropTypes.string),
  dayOfMonth: PropTypes.string,
})

segmentedControl is passed to the SegmentedControls component as props.

Credits

• Contributions by these fine folks
• Segmented control component from react-native-radio-buttons
• Multiple choice component from react-native-multiple-choice