Expo xde not using style - react-native

Question

When I run following code in the sandbox https://snackexpo.io it works fine. But when I run from the Expo xde I get Invariant Violation: Scrollview child layout must be applied through the contentContainerStyle prop.
import React from 'react';
import { Button, StyleSheet, ScrollView } from 'react-native';
export default class App extends React.Component {
blockJS(){
const done = Date.now() + 5000
console.log('blocking')
while(Date.now() < done){done}
console.log('not blocking')
}
render() {
return (
<ScrollView style={styles.container}>
<Button title='Block js' onPress={()=> this.blockJS()}/>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'lightblue',
alignItems: 'center',
justifyContent: 'center',
}
})

Answer 1

ScrollView does not support alignItems and justifyContent unless it is passed as a contentContainerStyle or wrap your contents inside and pass the styles to them.
You can change it as follows
<ScrollView contentContainerStyle={styles.container}>
<Button title='Block js' onPress={()=> this.blockJS()}/>
</ScrollView>
Or as a wrapper
// flex will only be applied on contentContainer to get it inherited
<ScrollView contentContainerStyle={{flex: 1}}>
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Some sample text</Text>
</View>
</ScrollView>