React native, children of ScrollView wont fill full height

Question

So I have a horizontal scrollview at the top of the view. The ScrollView contains nodes that have a specified width. I then have a border on the bottom of the ScrollView, like you can see in this screen cap: http://i.imgur.com/pOV1JFP.png

As you can see the child nodes of the ScrollView at the top don't reach the border. However, if I change the ScrollView to a View with flexDirection: 'row', then the child nodes fill the height fine. I've tried changing a few properties on the scrollview, such as:

• Setting padding:0 on contentContainerStyle
• automaticallyAdjustContentInsets={false}
• Changing the values of contentInsets directly

None of those seem to fix the issue.

The scrollview code & style:

var styles = StyleSheet.create({   nav: {     padding: 0,     marginTop: 30,     flex: 1,     borderBottomWidth: 1,     borderColor: '#000000'   } });  <ScrollView   style={[{width: screen.width}, styles.nav]}   horizontal={true}   showsHorizontalScrollIndicator={true}   automaticallyAdjustContentInsets={false}>   {dayNavItems} </ScrollView> 

The child components (makes up dayNavItems)

const styles = StyleSheet.create({   container: {     paddingLeft: 15,     paddingRight: 15,     width: 50,     justifyContent: 'center'   },   odd: {     backgroundColor: '#ccc'   },   selected: {     backgroundColor: '#39b54a'   },   text: {     fontFamily: 'Optima'   } });  class DayNavItem extends React.Component {   static propTypes = {     day: React.PropTypes.object.isRequired,     odd: React.PropTypes.bool,     selectDay: React.PropTypes.func.isRequired,     selected: React.PropTypes.bool   };    render() {     const d = new Date(this.props.day.created_at);     const viewStyles = [styles.container];     if (this.props.selected) {       viewStyles.push(styles.selected);     } else if (this.props.odd) {       viewStyles.push(styles.odd);     }     return (       <TouchableOpacity style={viewStyles} onPress={() => this.props.selectDay(this.props.day.uuid)}>         <View>           <Text style={styles.text}>{getMonth(d)}</Text>           <Text style={styles.text}>{d.getDate()}</Text>         </View>       </TouchableOpacity>     );   } } 

Answer 1

Adding contentContainerStyle={{flexGrow: 1}} will do the trick.

<ScrollView contentContainerStyle={{flexGrow: 1}}>  </ScrollView> 

Answer 2

There is a property called contentContainerStyle for ScrollView. I just solved a similar issue where I set flex: 1 to the ScrollView's styles, ScrollView's contentContainerStyle, and the child View component.