Rendering Rows in a React Native ListView Component

Question

I have no problem creating a ListView , but I find that if I want to display the ListView inside the View it breaks and scrolling no longer works.

I understand that two elements cannot be next to each other without being wrapped in the parent View , but this breaks my ListView . My ListView displayed as follows in 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 fine:

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

However, if I try to wrap Main inside the View , this will not work:

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

If I need to float anything over a ListView , or if I want it to be only half a page, I cannot get it to work until this component is nowhere a parent view.

Answer 1

It is likely that what happens is the appearance ends at 0 height. You should be able to fix things by specifying flex 1 style.

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

Using flex: 1 as a style seems to do the trick for these kinds of container so that it looks something like this:

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