Skip to content

Instantly share code, notes, and snippets.

@furkancelik
Last active January 28, 2019 14:48
Show Gist options
  • Save furkancelik/603d0afa0b047c23721ed025a7deab94 to your computer and use it in GitHub Desktop.
Save furkancelik/603d0afa0b047c23721ed025a7deab94 to your computer and use it in GitHub Desktop.
React Native Animation Menu
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>
);
}
}
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>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment