Animated List

Create dynamic, fluid scrolling lists with our easy-to-integrate Animated List component.

Preview

Code

App.tsx

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import AnimatedList from '../components/animatedList'

//or if you're using npm package
import {AnimatedList} from '@cascadeui/animated-list'

// define style of individual list item
const Item : React.FC = ({item}:any) =>{
  return(
    <View style={styles.itemStyle}>
    <Text style={{color:'white'}}>{item.name}</Text>
    <Text style={{color:'white'}}>{item.age}</Text>
    </View>
  )
  }

  const data = [
    { "id": 1, "name": "Alice Smith", "age": 25 },
    { "id": 2, "name": "Bob Johnson", "age": 30 },
    { "id": 3, "name": "Charlie Brown", "age": 22 },
    { "id": 4, "name": "David Wilson", "age": 28 },
    { "id": 5, "name": "Eve Davis", "age": 26 },
    { "id": 6, "name": "Fiona Clark", "age": 24 },
    { "id": 7, "name": "George Lewis", "age": 35 },
    { "id": 8, "name": "Hannah Walker", "age": 29 },
    { "id": 9, "name": "Ian Hall", "age": 27 },
    { "id": 10, "name": "Julia Allen", "age": 23 },
    { "id": 11, "name": "Kevin Young", "age": 31 },
    { "id": 12, "name": "Laura King", "age": 32 },
    { "id": 13, "name": "Mike Wright", "age": 33 },
    { "id": 14, "name": "Nina Scott", "age": 21 },
    { "id": 15, "name": "Oliver Green", "age": 34 },
    { "id": 16, "name": "Paula Adams", "age": 36 },
    { "id": 17, "name": "Quincy Baker", "age": 37 },
    { "id": 18, "name": "Rachel Gonzalez", "age": 38 },

  ]

const App = () => {
  return (
    <AnimatedList
    ItemStyle={Item} // React component that defines style for each of the list item
    data={data}
    animation={'slide-left-spring'}
    />
  )
}

export default App

const styles = StyleSheet.create({
  itemStyle : {
    backgroundColor:'#F15025',
    paddingVertical:50,
    marginVertical:10,
    alignItems:'center',
    justifyContent:'center',
    marginHorizontal:10,
    borderRadius:25
  }
})

Installation

cli

1. Install component

   npm install @cascadeui/animated-list

2. Add react-native-reanimated plugin into babel.config

     module.exports = {
       presets: [
         ... // don't add it here :)
       ],
       plugins: [
         ...
         'react-native-reanimated/plugin',
       ],
     };

manual

1. Install React Native Reanimated

   NPM

   npm install react-native-reanimated

   YARN

   yarn add react-native-reanimated

   EXPO

   npx expo install react-native-reanimated

2. Add Reanimated plugin into babel.config file

     module.exports = {
       presets: [
         ... // don't add it here :)
       ],
       plugins: [
         ...
         'react-native-reanimated/plugin',
       ],
     };

3. Copy core component src/components/AnimatedList.tsx

      import { View,FlatList, ViewToken, Dimensions } from 'react-native'
      import Animated, {useAnimatedStyle, useSharedValue, withTiming , SharedValue, withSpring} from 'react-native-reanimated'
      import React from 'react'
   
      const { height : deviceHeight , width : deviceWidth } = Dimensions.get('window')
   
      interface MyComponentProps {
        data:any[],
        ItemStyle:React.ElementType,
        animation?:string
      }
   
      const AnimatedList :React.FC<MyComponentProps>  = ({data,ItemStyle,animation}) => {
   
      const viewableItems = useSharedValue<ViewToken[]>([])
      let viewTable:ViewToken[] = []
   
      return (
      <View>
      <FlatList
              data={data}
              onViewableItemsChanged={({viewableItems:vItem})=>{
                  viewTable=[...viewTable,...vItem]
                  viewableItems.value = viewTable
                  // viewableItems.value = vItem
              }
              }
              renderItem={({item})=>{
              return <ListItem item={item} viewableItems={viewableItems} ItemStyle={ItemStyle} animation={animation} />}}
              keyExtractor={item => item.id}
              showsVerticalScrollIndicator={false}
            />
   
      </View>
          )
        }
   
      type ListItemProps = {
          viewableItems: SharedValue<ViewToken[]>;
          item:{
              name:string,
              age:number
          };
          ItemStyle:React.ElementType,
          animation?:string
      }
   
      const ListItem:React.FC<ListItemProps>  = React.memo(
   
          ({item,viewableItems,ItemStyle,animation})=>{
   
          const animatedStyle = useAnimatedStyle(()=>{
   
              const isVisible =Boolean( viewableItems.value.filter((item:any)=>item.isViewable)
              .find((viewableItem:any)=>viewableItem.item.name===item.name))
   
              switch(animation){
   
                  case 'slide-left':
                      return{
   
                          transform:[
                          {
                              translateX:withTiming(isVisible?0:deviceWidth)
   
                          },
                          ]
                      }
                  case 'slide-right':
                      return{
   
                          transform:[
                          {
                              translateX:withTiming(isVisible?0:-deviceWidth)
   
                          },
                          ]
                      }
                  case 'slide-left-spring':
                      return{
   
                          transform:[
                          {
                              translateX:withSpring(isVisible?0:deviceWidth)
   
                          },
                          ]
                      }
                  case 'slide-right-spring':
                      return{
   
                          transform:[
                          {
                              translateX:withSpring(isVisible?0:-deviceWidth)
   
                          },
                          ]
                      }
   
                  case 'bottom-up':
                      return{
   
                          transform:[
                          {
                              translateY:withTiming(isVisible?0:100)
   
                          },
                          ]
                      }
                  case 'bottom-up-spring':
                      return{
   
                          transform:[
                          {
                              translateY:withSpring(isVisible?0:deviceHeight)
   
                          },
                          ]
                      }
   
                      default:
                          return{
                              transform:[
                                  {
                                      scale:withTiming(isVisible?1:deviceHeight)
   
                                  },
                                ]
                          }
              }
   
   
          })
              return(
              <Animated.View style={[animatedStyle]}>
                  <ItemStyle item={item} />
              </Animated.View>
              )
          }
   
      )
   
      export default AnimatedList

Props

Prop	Type	Description
data	array	Array of objects(list items)
ItemStyle	React.ElementType	React component which defines the style of individual item
animation	string	Type of Animation .

Animations

1. left-slide
2. right-slide
3. left-slide-spring
4. right-slide-spring
5. bottom-up
6. bottom-up-spring