Not scrolling down to bottom - react-native

Question

I tried different solutions who had similar problem but none worked for me. My flatlist is not scrolling to the bottom and scroll bar goes out of the screen as i scroll down. In the flat list the item(LoneAlert)components that belong to the same day have a Date separator(Separator)component on top.
As the number of items increase in the list the number of items being pushed down aloso increase.ex: if the list contains 10 items, 1 items is pushed down , if the list has 25 items then 3 items are pushed down.
if I remove the Header Component then it works fine. But i don't know how to fix this. How do i do it?
I tried wrapping the flatList component with a view and giving a flex:1 to the view but it doesn't work.
in App.js, (there is no styling).
return (
<View>
<AlertList allAlert={this.state.alerts}/>
</View>
);
In AlertList.js
_renderItem = ({item, index}) => {
console.log(index);
console.log(item);
// if the alert day is equal to current day or
// alert day is equal to previous day or
// first alert day in the array is equal to current day
// separator bar display none for that alert by passing props showSeparator
if(current_day == item.alert_time.toDate().getDay()
|| index > 0 &&item.alert_time.toDate().getDay() == all_alerts[index -1].alert_time.toDate().getDay()
|| index==0 && item.alert_time.toDate().getDay() == current_day ){
return (
<LoneAlert
alertObject = {item} showSeparator ={false}/>
)
}else{
return(
<LoneAlert
alertObject = {item} showSeparator ={true}/>
)
}
};
checkConnection = () =>{
if (netInfo.isConnected == false || netInfo.isReachable == false ){
return <ConnectionMsg/>
}else{
return(
<View>
<HeaderBar/>
<View style = {{ flex:1 }}>
<FlatList data={props.allAlert}
renderItem = {this._renderItem}
/>
</View>
</View>
);
}
};
return(
<View>
{this.checkConnection()}
</View>
);
};
export default AlertList;
In LoneAlert.js (the items in side flatlist)
return(
<View>
<View>
{this.renderTimeSeparator(props.alertObject.alert_time.toDate(), props.showSeparator)}
</View>
<View style = {styles.wrapper}>
<View style = {styles.alertImageWrapper}>
{this.renderAlertImage(props.alertObject.alert_reason,70,70,'alertImage')}
</View>
<View style = {styles.textWrapper}>
<Text style = {styles.bedNumber}>{props.alertObject.bedNo}</Text>
{this.capitalizeAlertMessage(props.alertObject.alert_reason, styles.alertMessage)}
<Text style = {styles.dateTime}>{this.timeFormatConverter(props.alertObject.alert_time.toDate())}</Text>
</View>
<View style = {styles.dismissalWrapper}>
{this.renderDismissalImage(props.alertObject.dismissal_reason,30,30,styles.dismissalImage)}
{this.renderDismissalText(props.alertObject.dismissal_reason, styles.dismissalText)}
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
wrapper:{
flexDirection: 'row',
padding: 10,
paddingRight:0,
borderBottomWidth: 1,
borderBottomColor: "#D0D0D0",
backgroundColor: '#E7EAED',
},
alertImageWrapper:{
// backgroundColor: "red",
height:"100%",
width:60,
marginRight: 13,
flexDirection: 'row',
alignItems: 'center'
},
alertImage:{
},
textWrapper:{
// backgroundColor:"green"
paddingLeft: 15
},
bedNumber:{
color:"#434343",
fontFamily:"Arial",
fontWeight:'bold',
fontSize: 24,
},
alertMessage:{
color:"#434343",
fontFamily:"Arial",
fontWeight:'bold',
fontSize: 14,
},
dateTime:{
color:"#434343",
fontFamily:"Arial",
fontSize: 14,
},
dismissalWrapper:{
marginLeft: 'auto',
// backgroundColor:"green",
width:70,
},
dismissalImage:{
marginLeft: 'auto',
marginRight:'auto',
// backgroundColor:"red"
},
dismissalText:{
// backgroundColor:"blue",
textAlign: 'center'
}
});
export default LoneAlert;
In Separator.js
render(){
return(
<View style={styles.Bar}>
<Text style ={styles.dateStyle}>{this.props.date[0]},
{this.props.date[1]} {this.props.date[2]}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
Bar:{
// height: 34,
paddingTop: 5,
paddingLeft: 10,
// backgroundColor: "#7C7C7C",
backgroundColor: '#E7EAED',
fontFamily:"Arial",
fontWeight:'bold',
fontSize: 14,
color:"#FFFFFF",
textAlign: "center",
flexDirection: 'row',
alignItems: 'center'
},
dateStyle:{
// backgroundColor: 'blue',
color:"#9B9B9B",
fontWeight:'bold',
}
});
export default Separator;
In HeaderBar.js
const HeaderBar = (props) => {
return(
<View>
<View style={styles.HeaderBar}>
<Image style = {styles.spIcon} source={require('../../assets/images/smartPeep-icon.png')}/>
<Text style = {styles.alertTitle}>
Alert history
</Text>
</View>
<View style = {styles.FirstSeparator}>
<Text style = {styles.AlertDetailLabel}>Alert Type</Text>
<Text style = {styles.DismissalLabel}>Resolved by</Text>
</View>
</View>
)
};
const styles = StyleSheet.create({
HeaderBar:{
width: "100%",
padding: 7,
backgroundColor:"#E7EAED",
height:58,
flexDirection: 'row',
alignItems: "center"
},
spIcon:{
width: 40,
marginRight: 22,
height: "100%",
// backgroundColor: "green"
},
alertTitle:{
maxWidth:180,
fontFamily:"Arial",
fontWeight:'bold',
fontSize: 18,
// backgroundColor: "blue"
},
FirstSeparator:{
height: 35,
backgroundColor:"#434343",
flexDirection: 'row',
},
AlertDetailLabel:{
// backgroundColor:"red",
fontFamily:"Arial",
fontSize: 14,
color: "white",
textAlignVertical:'center',
paddingLeft: 10
},
DismissalLabel:{
marginLeft: 'auto',
fontFamily:"Arial",
fontSize: 14,
color: "white",
textAlignVertical:'center',
paddingRight: 10
}
});
export default HeaderBar;

Answer 1

OK i was able to fix this by addding flex:1 on View in App.js and then setting the height to 100% of parent View in AlertList.js
App.js
<View style = {{ flex: 1}}>
<AlertList allAlert={this.state.alerts}/>
</View>
AlerList.js
<View style = {{ height:"100%"}}>
<HeaderBar/>
<FlatList data={props.allAlert}
renderItem = {this._renderItem}
/>
</View>