Confirm Button is missing in DateTimePicker spinner using iOS newer versions #3027

JSantangelo-Octopus · 2024-04-12T15:46:31Z

Description

In iOS, using v 16.0.3 and 17.4.1, confirm icon in DateTimePicker is missing. Its only fails in production, i cant reproduce the error using ExpoGo

Related to

Components
Demo
Docs
Typings

Steps to reproduce

Implements a DateTimePicker
Deploy the app on AppStore
Open the DateTimePicker. The confirm button doesnt exists. This error make impossible to complete the form

Expected behavior

Have the cancel and confirm Buttons in the DateTimePicker component, using spinner display in any iOS version

Actual behavior

When using iOS v 16.0.3 and 17.4.1, the confirm button is missing and the DateTimePicker cannot be confirmed

More Info

Code snippet

import React, {useEffect} from 'react';
import {StyleSheet} from 'react-native';
import {View, DateTimePicker, Colors} from 'react-native-ui-lib';
import dayjs from 'dayjs';

const DatePicker = ({editable = true, ...props}) => {
  useEffect(() => {
    if (props.setInitialDate) {
      props.onChange(new Date());
    }
  }, []);
  let BG_COLOR = Colors.foreground;
  let BORDER_COLOR = Colors.themeSecondary;
  let inputColor = {
    backgroundColor: BG_COLOR,
    borderColor: BORDER_COLOR,
  };

  if (!editable) {
    inputColor.backgroundColor = Colors.disabled;
  }

  return (
    <View>
      <DateTimePicker
        style={{...fieldStyle, ...inputColor}}
        enableErrors={false}
        hideUnderline
        color={Colors.textInputPrimary}
        dateTimeFormatter={val => dayjs(val).format('DD-MM-YY')}
        editable={editable}
        placeholderTextColor={Colors.primary}
        height={45}
        headerStyle={containerStyle}
        {...props}
      />
    </View>
  );
};

const {fieldStyle, containerStyle} = StyleSheet.create({
  fieldStyle: {
    borderWidth: 2,
    borderRadius: 8,
    padding: 8,
    paddingLeft: 16,
  },
  containerStyle: {
    color: Colors.$textDefault,
    backgroundColor: Colors.foreground,
  },
});

export default DatePicker;

Screenshots/Video

(tested in ExpoGo first, and real app later)

WhatsApp.Video.2024-04-09.at.11.27.10.AM.mp4

Environment

React Native version: 0.73.6
React Native UI Lib version: 7.17.0
Expo version : 50.0.15

Affected platforms

Android
iOS
Web

The text was updated successfully, but these errors were encountered:

bsalasA3 · 2024-04-17T17:50:23Z

Same here, but in Expo doesn't appear the button either

mcalero11 · 2024-04-22T15:34:29Z

Same problem

"react-native-ui-lib": "^7.20.3"
"react-native": "0.73.6"
"expo": "^50.0.0"
"react-native-svg": "14.1.0"
"react-native-svg-transformer": "^1.3.0"

mcalero11 · 2024-05-09T16:44:14Z

@JSantangelo-Octopus Were you able to find a solution to this?

emprecario · 2024-05-09T16:49:16Z

Hi , @mcalero11 !! I modified the library component with patch-package to support a prop called renderHeader, and from my project I put icons with expo-icons. `diff --git a/node_modules/react-native-ui-lib/src/components/dateTimePicker/index.js b/node_modules/react-native-ui-lib/src/components/dateTimePicker/index.js
index 5518e3a..018638e 100644
--- a/node_modules/react-native-ui-lib/src/components/dateTimePicker/index.js
+++ b/node_modules/react-native-ui-lib/src/components/dateTimePicker/index.js
@@ -43,6 +43,7 @@ const DateTimePicker = forwardRef((props, ref) => {
headerStyle,
testID,
display = Constants.isIOS ? 'spinner' : undefined,

renderHeader: _renderHeader,
...others
} = props;
const [value, setValue] = useState(propsValue);
@@ -118,6 +119,13 @@ const DateTimePicker = forwardRef((props, ref) => {
}
}, [onDonePressed, toggleExpandableOverlay]);
const renderHeader = () => {
if (_renderHeader) {
```
 return _renderHeader({
```
```
   toggleExpandableOverlay,
```
```
   onDonePressed
```
```
 });
