CODEWITHSUNDEEP
react-native
scott wall
scott wall

Reputation: 41

Rendering rows in React Native's ListView component

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.

Upvotes: 4

Views: 1182

Answers (1)

Thomas Parslow
Thomas Parslow

Reputation: 6012

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
  }
});

Upvotes: 3

Related Questions