react-native-smooth-picker icon indicating copy to clipboard operation
react-native-smooth-picker copied to clipboard

Picker is not smooth for large data more than 150

Open raginisahu opened this issue 3 years ago • 0 comments

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

raginisahu avatar Feb 22 '22 04:02 raginisahu