Confirm Button is missing in DateTimePicker spinner using iOS newer versions

JSantangelo-Octopus commented 7 months ago

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

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)

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 commented 7 months ago

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

mcalero11 commented 7 months ago

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 commented 6 months ago

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

emprecario commented 6 months ago

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 commented 6 months ago

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

mcalero11 commented 6 months ago

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

emprecario commented 6 months ago

@mcalero11 Here you have my DatePickerHeader component:

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

mcalero11 commented 6 months ago

@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 commented 6 months ago

@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 commented 6 months ago

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

janoslc commented 6 months ago

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 commented 5 months ago

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

Inbal-Tish commented 5 months ago

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 commented 5 months ago

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

janoslc commented 5 months ago

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 commented 5 months ago

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

SupriyaPKalghatgi commented 5 months ago

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 commented 5 months ago

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

SupriyaPKalghatgi commented 5 months ago

@janoslc It did not work for me

SupriyaPKalghatgi commented 5 months ago

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

upalatucci commented 5 months ago

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

bsalasA3 commented 1 month ago

I added some props to the DateTimePicker component and it works :)

wix / react-native-ui-lib