Setting default value and smoother selected item change

[YohannBethoule]

Hello,

First of all, I love your project, thanks a lot for your work.

I'm trying to make a carousel selector with your library, and I'm struggling with 2 things. It would be wonderful if you could give me a hand with this.

First, I don't get how to set a default value for my component, but I'm sure there's a way to do so.

Secondly, I change the style of the element in the carousel depending on whether it is the current selected index or not, so the item at the center looks like a "selected item". But the way I did it using onScrollEnd() and onScrollBegin() does not look fluid when scrolling, there's always a short lag before the style of the selected element changes.
This one is more tricky I guess, maybe there's nothing much I can do about it.

It might help, so here's some samples of my code.

First the CarouselSelector component I'm trying to make.

interface IProps {
    data: Array<object>;
    label: string;
    onChange: any;
    loop: boolean;
    defaultIndex: number
}

interface IState {
    currentIndex: number;
}

export function CarouselSelector(props:IProps, state: IState) {
    const r = useRef<ICarouselInstance | null>(null);
    const [currentIndex, setCurrentIndex] = useState([props.defaultIndex || 0]);
    return (
        <View style={{
            justifyContent: "center",
            height: 100,
            marginTop: 70,
            marginBottom: 20,
            padding: 0,
        }}>
            <EnchantedText style={styles.title}>{props.label}</EnchantedText>
            <Carousel
                width={200}
                height={150}
                loop={props.loop}
                parallaxScrollingOffset={65}
                parallaxScrollingScale={0.7}
                mode={'parallax'}
                data={props.data}
                ref={r}
                timingConfig={{duration: 100}}
                style = {styles.carousel}
                onSnapToItem ={(index) => {
                    props.onChange(props.data[index].value);
                }}
                onScrollBegin = {() => {
                    setCurrentIndex(-1); //désactive tous les item pendant le scroll
                }}
                onScrollEnd = {(previous: number, current: number) => {
                    setCurrentIndex(current); //re-active l'item selectionné à la fin du scroll
                }}
                renderItem={({ value, label }, index: number) => {
                    return (
                        <View
                            style={[{
                                justifyContent: "center",
                            }, currentIndex == index ? styles.selectedItem : styles.notSelectedItem]}
                        >
                            <EnchantedText style={styles.item}>{label}</EnchantedText>
                        </View>
                    );
                }}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    title: {
        fontSize: responsiveScreenFontSize(5),
        textAlign: "center",
    },
    item: {
        textAlign: "center",
        fontSize: responsiveScreenFontSize(5)
    },
    carousel: {
    },
    selectedItem: {
        opacity: 1,
    },
    notSelectedItem: {
        opacity: 0.5,
    },
});

And the way I include them in the render method of a screen :

 <CarouselSelector data={gameModes} label={'Mode de jeu'} loop={true} onChange={this.changeGameMode}></CarouselSelector>
<CarouselSelector data={playerNumbers} label={'Nombre de joueurs'} loop={false}  onChange={this.changePlayerCount} defaultIndex={4}></CarouselSelector>

Hope you can help me,
have a good day sir

[dohooo]

Thank you very much for your issues.

1. I think I need to add a default value for props ~
2. Is that what you mean? onProgressChange props,use sharedValue to animated.

[dohooo]

v1.0.3

if have any questions,i’ll reopen this issues