```
}
return <View row spread bg-$backgroundDefault paddingH-20 style={[styles.header, headerStyle]} testID={${testID}.header}>
<Button link iconSource={Assets.icons.x} iconStyle={{
tintColor: Colors.$iconDefault`

----> Component
<DateTimePicker renderHeader={DatePickerHeader} themeVariant="light" renderInput={({value}) => ( <> <TextInput color={Colors.white} readonly value={value} trailingAccessory={dropdownIcon} placeholder="Fecha de concierto" /> </> )} {...field} />

emprecario · 2024-05-09T16:51:06Z

Captura de pantalla 2024-05-09 a las 18 50 43

mcalero11 · 2024-05-09T17:01:21Z

@emprecario I will create the patch, I hope it works

emprecario · 2024-05-09T17:06:58Z

@mcalero11 Here you have my DatePickerHeader component:

Captura de pantalla 2024-05-09 a las 19 06 16

mcalero11 · 2024-05-09T17:59:16Z

@emprecario I liked your approach and thank you for sharing it. However, in the end I used a different solution:

react-native-ui-lib+7.21.2.patch:

diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 902f55c..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 8346c27..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index c43c034..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 5495134..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index a1b0d0e..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 62ef8d1..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index f9b22af..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 1288bb4..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index ebc5f85..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 2dd5199..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ

Basically, I deleted all the assets with prefixes @4x and @1.5x

And now works

JSantangelo-Octopus · 2024-05-10T13:10:28Z

@JSantangelo-Octopus Were you able to find a solution to this?

Hi! Nope, i was working in another project. I will try your patch, thanks!

janoslc · 2024-05-30T01:59:54Z

Hi! I'm interested in this conversation, having the same issue.
@JSantangelo-Octopus did you apply any workaround which works for you?

janoslc · 2024-05-30T03:01:21Z

So I used @mcalero11 's method and it's working. On my end it was enough to remove only these files:

node_modules/react-native-ui-lib/src/assets/icons/[email protected]
node_modules/react-native-ui-lib/src/assets/icons/[email protected]
node_modules/react-native-ui-lib/src/assets/icons/[email protected]
node_modules/react-native-ui-lib/src/assets/icons/[email protected]

Here's the patch source:

Filename: react-native-ui-lib+7.23.2.patch

diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 902f55c..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 8346c27..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index c43c034..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 5495134..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ

"react-native-ui-lib": "^7.23.2"

SupriyaPKalghatgi · 2024-06-20T11:19:18Z

This is still happening in production
@Inbal-Tish @ethanshar Please provide fix

Inbal-Tish · 2024-06-20T11:57:29Z

Hi. I'm having trouble reproducing the issue. Is it an issue with specific iOS versions (16.0.3 and 17.4.1) or a specific react native version (0.73.6)?

SupriyaPKalghatgi · 2024-06-20T12:15:54Z

@Inbal-Tish Thank you for responding
My project has "react-native": "0.74.1"
iOS 17.5

janoslc · 2024-06-20T13:51:30Z

Hey! I suspect it's an iOS version specific bug, but I can't confirm it since I don't have any other iOS device (and it only occurs on physical devices).
iOS 17.5.1
"react-native": "0.74.2"

SupriyaPKalghatgi · 2024-06-21T07:09:04Z

@Inbal-Tish Can you please check this
This is blocking my app release

SupriyaPKalghatgi · 2024-06-21T11:34:04Z

So I used @mcalero11 's method and it's working. On my end it was enough to remove only these files:

