React native carousel item active index

Question

I've just started learning react native and I want to make a splash screen that contains a slider with dots. But when I scroll the scrollview the active dot doesn't change properly. My slider component is like below

export default function Slider() {
  const [active, setActive] = useState(0);

  const onChange = ({ nativeEvent }) => {
    const active = Math.floor(
      nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width
    );

    setActive({ active });

    console.log(active);
   
  };

  return (
    <View style={styles.container}>
      <ScrollView
        onMomentumScrollEnd={onChange}
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
      >
        {dummyData.map((item, index) => {
          return (
            <SliderItem
              key={index}
              title={item.title}
              image={item.url}
              description={item.description}
            />
          );
        })}
      </ScrollView>
      <View style={styles.dotView}>
        {dummyData.map((k, i) => (
          <View
            key={i}
            style={{
              backgroundColor: i === active ? "red" : "blue", // My problem is here
              height: 10,

              width: 10,

              margin: 8,
              borderRadius: 6,
            }}
          />
        ))}
      </View>
    </View>
  );
}

Answer 1

Change setActive({ active }); to setActive(active);