wix / react-native-ui-lib

UI Components Library for React Native
https://wix.github.io/react-native-ui-lib/
MIT License
6.34k stars 697 forks source link

If I do not change the position of the separators and set separatorsStyle={{backgroundColor:'green',}}, the text will be obscured. #3028

Open yinminqian opened 3 months ago

yinminqian commented 3 months ago

Hi! πŸ‘‹

Firstly, thanks for your work on this project! πŸ™‚

Today I used patch-package to patch react-native-ui-lib@7.20.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-ui-lib/src/components/WheelPicker/index.js b/node_modules/react-native-ui-lib/src/components/WheelPicker/index.js
index eb17b63..d7fdbe2 100644
--- a/node_modules/react-native-ui-lib/src/components/WheelPicker/index.js
+++ b/node_modules/react-native-ui-lib/src/components/WheelPicker/index.js
@@ -204,6 +204,7 @@ const WheelPicker = props => {
   }, []);
   const offsets = useMemo(() => items.map((_, i) => i * itemHeight), [items, itemHeight]);
   return <View testID={testID} bg-$backgroundDefault style={style}>
+      {separators}
       <View row centerH>
         <View flexG>
           <AnimatedFlatList {...androidFlatListProps} {...flatListProps} testID={`${testID}.list`} listKey={`${testID}.flatList`} height={height} data={items}
@@ -219,7 +220,7 @@ const WheelPicker = props => {
       {label && labelContainer}
       {fader(FaderPosition.BOTTOM)}
       {fader(FaderPosition.TOP)}
-      {separators}
+
     </View>;
 };
 WheelPicker.alignments = WheelPickerAlign;

This issue body was partially generated by patch-package.

image image
d-moreira commented 2 months ago

Facing the same issue. Imo the default behaviour should be the one described here.