Rendering rows in React Native's ListView component

Question

I'm having no trouble create a ListView, but I find that if i want to render that ListView inside of a View it breaks and the scroll no longer works.

I understand that two elements can't be next to one another without being wrapped in a parent View but that breaks my ListView. My ListView is rendered the following way, within a React Component named Main.

renderMeeting(meeting) {
  return (
    <TouchableHighlight>
      <View>
        <View style={styles.container}>
          <View style={styles.imaging}>
                <Image source={{uri: meeting.Picture}} style={styles.thumbnail} />
          </View>
          <View style={styles.rightContainer}>
                <Text style={styles.meetingTime}>
                  {meeting.Time}
                </Text>
            <View style={styles.firstRow}>
                <Text style={styles.meetingName}>
                  {meeting.Name}
                </Text>
                <Text style={styles.Title}>
                  {meeting.Title}
                </Text>
                <Text style={styles.Company}>
                  @ {meeting.Company}
                </Text>
            </View>
            <View>
                <Text style={styles.meetingDescription}>
                  {meeting.Description}
                </Text>
            </View>
          </View>
        </View>
        <View style={styles.borderLine} />
      </View>
    </TouchableHighlight>
);
  }

  render() {
  return(
    <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMeeting.bind(this)}
        style={styles.listView} />  
      ); 
  }

};

When my render method in index.ios.js just returns this Main component, it works just fine:

render() {
  return (
    <Main>
  );
}

However, if I attempt to wrap Main within a View, it does not work:

render() {
  return (
    <View>
      <Main>
    </View>
  );
}

If I want anything to float over the ListView or if I want to have it only be half page I can't seem to get it to work as long as this component is anywhere is a parent view.

Thomas Parslow · Accepted Answer · 2015-07-20 10:27:11Z

3

Probably what's happening is the outer view is ending up with a 0 height. You should be able to fix things by giving it a flex style of 1.

render() {
  return (
  <View style={styles.container}>
    <Main>
  </View>
  );
}

Using flex: 1 as a style seems to do the trick for container views like this so it could look something like this:

var styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

edited Jul 20, 2015 at 10:27

answered Jul 19, 2015 at 11:33

Thomas Parslow

6,1144 gold badges29 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Rendering rows in React Native's ListView component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related