diff --git a/.circleci/config.yml b/.circleci/config.yml
index c4fdfb29..3461cf85 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -76,6 +76,7 @@ jobs:
- android/create-avd:
avd-name: TestingAVD
system-image: system-images;android-29;default;x86
+ additional-args: --device "pixel_4_xl"
install: true
- android/start-emulator:
avd-name: TestingAVD
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 05199c0e..ec37c41f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -34,6 +34,7 @@ For cleaning all the detox builds just run `npm run detox:clean`.
```sh
# Debug requires to run Metro Bundler
yarn start
+ cd "example/ios" && npx pod-install && cd -
yarn detox:ios:build:debug
yarn detox:ios:test:debug
```
diff --git a/README.md b/README.md
index d4b80043..7c8a0929 100644
--- a/README.md
+++ b/README.md
@@ -72,6 +72,7 @@ React Native date & time picker component for iOS, Android and Windows.
- [`dateFormat` (`optional`, `Windows only`)](#dateFormat-optional-windows-only)
- [`firstDayOfWeek` (`optional`, `Windows only`)](#firstDayOfWeek-optional-windows-only)
- [`textColor` (`optional`, `iOS only`)](#textColor-optional-ios-only)
+ - [`accentColor` (`optional`, `iOS only`)](#accentColor-optional-ios-only)
- [`themeVariant` (`optional`, `iOS only`)](#themevariant-optional-ios-only)
- [`locale` (`optional`, `iOS only`)](#locale-optional-ios-only)
- [`is24Hour` (`optional`, `Windows and Android only`)](#is24hour-optional-windows-and-android-only)
@@ -389,6 +390,11 @@ Allows changing of the textColor of the date picker. Has effect only when `displ
```
+#### `accentColor` (`optional`, `iOS only`)
+
+Allows changing the accentColor (tintColor) of the date picker.
+Has no effect when `display` is `"spinner"`.
+
#### `themeVariant` (`optional`, `iOS only`)
Allows overriding system theme variant (dark or light mode) used by the date picker.
diff --git a/example/App.js b/example/App.js
index c17ab431..5ed5eab8 100644
--- a/example/App.js
+++ b/example/App.js
@@ -14,7 +14,7 @@ import {
import DateTimePicker from '@react-native-community/datetimepicker';
import SegmentedControl from '@react-native-segmented-control/segmented-control';
import {Colors} from 'react-native/Libraries/NewAppScreen';
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
import {Picker} from 'react-native-windows';
import moment from 'moment';
import {
@@ -43,7 +43,7 @@ const ThemedTextInput = (props) => {
const TextElement = React.createElement(TextInput, props);
return React.cloneElement(TextElement, {
- style: [props.style, textColorByMode],
+ style: [props.style, styles.textInput, textColorByMode],
placeholderTextColor: isDarkMode ? Colors.white : Colors.black,
});
};
@@ -68,7 +68,8 @@ export const App = () => {
const [tzOffsetInMinutes, setTzOffsetInMinutes] = useState(undefined);
const [mode, setMode] = useState(MODE_VALUES[0]);
const [show, setShow] = useState(false);
- const [color, setColor] = useState();
+ const [textColor, setTextColor] = useState();
+ const [accentColor, setAccentColor] = useState();
const [display, setDisplay] = useState(DISPLAY_VALUES[0]);
const [interval, setMinInterval] = useState(1);
const [neutralButtonLabel, setNeutralButtonLabel] = useState(undefined);
@@ -87,6 +88,8 @@ export const App = () => {
'{dayofweek.abbreviated(2)}',
);
+ const scrollRef = useRef(null);
+
const handleResetPress = () => {
setDate(undefined);
};
@@ -131,7 +134,14 @@ export const App = () => {
return (
-
+ {
+ if (Platform.OS === 'ios') {
+ scrollRef.current?.scrollToEnd({animated: true});
+ }
+ }}>
{global.HermesInternal != null && (
@@ -183,38 +193,48 @@ export const App = () => {
}}
/>
-
+
text color (iOS only)
{
- setColor(text.toLowerCase());
+ setTextColor(text.toLowerCase());
}}
- placeholder="color"
+ placeholder="textColor"
/>
-
+
+ accent color (iOS only)
+
+ {
+ setAccentColor(text.toLowerCase());
+ }}
+ placeholder="accentColor"
+ />
+
+
+
disabled (iOS only)
-
+
neutralButtonLabel (android only)
-
+
[android] show and dismiss picker after 3 secs
@@ -306,7 +326,8 @@ export const App = () => {
display={display}
onChange={onChange}
style={styles.iOsPicker}
- textColor={color || undefined}
+ textColor={textColor || undefined}
+ accentColor={accentColor || undefined}
neutralButtonLabel={neutralButtonLabel}
disabled={disabled}
/>
@@ -502,6 +523,14 @@ const styles = StyleSheet.create({
alignItems: 'center',
flexDirection: 'row',
},
+ textLabel: {
+ margin: 10,
+ flex: 1,
+ },
+ textInput: {
+ height: 60,
+ flex: 1,
+ },
button: {
alignItems: 'center',
marginBottom: 10,
diff --git a/ios/RNDateTimePickerManager.m b/ios/RNDateTimePickerManager.m
index 84a73f8b..fe6b5860 100644
--- a/ios/RNDateTimePickerManager.m
+++ b/ios/RNDateTimePickerManager.m
@@ -141,6 +141,19 @@ + (NSString*) datepickerStyleToString: (UIDatePickerStyle) style API_AVAILABLE(
}
}
+RCT_CUSTOM_VIEW_PROPERTY(accentColor, UIColor, RNDateTimePicker)
+{
+ if (json) {
+ [view setTintColor:[RCTConvert UIColor:json]];
+ } else {
+ if (@available(iOS 15.0, *)) {
+ [view setTintColor:[UIColor tintColor]];
+ } else {
+ [view setTintColor:[UIColor systemBlueColor]];
+ }
+ }
+}
+
// TODO vonovak setting preferredDatePickerStyle invalidates minuteinterval
RCT_CUSTOM_VIEW_PROPERTY(displayIOS, RNCUIDatePickerStyle, RNDateTimePicker)
{
diff --git a/package.json b/package.json
index 595853d9..6beb3196 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,7 @@
"build": "export RCT_NO_LAUNCH_PACKAGER=true && (cd example/android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug)",
"type": "android.emulator",
"device": {
- "avdName": "Pixel_4_Android_12_api_31"
+ "avdName": "Pixel_5_Android_12_api_31"
}
},
"android.device.debug": {
diff --git a/src/datetimepicker.ios.js b/src/datetimepicker.ios.js
index 41d7ddfe..eb5c9560 100644
--- a/src/datetimepicker.ios.js
+++ b/src/datetimepicker.ios.js
@@ -52,6 +52,7 @@ export default function Picker({
minuteInterval,
timeZoneOffsetInMinutes,
textColor,
+ accentColor,
themeVariant,
onChange,
mode = ANDROID_MODE.date,
@@ -126,6 +127,7 @@ export default function Picker({
timeZoneOffsetInMinutes={timeZoneOffsetInMinutes}
onChange={_onChange}
textColor={textColor}
+ accentColor={accentColor}
themeVariant={themeVariant}
onStartShouldSetResponder={() => true}
onResponderTerminationRequest={() => false}
diff --git a/src/index.d.ts b/src/index.d.ts
index 4ea155da..c1f14416 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -98,6 +98,14 @@ export type IOSNativeProps = Readonly<
*/
textColor?: string;
+ /**
+ * The date picker accent color.
+ *
+ * Sets the color of the selected, date and navigation icons.
+ * Has no effect for display 'spinner'.
+ */
+ accentColor?: string;
+
/**
* Override theme variant used by iOS native picker
*/
diff --git a/src/types.js b/src/types.js
index 9197922b..32620ef8 100644
--- a/src/types.js
+++ b/src/types.js
@@ -119,6 +119,14 @@ export type IOSNativeProps = $ReadOnly<{|
*/
textColor?: ?ColorValue,
+ /**
+ * The date picker accent color.
+ *
+ * Sets the color of the selected, date and navigation icons.
+ * Has no effect for display 'spinner'.
+ */
+ accentColor?: ?ColorValue,
+
/**
* Override theme variant used by iOS native picker
*/