Animations not working for "react-native-reanimated-carousel"

52 Views Asked by At

I copy and pasted their code snippet from their most default example: https://reanimated-carousel.dev/usage

<Carousel
                    loop
                    width={width * 0.2}
                    height={240}
                    autoPlay={true}
                    data={[...new Array(6).keys()]}
                    scrollAnimationDuration={500}
                    onSnapToItem={(index) => console.log('current index:', index)}
                    renderItem={({ index }) => 
                        (
                        <View
                            style={{
                                flex: 1,
                                borderWidth: 1,
                                justifyContent: 'center',
                            }}
                        >
                            <Text style={{ textAlign: 'center', fontSize: 30 }}>
                                {index}
                            </Text>
                        </View>
                    )}
                />

This is my babel.config.js.

module.exports = {
  presets: [
    "module:metro-react-native-babel-preset",
    'babel-preset-expo'
  ],
  plugins: [
    '@babel/plugin-proposal-export-namespace-from',
    "react-native-reanimated/plugin"
  ],
};

As of right now the render is not changing, meaning it is stuck on index = 0. However, I'm logging the index in onSnapToItem and it is continuously updating from 0, 1, 2, ..., 5. Anyone have suggestions on what to do. I'm using react native web for clarification

0

There are 0 best solutions below