react-native-smooth-picker
react-native-smooth-picker copied to clipboard
Picker is not smooth for large data more than 150
Hello ,
The package is very Good. Only i'm facing issue for large array data. I want to use horizontal scroll option for 200 to 250 data.
this is my code const data = Array.from(Array(250).keys()).slice(100, 250); <SmoothPicker initialScrollToIndex={selected} onScrollToIndexFailed={() => {}} keyExtractor={(_, index) => Math.random()} showsHorizontalScrollIndicator={false} data={data} scrollAnimation={true} onSelected={({ item, index }) => handleChange(index,item)} renderItem={(option) => ItemToRender(option, selected, true)} magnet selectOnPress horizontal />
const Item = React.memo(({ opacity, selected, horizontal, fontSize, name }) => { color = selected ? "#fff" : "#717171"; return ( <View style={[ styles.OptionWrapper, { opacity, width: horizontal ? 10 : "auto", backgroundColor: selected ? "#ff9800" : "transparent", }, ]} > {selected ? ( <FontsFamilyPoppinsBold text={name} color="#fff" size={33} /> ) : ( <FontsFamilyPoppins text={name} color="#979797" size={30} /> )} </View> ); });
const ItemToRender = ({ item, index }, indexSelected, horizontal) => { const selected = index === indexSelected; const gap = Math.abs(index - indexSelected);
let opacity = opacities[gap]; if (gap > 3) { opacity = opacities[4]; } let fontSize = sizeText[gap]; if (gap > 1) { fontSize = sizeText[2]; } return ( <Item opacity={opacity} selected={selected} horizontal={horizontal} fontSize={fontSize} name={ <View style={[
{
backgroundColor: '#4c3e5c30' ,
height: 15,
width:0.3,
marginRight: 1
},
]}
><Text>{item}</Text></View>}
/>
); }; If you have any solution, Please help me.
Thanks