node_modules/react-native-ui-lib/src/assets/icons/[email protected]
node_modules/react-native-ui-lib/src/assets/icons/[email protected]
node_modules/react-native-ui-lib/src/assets/icons/[email protected]
node_modules/react-native-ui-lib/src/assets/icons/[email protected]

Here's the patch source:

Filename: react-native-ui-lib+7.23.2.patch

diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 902f55c..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 8346c27..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index c43c034..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] b/node_modules/react-native-ui-lib/src/assets/icons/[email protected]
deleted file mode 100644
index 5495134..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/[email protected] and /dev/null differ

"react-native-ui-lib": "^7.23.2"

@janoslc Deleting those 4 icons fixed the issue for you?
Or you made any additional changes?

janoslc · 2024-06-21T13:15:05Z

I only deleted those icons, as the patch source file says.

SupriyaPKalghatgi · 2024-06-27T08:08:54Z

@janoslc It did not work for me

SupriyaPKalghatgi · 2024-06-27T08:09:46Z

@Inbal-Tish I spent a week trying on multiple things, no success
Can you please take this production level issue into priority

upalatucci · 2024-06-27T09:55:11Z

I tried to remove the icons with rm -rf instead of git as I don't have node_modules versioned. I added the script on "postinstall" command in the package.jsonand it works just fine everytime I install dependencies

JSantangelo-Octopus added the bug a bug in one of the components label Apr 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Confirm Button is missing in DateTimePicker spinner using iOS newer versions #3027

Confirm Button is missing in DateTimePicker spinner using iOS newer versions #3027

JSantangelo-Octopus commented Apr 12, 2024

bsalasA3 commented Apr 17, 2024

mcalero11 commented Apr 22, 2024

mcalero11 commented May 9, 2024

emprecario commented May 9, 2024

emprecario commented May 9, 2024

mcalero11 commented May 9, 2024

emprecario commented May 9, 2024

mcalero11 commented May 9, 2024

JSantangelo-Octopus commented May 10, 2024

janoslc commented May 30, 2024

janoslc commented May 30, 2024 •

edited

Loading

SupriyaPKalghatgi commented Jun 20, 2024

Inbal-Tish commented Jun 20, 2024

SupriyaPKalghatgi commented Jun 20, 2024

janoslc commented Jun 20, 2024

SupriyaPKalghatgi commented Jun 21, 2024

SupriyaPKalghatgi commented Jun 21, 2024

janoslc commented Jun 21, 2024

SupriyaPKalghatgi commented Jun 27, 2024

SupriyaPKalghatgi commented Jun 27, 2024

upalatucci commented Jun 27, 2024

Confirm Button is missing in DateTimePicker spinner using iOS newer versions #3027

Confirm Button is missing in DateTimePicker spinner using iOS newer versions #3027

Comments

JSantangelo-Octopus commented Apr 12, 2024

Description

Related to

Steps to reproduce

Expected behavior

Actual behavior

More Info

Code snippet

Screenshots/Video

Environment

Affected platforms

bsalasA3 commented Apr 17, 2024

mcalero11 commented Apr 22, 2024

mcalero11 commented May 9, 2024

emprecario commented May 9, 2024

emprecario commented May 9, 2024

mcalero11 commented May 9, 2024

emprecario commented May 9, 2024

mcalero11 commented May 9, 2024

JSantangelo-Octopus commented May 10, 2024

janoslc commented May 30, 2024

janoslc commented May 30, 2024 • edited Loading

SupriyaPKalghatgi commented Jun 20, 2024

Inbal-Tish commented Jun 20, 2024

SupriyaPKalghatgi commented Jun 20, 2024

janoslc commented Jun 20, 2024

SupriyaPKalghatgi commented Jun 21, 2024

SupriyaPKalghatgi commented Jun 21, 2024

janoslc commented Jun 21, 2024

SupriyaPKalghatgi commented Jun 27, 2024

SupriyaPKalghatgi commented Jun 27, 2024

upalatucci commented Jun 27, 2024

janoslc commented May 30, 2024 •

edited

Loading