react-nativereact-animated

react native vertical auto slide animation (infinite)?


Unfortunately I don't know what it's called and I searched a lot but I couldn't find what I'm looking for, suppose I have a list of objects which they have their own content and I need to show them vertically. and my goal is after some interval last item drop and goes to first with an animation and other items shift down enter image description here something like this that happen infinite and with transition. can anyone give me some hint or help me how to achieve this?


Solution

  • So react-native-swiper will give you infinite scrolling out of the box, but for the web, it doesnt do swipes. If you are lucky, then you are developing for android/ios only, if not you can play around with PanResponder to add swipe support for the web (I havent done this before so I didnt attempt)

    import React, { useState } from 'react';
    import { Text, View, StyleSheet, FlatList } from 'react-native';
    import Constants from 'expo-constants';
    import Swiper from 'react-native-swiper';
    import {
      colorGenerator,
      colorManipulators,
    } from '@phantom-factotum/colorutils';
    
    const totalItems = 4;
    
    export default function App() {
      const DATA = colorGenerator(totalItems).map((color, index) => ({
        color,
        textColor: colorManipulators.darkenColor(color, 0.45),
        title: 'Item' + (index + 1),
      }));
      return (
        <View style={styles.container}>
          <Swiper style={styles.wrapper} showsButtons={true} horizontal={true}>
            {DATA.map((item, i) => {
              return (
                <View
                  style={[styles.item, { backgroundColor: item.color }]}
                  key={item.title}>
                  <Text style={[styles.text, { color: item.textColor }]}>
                    {item.title}
                  </Text>
                </View>
              );
            })}
          </Swiper>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
        padding: 8,
      },
      wrapper: {
        // flex: 1,
      },
      item: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
    
      text: {
        fontSize: 30,
        fontWeight: 'bold',
      },
    });
    
    

    Here's a demo