Elements inside ScrollView dont scroll React native - react-native

Question

I have trouble understanding how ScrollView works in React Native. In my view, I have a scrollview that is wrapped in a containerview with containerStyle that has a flex:1. However the elements inside my view dont scroll..
render() {
const {containerStyle, eventsWrapperStyle, footerStyle} = styles
return (
<View style={containerStyle}>
<Header/>
<ScrollView style={eventsWrapperStyle}>
{this.renderEvents()}
{this.renderMonthlyStats()}
</ScrollView>
<Footer>
<View style={styles.footerButtonsWrapper}>
<Button customStyle={styles.footerButtonStyle} onPress = {() => this.props.resetAppInfo()}>NEW</Button>
<Button customStyle={styles.footerButtonStyle} onPress={() => this.props.logoutUser()}>SIGN OUT</Button>
</View>
</Footer>
</View>
)
}
const styles = {
monthlyStatsWrapper: {
margin: 10,
flexDirection: 'column'
},
monthlyStatsLine: {
width: '85%',
alignItems: 'center',
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between'
},
containerStyle: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
},
footerButtonsWrapper: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
footerButtonStyle: {
width: 170
},
eventsWrapperStyle: {
marginTop: 50,
padding: 30,
flex: 1,
paddingBottom: 100,
}
};
Could you help me understand how scrollView works and make my elements inside it scroll ?
Here's the code for the Footer element which is absolutely positioned (might be part of the problem ?)
class Footer extends Component {
render(){
const { footerStyle } = styles;
return (
<View style={[footerStyle, this.props.customStyle]}>
{this.props.children}
</ View>
);
}
};
const styles = {
footerStyle: {
position: 'absolute',
width: '100%',
bottom: 0,
height: 130,
backgroundColor: '#FCFCFC'
}
};