React Native - List View doesn't scroll

Question

Im new in React so i work on a mini project of mine with a simple list. This is the code :

render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
        <View>
            <ToolbarAndroid style={styles.toolbar}
               title={"Hello React"}
               titleColor={'#000000'}/>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderMovie}
            style={styles.listView}/>
      </View>
    );
  }

Also the style code:

 listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
    flex: 1,
  },

QoP · Accepted Answer · 2016-06-02 23:10:19Z

3

That's not working because you forgot to set the size of the View. Add flex:1 and it will work properly

styles

listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
    flex: 1,
},
container: {
    flex: 1
}

render

render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
        <View style={styles.container}>
            <ToolbarAndroid style={styles.toolbar}
               title={"Hello React"}
               titleColor={'#000000'}/>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderMovie}
            style={styles.listView}/>
      </View>
    );
  }

Example with the problem fixed (iOS version)

edited Jun 2, 2016 at 23:10

answered Jun 2, 2016 at 23:04

QoP

28.5k16 gold badges78 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native - List View doesn't scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related