node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

react-native-periodic

npm version

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

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 git@github.com: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

daily

Weekly

weekly

Monthly

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