Skip to content
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

Jump to bottom

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

Open
2 of 7 tasks
JSantangelo-Octopus opened this issue Apr 12, 2024 · 22 comments
Open
2 of 7 tasks

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

JSantangelo-Octopus opened this issue Apr 12, 2024 · 22 comments
Labels
bug a bug in one of the components

Comments

@JSantangelo-Octopus
Copy link

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

  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)

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
@JSantangelo-Octopus JSantangelo-Octopus added the bug a bug in one of the components label Apr 12, 2024
@bsalasA3
Copy link

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

image

@mcalero11
Copy link

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
Copy link

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

@emprecario
Copy link

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
Copy link

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

@mcalero11
Copy link

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

@emprecario
Copy link

@mcalero11 Here you have my DatePickerHeader component:

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

@mcalero11
Copy link

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

And now works
image

@JSantangelo-Octopus
Copy link
Author

@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
Copy link

janoslc commented May 30, 2024

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

@janoslc
Copy link

janoslc commented May 30, 2024 •
edited
Loading

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

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
Copy link

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

@Inbal-Tish
Copy link
Collaborator

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
Copy link

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

@janoslc
Copy link

janoslc commented Jun 20, 2024

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
Copy link

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

@SupriyaPKalghatgi
Copy link

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

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
Copy link

janoslc commented Jun 21, 2024

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

@SupriyaPKalghatgi
Copy link

@janoslc It did not work for me

@SupriyaPKalghatgi
Copy link

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

@upalatucci
Copy link

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
Copy link

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

image
IMG_1735

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug a bug in one of the components
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@mcalero11 @upalatucci @Inbal-Tish @emprecario @SupriyaPKalghatgi @JSantangelo-Octopus @janoslc @bsalasA3