How do you use flex inside a scrollView React Native - react-native

Question

When I use the ScrollView with contents that have flex they don't show and flex doesn't seem to work. How do you get flex to work inside a ScrollView?
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
TouchableOpacity,
Dimensions,
} from 'react-native';
const App = (props) => {
return (
<ScrollView style={styles.body}>
<View style={styles.box1} />
<View style={styles.box2} />
<View style={styles.box1} />
</ScrollView>
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff',
borderColor: 'red',
borderWidth: 5
},
box1: {
flex: 1,
backgroundColor: 'blue',
},
box2: {
flex: 2,
backgroundColor: 'purple',
}
});
export default App;
I've created a snack. The inner views/boxes don't show.

Answer 1

I managed to figure it out. You create another view inside the scrollView and fix the height. The only problem is that the size of the content views depends on the height of this view instead of the height of the scrollView.
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
TouchableOpacity,
Dimensions,
} from 'react-native';
// import { useHeaderHeight } from '#react-navigation/stack';
const App = (props) => {
let screenHeight = Dimensions.get('window').height;
// let headerHeight = useHeaderHeight();
let headerHeight = 0
let bodyHeight = screenHeight - headerHeight + 500;
return (
<ScrollView style={styles.body}>
<View style={[styles.innerBody, { height: bodyHeight }]}>
<View style={styles.box1} />
<View style={styles.box2} />
<View style={styles.box1} />
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff',
},
innerBody: {
borderColor: 'red',
borderWidth: 5
},
box1: {
flex: 1,
backgroundColor: 'blue',
},
box2: {
flex: 2,
backgroundColor: 'purple',
}
});
export default App;
Heres a snack showing it working.