🕐🕑🕒📆 Form inputs for periodic or recurring times – daily, weekly, or monthly at a chosen time
<Periodic>
– 🕐🕑🕒📆 Form inputs for periodic or recurring times – daily, weekly, or monthly at a chosen time
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!
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:
<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.
react-native-radio-buttons
react-native-multiple-choice