The ScrollView component does exactly what you want. The order of your components is the only important factor here.
In general, everything that is nested inside a ScrollView is scrollable, and everything outside is not. Hence,
<View>
<View>
// not scrollable
</View>
<ScrollView>
// scrollable
</ScrollView>
<View>
// not scrollable
</View>
</View>
Here is an example of a scrollable container using ScrollView that is nested inside a parent View which is fixed, meaning not scrollable.
<SafeAreaView style={{ margin: 5 }}>
<View>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Not scrollable</Text>
</View>
)
})}
</View>
<ScrollView>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Scrollable</Text>
</View>
)
})}
</ScrollView>
<View>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Also not scrollable</Text>
</View>
)
})}
</View>
</SafeAreaView>
which yields five text components at that top which are not scrollable, followed by five text components that are scrollable, followed by five text components that aren't scrollable.