react native scrollView Height always stays static and does not change

There is an existing limitation with ScrollView where height cannot be provided directly.
Wrap the ScrollView in another View and give height to that View.

Like,

  render() {
    return (
      <View style={styles.container}>
        <View style={{height: 80}} >
          <ScrollView
            horizontal
            style={{ backgroundColor: 'blue'}}
          >
            <Text style={{padding: 24}} >title1</Text>
            <Text style={{padding: 24}} >title2</Text>
            <Text style={{padding: 24}} >title3</Text>
            <Text style={{padding: 24}} >title4</Text>
            <Text style={{padding: 24}} >title5</Text>
          </ScrollView>
        </View>
      </View>
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

snack sample: https://snack.expo.io/HkVDBhJoz

EXTRAS: Unlike height providing width to a ScrollView will work correctly

Hope this helps.

That worked for me:

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  <View style={{ flexGrow: 1 }}>
    ...
  </View>
</ScrollView>

Use flexGrow:0 inside ScrollView style

<ScrollView style={{ flexGrow:0 }}>

Considering the issue that you are using fixed height for the header, and flex for the Routes maybe, the orientation for different devices would not scale well and would look weird.

Therefore you may consider switching it to the flex

Here is the example by adding flexGrow to the styles of the ScrollView since it accepts view props

<View style={{ flex: 1 }}>
  <ScrollView style={{ flexGrow: 0.05, backgroundColor: 'red', paddingTop: 50 }} horizontal>
    <View style={{ width: 100 }}><Text>Label</Text></View>
    <View style={{ width: 100 }}><Text>Label</Text></View>
    <View style={{ width: 100 }}><Text>Label</Text></View>
    <View style={{ width: 100 }}><Text>Label</Text></View>
    <View style={{ width: 100 }}><Text>Label</Text></View>
  </ScrollView>
  <View style={{ flex: 0.95, backgroundColor: 'green' }} />
</View>

and here's the link to the snack expo