invertedFlatlist.js

// Expo link: https://exp.host/@joshyhargreaves/inverted-flatlist
import React from 'react';
import {
  ListView,
  Text,
  TouchableHighlight,
  View,
  StyleSheet,
  FlatList,
  ScrollView
} from 'react-native';

export default class InvertedScrollComponent extends React.Component {
  constructor(props) {
    super(props);
    let data = [];
    // Strictly speaking the children are being being rendered
    // in the wrong order
    for (i=0; i<20; i++) {
      data.push({key: `${i}`});
    }
    this.state = {
      data: data
    }
  }

  _onEndReached = () => {
    setTimeout(() => {
      let length = this.state.data.length;
      //mutating is bad I know
      let data = this.state.data;
      for (i=0; i<20; i++) {
        data.push({key: i+length})
      }
      this.setState({
        data: data
      })
    }, 200);
  }

  _renderHeader() {
    return (
      <TouchableHighlight
        onPress={this._onPress.bind(this)}
        style={styles.button}>
        <Text>Add a row</Text>
      </TouchableHighlight>
    );
  }

  _renderItem({index, item}) {
    return (
      <View key={index} style={styles.row}>
        <Text style={styles.rowText}>{item.key}</Text>
      </View>
    )
  }

  render() {
    return (
      <View
        style={styles.container}
      >
        <FlatList
          data={this.state.data}
          renderItem={this._renderItem}
          renderScrollComponent={props => <ScrollView style={{transform: [{ scaleY: -1 }]}} {...props}/>}
          onEndReachedThreshold={0}
          onEndReached={this._onEndReached}
        />
      </View>
    );
  }
}

let styles = StyleSheet.create({
  container: {
    padding: 10,
    flex: 1,
  },
  button: {
    padding: 20,
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: 'black',
  },
  row: {
    margin: 5,
    padding: 10,
    backgroundColor: 'rgb(0,132,255)',
    borderRadius: 8,
    transform: [
        { scaleY: -1 },
    ],
  },
  rowText: {
    color: 'white',
    textAlign: 'right'
  },
});