React Native: Add incremental animation delay to each consecutive item

Question

I am rendering a list of cards from a static array of objects using the .map function. I have added an animation to each card using the react-native-animatable library, however at the moment each card has the exact same delay property. I would like to make it so that each additional card has a +100 delay (so the first card has a delay of 0, second = 100, third = 200 and so on). What is the most effective way to achieve this?

Here is my code below:

    const data = [
    {
      name: 'Fred',
      age: 25,
    },
        {
      name: 'John',
      age: 30,
    },
        {
      name: 'Alice',
      age: 32,
    },

        import React, { Component } from 'react'
    import { Text, View, SafeAreaView, ScrollView } from 'react-native'
import UserCard from './UserCard'
import * as Animatable from 'react-native-animatable'
    
    export default class UserList extends Component {
        render() {
            return (
                <SafeAreaView>
                <ScrollView>
                  {data.map((user, index) => (
                    <Animatable.View
                      animation="slideInRight"
                      duration={1000}
                      delay={}
                      useNativeDriver
                      style={{alignItems: 'center'}}>
                        <UserCard
                          userName={user.name}
                          userAge={user.age}
                        />
                    </Animatable.View>
                  ))}
                </ScrollView>
              </SafeAreaView>
            )
        }
    }

Answer 1

You can set the delay for the items using the index that is passed by
delay={index*1000} the first iteration would have 0 delay and the rest will have 1 second 2 second and goes on.

                   <Animatable.View
                      animation="slideInRight"
                      duration={1000}
                      delay={index*1000}
                      useNativeDriver
                      style={{alignItems: 'center'}}>
                        <UserCard
                          userName={user.name}
                          userAge={user.age}
                        />
                    </Animatable.View>
                  ))}