Skip to content

support preferredDatePickerStyle in iOS 14 #211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Aug 10, 2020
Merged

support preferredDatePickerStyle in iOS 14 #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
430efc7
Add appearance iOS-only prop to JS
SConaway Jul 3, 2020
e2ccacf
and something for iOS
SConaway Jul 3, 2020
7d6c2aa
support ios 14
vonovak Aug 9, 2020
66ba863
fix lint
vonovak Aug 9, 2020
664b1b8
self-review 1
vonovak Aug 9, 2020
0e0f52d
add docs
vonovak Aug 9, 2020
145e625
improve docs
vonovak Aug 9, 2020
6db9622
do not measure views, extend RCTConvert
vonovak Aug 9, 2020
0fd30bc
fix comment
vonovak Aug 9, 2020
c30d480
improve comment
vonovak Aug 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 13 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ React Native date & time picker component for iOS, Android and Windows.
- [Basic usage with state](#basic-usage-with-state)
- [Props](#props)
- [`mode` (`optional`)](#mode-optional)
- [`display` (`optional`, `Android only`)](#display-optional-android-only)
- [`display` (`optional`)](#display-optional)
- [`onChange` (`optional`)](#onchange-optional)
- [`value` (`required`)](#value-required)
- [`maximumDate` (`optional`)](#maximumdate-optional)
Expand Down Expand Up @@ -69,7 +69,7 @@ React Native date & time picker component for iOS, Android and Windows.

## Requirements

- Xcode >= 10
- Xcode >= 11

## Expo users notice

Expand Down Expand Up @@ -192,17 +192,24 @@ List of possible values:
<RNDateTimePicker mode="time" />
```

#### `display` (`optional`, `Android only`)
#### `display` (`optional`)

Defines the visual display of the picker for Android and will be ignored for iOS.
Defines the visual display of the picker. The default value is `"default"`.

List of possible values:
List of possible values for Android

- `"default"` - Show a default date picker (spinner/calendar/clock) based on `mode` and android version.
- `"default"` - Show a default date picker (spinner/calendar/clock) based on `mode` and Android version.
- `"spinner"`
- `"calendar"` (only for `date` mode)
- `"clock"` (only for `time` mode)

List of possible values for iOS (maps to [preferredDatePickerStyle](https://developer.apple.com/documentation/uikit/uidatepicker/3526124-preferreddatepickerstyle?changes=latest_minor&language=objc))

- `"default"` - Automatically pick the best style available for the current platform & mode.
- `"spinner"` - the usual appearance with a wheel from which you choose values
- `"compact"` - Affects only iOS 14 and later. Will fall back to "spinner" if not supported.
- `"inline"` - Affects only iOS 14 and later. Will fall back to "spinner" if not supported.

```js
<RNDateTimePicker display="spinner" />
```
Expand Down
147 changes: 61 additions & 86 deletions example/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,18 @@ import {
useColorScheme,
} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import SegmentedControl from '@react-native-community/segmented-control';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import React, {useState} from 'react';
import {Picker} from 'react-native-windows';
import moment from 'moment';
import {DAY_OF_WEEK} from '../src/constants';
import {
ANDROID_MODE,
DAY_OF_WEEK,
IOS_MODE,
ANDROID_DISPLAY,
IOS_DISPLAY,
} from '../src/constants';

const ThemedText = (props) => {
const isDarkMode = useColorScheme() === 'dark';
Expand All @@ -28,19 +35,28 @@ const ThemedText = (props) => {
});
};

const MODE_VALUES = Platform.select({
ios: Object.values(IOS_MODE),
android: Object.values(ANDROID_MODE),
});
const DISPLAY_VALUES = Platform.select({
ios: Object.values(IOS_DISPLAY),
android: Object.values(ANDROID_DISPLAY),
});
const MINUTE_INTERVALS = [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30];

export const App = () => {
const [date, setDate] = useState(new Date(1598051730000));
const [time, setTime] = useState(undefined);
const [mode, setMode] = useState('date');
const [mode, setMode] = useState(MODE_VALUES[0]);
const [show, setShow] = useState(false);
const [color, setColor] = useState();
const [display, setDisplay] = useState('default');
const [interval, setMinInterval] = useState(undefined);
const [minuteInterval, setMinuteInterval] = useState(1);
const [display, setDisplay] = useState(DISPLAY_VALUES[0]);
const [interval, setMinInterval] = useState(1);

// Windows-specific
const maxDate = useState(new Date('2021'));
const minDate = useState(new Date('2018'));
const [time, setTime] = useState(undefined);
const [maxDate, setMinDate] = useState(new Date('2021'));
const [minDate, setMaxDate] = useState(new Date('2018'));
const [is24Hours, set24Hours] = useState(false);
const [firstDayOfWeek, setFirstDayOfWeek] = useState(DAY_OF_WEEK.Monday);
const [dateFormat, setDateFormat] = useState('longdate');
Expand All @@ -65,43 +81,6 @@ export const App = () => {
}
};

const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};

const showDatepicker = () => {
showMode('date');
setDisplay('default');
};

const showDatepickerSpinner = () => {
showMode('date');
setDisplay('spinner');
};

const showTimepicker = () => {
showMode('time');
setDisplay('default');
};

const showTimepickerSpinner = () => {
showMode('time');
setDisplay('spinner');
};

const showTimepickerClockModeWithInterval = () => {
showMode('time');
setMinInterval(5);
setDisplay('clock');
};

const showTimepickerSpinnerWithInterval = () => {
showMode('time');
setMinInterval(5);
setDisplay('spinner');
};

const isDarkMode = useColorScheme() === 'dark';

const backgroundStyle = {
Expand Down Expand Up @@ -130,6 +109,34 @@ export const App = () => {
Example DateTime Picker
</ThemedText>
</View>
<ThemedText>mode prop:</ThemedText>
<SegmentedControl
values={MODE_VALUES}
selectedIndex={MODE_VALUES.indexOf(mode)}
onChange={(event) => {
setMode(MODE_VALUES[event.nativeEvent.selectedSegmentIndex]);
}}
/>
<ThemedText>display prop:</ThemedText>
<SegmentedControl
values={DISPLAY_VALUES}
selectedIndex={DISPLAY_VALUES.indexOf(display)}
onChange={(event) => {
setDisplay(
DISPLAY_VALUES[event.nativeEvent.selectedSegmentIndex],
);
}}
/>
<ThemedText>minute interval prop:</ThemedText>
<SegmentedControl
values={MINUTE_INTERVALS.map(String)}
selectedIndex={MINUTE_INTERVALS.indexOf(interval)}
onChange={(event) => {
setMinInterval(
MINUTE_INTERVALS[event.nativeEvent.selectedSegmentIndex],
);
}}
/>
<View style={styles.header}>
<ThemedText style={{margin: 10, flex: 1}}>
text color (iOS only)
Expand All @@ -145,46 +152,14 @@ export const App = () => {
</View>
<View style={styles.button}>
<Button
testID="datePickerButton"
onPress={showDatepicker}
title="Show date picker default!"
/>
</View>
<View style={styles.button}>
<Button
testID="datePickerButtonSpinner"
onPress={showDatepickerSpinner}
title="Show date picker spinner!"
/>
</View>
<View style={styles.button}>
<Button
testID="timePickerButton"
onPress={showTimepicker}
title="Show time picker!"
/>
</View>
<View style={styles.button}>
<Button
testID="timePickerButtonSpinner"
onPress={showTimepickerSpinner}
title="Show time picker spinner!"
/>
</View>
<View style={styles.button}>
<Button
testID="timePickerDefaultIntervalButton"
onPress={showTimepickerClockModeWithInterval}
title="Show time picker as clock (with 5 min interval)!"
/>
</View>
<View style={styles.button}>
<Button
testID="timePickerSpinnerIntervalButton"
onPress={showTimepickerSpinnerWithInterval}
title="Show time picker as spinner (with 5 min interval)!"
testID="showPickerButton"
onPress={() => {
setShow(true);
}}
title="Show picker!"
/>
</View>

<View style={styles.header}>
<ThemedText testID="dateText" style={styles.dateTimeText}>
{moment.utc(date).format('MM/DD/YYYY')}
Expand Down Expand Up @@ -336,8 +311,8 @@ export const App = () => {
<Text style={{padding: 10}}>Minute interval: </Text>
<Picker
style={{width: 200, height: 35}}
selectedValue={minuteInterval}
onValueChange={(value) => setMinuteInterval(value)}>
selectedValue={interval}
onValueChange={(value) => setMinInterval(value)}>
<Picker.Item label="1 minute step" value={1} />
<Picker.Item label="12 minute step" value={12} />
<Picker.Item label="15 minute step" value={15} />
Expand All @@ -350,7 +325,7 @@ export const App = () => {
style={{width: 300, opacity: 1, height: 30, marginTop: 50}}
onChange={onTimeChange}
is24Hour={is24Hours}
minuteInterval={minuteInterval}
minuteInterval={interval}
/>
<View style={styles.header}>
<Text style={styles.dateTimeText}>
Expand Down
Loading