React-native: space-between only if content smaller than screen

Question

I've got a simple screen with some text and a button at the bottom. The problem is that on some phones/sizes all the content takes around 3/4 height of the screen leaving a gap at the bottom. That's why I did: flex: 1, and space-between as below. But when I do it as below, the content on smaller screens doesn't let me scroll it at all so I don't see/ can't access the button.

Ideally, what I'm trying to do is to let the elements have normal flow if their total height is more than the screen height letting the user freely scroll down to the end. If however, the phone size is big and the content doesn't take the whole screen, it should be arranged as 'space-between'

<ScrollView contentContainerStyle={styles.contentStyle} style={styles.container}>
  <View>
    <Text>Some long text</Text>
  </View>
  <View>
    <Text>Some short text</Text>
    <Button onPress={}>
  </View>
</ScrollView>

Stylesheets:

container: {
  paddingHorizontal: 8,
},
contentStyle: {
  flex: 1,
  justifyContent: 'space-between',
},

Answer 1

try this

<ScrollView
    nestedScrollEnabled
    contentContainerStyle={{flexGrow: 1}}>

    <View style={{flex : 1}}>
        <Text style={{textAlign: 'center'}}>
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
        </Text>
    </View>

    <View>
        <Text  style={{textAlign: 'center'}}>Some short text</Text>
        <Button title={"button"} onPress={{}}/>
    </View>

</ScrollView>

the result