Confirm Button is missing in DateTimePicker spinner using iOS newer versions

[JSantangelo-Octopus]

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

• [X] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Steps to reproduce

1. Implements a DateTimePicker

2. Deploy the app on AppStore

3. 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)

https://github.com/wix/react-native-ui-lib/assets/104790946/9423dd81-6bcd-419e-a66c-f024de0619be

Environment

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

Affected platforms

• [ ] Android
• [X] iOS
• [ ] Web

[bsalasA3]

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

[mcalero11]

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]

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

[emprecario]

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]

[mcalero11]

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

[emprecario]

@mcalero11 Here you have my DatePickerHeader component:

[mcalero11]

@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/check-small@1.5x.png b/node_modules/react-native-ui-lib/src/assets/icons/check-small@1.5x.png
deleted file mode 100644
index 902f55c..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check-small@1.5x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png b/node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png
deleted file mode 100644
index 8346c27..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png b/node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png
deleted file mode 100644
index c43c034..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/check@4x.png b/node_modules/react-native-ui-lib/src/assets/icons/check@4x.png
deleted file mode 100644
index 5495134..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check@4x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/minusSmall@1.5x.png b/node_modules/react-native-ui-lib/src/assets/icons/minusSmall@1.5x.png
deleted file mode 100644
index a1b0d0e..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/minusSmall@1.5x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/minusSmall@4x.png b/node_modules/react-native-ui-lib/src/assets/icons/minusSmall@4x.png
deleted file mode 100644
index 62ef8d1..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/minusSmall@4x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/plusSmall@1.5x.png b/node_modules/react-native-ui-lib/src/assets/icons/plusSmall@1.5x.png
deleted file mode 100644
index f9b22af..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/plusSmall@1.5x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/plusSmall@4x.png b/node_modules/react-native-ui-lib/src/assets/icons/plusSmall@4x.png
deleted file mode 100644
index 1288bb4..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/plusSmall@4x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/search@1.5x.png b/node_modules/react-native-ui-lib/src/assets/icons/search@1.5x.png
deleted file mode 100644
index ebc5f85..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/search@1.5x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/search@4x.png b/node_modules/react-native-ui-lib/src/assets/icons/search@4x.png
deleted file mode 100644
index 2dd5199..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/search@4x.png and /dev/null differ

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

And now works

[JSantangelo-Octopus]

@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]

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

[janoslc]

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/check-small@1.5x.png
• node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png
• node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png
• node_modules/react-native-ui-lib/src/assets/icons/check@4x.png

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/check-small@1.5x.png b/node_modules/react-native-ui-lib/src/assets/icons/check-small@1.5x.png
deleted file mode 100644
index 902f55c..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check-small@1.5x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png b/node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png
deleted file mode 100644
index 8346c27..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png b/node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png
deleted file mode 100644
index c43c034..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/check@4x.png b/node_modules/react-native-ui-lib/src/assets/icons/check@4x.png
deleted file mode 100644
index 5495134..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check@4x.png and /dev/null differ

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

[SupriyaPKalghatgi]

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

[Inbal-Tish]

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]

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

[janoslc]

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]

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

[SupriyaPKalghatgi]

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/check-small@1.5x.png
• node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png
• node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png
• node_modules/react-native-ui-lib/src/assets/icons/check@4x.png

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/check-small@1.5x.png b/node_modules/react-native-ui-lib/src/assets/icons/check-small@1.5x.png
deleted file mode 100644
index 902f55c..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check-small@1.5x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png b/node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png
deleted file mode 100644
index 8346c27..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check-small@4x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png b/node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png
deleted file mode 100644
index c43c034..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check@1.5x.png and /dev/null differ
diff --git a/node_modules/react-native-ui-lib/src/assets/icons/check@4x.png b/node_modules/react-native-ui-lib/src/assets/icons/check@4x.png
deleted file mode 100644
index 5495134..0000000
Binary files a/node_modules/react-native-ui-lib/src/assets/icons/check@4x.png 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]

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

[SupriyaPKalghatgi]

@janoslc It did not work for me

[SupriyaPKalghatgi]

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

[upalatucci]

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