react-native-ui-lib
react-native-ui-lib copied to clipboard
wix
Confirm Button is missing in DateTimePicker spinner using iOS newer versions
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
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"
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 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 Were you able to find a solution to this?
Hi! Nope, i was working in another project. I will try your patch, thanks!
Hi! I'm interested in this conversation, having the same issue. @JSantangelo-Octopus did you apply any workaround which works for you?
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"
This is still happening in production @Inbal-Tish @ethanshar Please provide fix
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)?
@Inbal-Tish Thank you for responding My project has "react-native": "0.74.1" iOS 17.5
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"
@Inbal-Tish Can you please check this This is blocking my app release
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.patchdiff --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?
@Inbal-Tish I spent a week trying on multiple things, no success Can you please take this production level issue into priority
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
