Я пытался добавить ScrollView к своему компоненту, но он не работает так, как мне нужно.Все перемещается наверх.
Это мой экран перед добавлением ScrollView, мне нужно, чтобы экран выглядел так, но с возможностью прокрутки: 
Это мой экран после добавления ScrollView: 
А это мой код:
<ScrollView contentContainerStyle={styles.scrollview} scrollEnabled={scrollEnabled} onContentSizeChange={this.onContentSizeChange}>
<View style={styles.mainContainer}>
<View style={[styles.petNameContainer]}>
<Text>{this.state.petInfo.name}</Text>
</View>
<View style={styles.petProfileContainer}>
<Text style={{textAlign:'left'}}>{this.state.petInfo.race}</Text>
<Image style={{height:100, width:100}}
// en local --> source={require('../assets/images/homescreen/Avatar.png')}>
source={{uri:this.state.petInfo.url_image}}
/>
<Text style={{textAlign:'right'}}>{this.state.petInfo.species}</Text>
</View>
<View style={styles.foodBar}>
<Image style={{height: 40, width:250}}
resizeMode="stretch"
source={require('../assets/images/homescreen/Comida.png')}>
</Image>
</View>
<View style={[styles.prueba]}>
<Text>15:30 - Última entrada del log</Text>
<Text>21:30 - Próxima comida.</Text>
<Text>Icono + Historial de comidas</Text>
</View>
<View style={[styles.quarterHeight]}>
<Image
style={{height: 40, width:250}}
resizeMode="stretch"
source={require('../assets/images/homescreen/Agua.png')}>
</Image>
</View>
<View style={[styles.quarterHeight]}>
<Text>15:30 - Última entrada del log</Text>
<Text>Icono + Historial de agua</Text>
<Text>15:30 - Última entrada del log</Text>
<Text>Icono + Historial de agua</Text>
<Text>15:30 - Última entrada del log</Text>
<Text>Icono + Historial de agua</Text>
<Text>15:30 - Última entrada del log</Text>
<Text>Icono + Historial de agua</Text>
<Text>15:30 - Última entrada del log</Text>
<Text>Icono + Historial de agua</Text>
</View>
</View>
</ScrollView>
Стили:
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap'
},
petNameContainer: {
flex: 1,
},
quarterHeight: {
flex: 1,
},
prueba: {
flex:1
},
petProfileContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
flex: 2,
marginTop: -95
},
foodBar: {
flex:1
}
});
Я новичок в React Native, поэтому не знаю, как это сделать.