Edit your own list will not scroll

Question

I am just studying the native reaction, and I have a few problems scrolling through the list. Using the sample code below on my Android emulator, it won’t scroll at all. By inserting the code into the React-native playground ( https://rnplay.org/apps/AXOzjw ) and testing it on the iOS emulator, if I omit it, it scrolls back to top when I finish.

I read a few SO answers, and most of them say it doesn't have flex: 1 installed in containers, but I'm sure I have it installed correctly.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Image,
  ListView,
  TouchableHighlight,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  statics: {
    title: '<ListView> - Simple',
    description: 'Performant, scrollable list of data.'
  },
  getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      var data = Object.keys(scores.games).map(function(k) { return scores.games[k] });
      return {
        dataSource: ds.cloneWithRows(data),
      };
    },

    render: function() {
      return (
        <View style = {styles.maincontainer}>
          <ListView contentContainerStyle={styles.list}
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}  />
        </View>
      );
    },

  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
      return (
          <View>
            <Text style={styles.item}>
              {rowData.name}
            </Text>
          </View> );
    },
});

var styles = StyleSheet.create({
    maincontainer: {
    backgroundColor: 'blue',
    flex: 1,
    paddingTop:20,
    paddingBottom:10,
    flexDirection: 'column',
  },
  list: 
  {
    flexDirection: 'column',
    flex:1,
  },
  item: {
    backgroundColor: 'lightgray',
    margin: 3,
    flex:1,
    height: 60
  }
});

var scores = {
  "games": [{
    "name": "1",
  }, {
    "name": "2",
  }, {
    "name": "3",
  }, {
    "name": "4",
  }, {
    "name": "5",
  }, {
    "name": "6",
  }, {
    "name": "7 ",
  }, {
    "name": "8 ",
  }, {
    "name": "9",
  }, {
    "name": "10",
  }, {
    "name": "11",
  }, {
    "name": "12",
  }, {
    "name": "13",
  }]
};

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

module.exports = SampleApp;

Answer 1

Instead:

contentContainerStyle={ styles.list }

Just use:

style={ styles.list }

.