React Native Animation Menu

index.js

import React, { Component } from "react";
import { FlatList, Text, View } from "react-native";
import ListItem from "./ListItem";
const DATA = ["Menü 1", "Menü 2", "Menü 3", "Menü 4", "Menü 5", "Menü 6"];

export default class App extends Component {
  render() {
    return (
      <View style={{ paddingTop: 20, flex: 1, backgroundColor: "#fff" }}>
        <FlatList
          data={DATA}
          renderItem={({ item, index }) => (
            <ListItem index={index} item={item} />
          )}
        />
      </View>
    );
  }
}

ListItem.js

import React, { Component } from "react";
import { Dimensions, Animated, Text, View } from "react-native";
const { height, width } = Dimensions.get("window");
export default class ListItem extends Component {
  constructor(props) {
    super(props);
    this.show = new Animated.Value(0);
  }

  componentDidMount() {
    Animated.timing(this.show, {
      toValue: 1,
      delay: 100 * this.props.index,
      duration: 1000
    }).start();
  }

  render() {
    let translateX = this.show.interpolate({
      inputRange: [0, 1],
      outputRange: [-width, 0],
      delay: this.props.index * 100
    });
    return (
      <Animated.View
        style={{
          flex: 1,
          backgroundColor: "#eee",
          borderBottomWidth: 1,
          borderColor: "#ccc",
          padding: 10,
          transform: [{ translateX }]
        }}
      >
        <Text>{this.props.item}</Text>
      </Animated.View>
    );
  }
}