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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)