dorehcotest.js

import React from 'react';
import {
  Animated,
  View,
  FlatList,
  Dimensions,
  Alert,
  Text,
  StyleSheet,
} from 'react-native';

const FLAnimated = Animated.createAnimatedComponent(FlatList);

const screenHeight = Dimensions.get('window').height;

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      currItemHeight: 0,
      data: [],
    };

    this.scrollY = new Animated.Value(0);
    this.onScroll = Animated.event(
      [
        {
          nativeEvent: {
            contentOffset: {y: this.scrollY},
          },
        },
      ],
      {
        useNativeDriver: true,
      },
    );
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        this.setState({data});
      })
      .catch(error => {
        console.log(error.message);
        Alert.alert('خطا', 'هنگام بارگذاری اطلاعات خطایی رخ داده است');
      });
  }

  posInterpolate(root, height) {
    return root.interpolate({
      inputRange: [-height, 0, screenHeight],
      outputRange: [0, 1, 1],
    });
  }

  renderItem({item, index}) {
    const {currItemHeight} = this.state;

    const itemTransY = Animated.add(
      this.scrollY,
      this.scrollY.interpolate({
        inputRange: [0, index * currItemHeight],
        outputRange: [0, index * -currItemHeight],
        extrapolateRight: 'clamp',
      }),
    );

    const position = Animated.subtract(index * currItemHeight, this.scrollY);
    const itemScale = this.posInterpolate(position, currItemHeight);
    const itemOpacity = this.posInterpolate(position, currItemHeight);

    return (
      <Animated.View
        style={{
          width: '100%',
          alignItems: 'center',
          marginVertical: 5,
          opacity: itemOpacity,
          transform: [{translateY: itemTransY}, {scale: itemScale}],
        }}
        key={item.id}>
        <View
          onLayout={event => {
            const {height} = event.nativeEvent.layout;

            this.setState({
              currItemHeight: height + 10,
            });
          }}
          style={styles.itemContainer}>
          <View style={[styles.itemFlexBox, {paddingLeft: 10}]}>
            <Text style={styles.itemText}>{item.username}</Text>
            <Text style={[styles.itemText, {color: '#999'}]}>{item.name}</Text>
          </View>
          <View style={[styles.itemFlexBox, {paddingRight: 10}]}>
            <Text style={styles.itemText}>{item.email}</Text>
            <Text style={[styles.itemText, {color: '#999'}]}>{item.phone}</Text>
          </View>
        </View>
      </Animated.View>
    );
  }

  render() {
    const {data} = this.state;

    return (
      <View style={{flex: 1, paddingTop: 10}}>
        <FLAnimated
          scrollEventThrottle={40}
          data={data}
          renderItem={data => this.renderItem(data)}
          onScroll={this.onScroll}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  itemContainer: {
    width: '90%',
    height: 110,
    backgroundColor: 'white',
    elevation: 3,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 4,
  },
  itemFlexBox: {
    height: '100%',
    paddingTop: '10%',
    paddingLeft: 10,
  },
  itemText: {
    textAlign: 'left',
  },
});