Issue RN 11809 Test app

index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Animated,
  Text,
  Image,
  View,
  ListView,
  TouchableWithoutFeedback,
  ToastAndroid
} from 'react-native';

import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue';

MessageQueue.spy(true);

let data = [];

export default class Zero40App extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

    this.state = {
      dataSource: ds.cloneWithRows(data)
    };
  }

  componentWillMount() {
    this.renderMore();
  }

  renderMore() {
    this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.fetchData()) });
  }

  fetchData() {
    let newData = [];
    let currentSize = data.length;

    for (var i = currentSize; i < currentSize + 20; i++) {
      newData.push(i);
    }

    data = data.concat(newData);

    return data;
  }

  renderRow(index) {
    return (
      <View style={styles.rowContainer}>
        <View style={styles.textContainer}>
          <Text style={styles.title}>{index}</Text>
        </View>
        <View style={styles.imageContainer}>
          <TouchableWithoutFeedback
            onPress={() =>
              ToastAndroid.show('This is a toast with short duration', ToastAndroid.SHORT)}>
            <View><Text style={styles.text}>Text 1</Text></View>
          </TouchableWithoutFeedback>
          <Text>Text 1</Text>
          <Text>Text 2</Text>
          <Text>Text 3</Text>
          <Text>Text 4</Text>
          <Text>Text 5</Text>
          <Text>Text 6</Text>
          <Text>Text 7</Text>
          <Text>Text 8</Text>
          <Text>Text 9</Text>
          <Text>Text 10</Text>
          <Text>Text 11</Text>
          <Text>Text 12</Text>
          <Text>Text 13</Text>
          <Text>Text 14</Text>
          <Text>Text 15</Text>
        </View>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          style={{ flexGrow: 1 }}
          dataSource={this.state.dataSource}
          onEndReached={this.renderMore.bind(this)}
          renderRow={this.renderRow}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  contaner: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
  rowContainer: {
    alignItems: 'stretch',
    height: 150,
    marginBottom: 10,
    justifyContent: 'center'
  },
  textContainer: {
    height: 20,
    backgroundColor: 'lime',
    alignItems: 'center',
    justifyContent: 'center'
  },
  title: {
    lineHeight: 20,
    color: 'tomato'
  },
  text: {
    fontSize: 30,
    backgroundColor: 'blue'
  },
  imageContainer: {
    flexDirection: 'row',
    flexGrow: 1,
    backgroundColor: 'red',
    flexWrap: 'wrap',
    alignItems: 'flex-start'
  }
});

AppRegistry.registerComponent('Zero40App', () => Zero40App);