react native scrollView Height always stays static and does not change

Question

I build react native app and I use with scrollView for header with list of text horizontal. The issue is that the height of the scroll view takes half size of the screen. Even after declared it as a style, it still stays as it is.

screen with the scrollView

            <View style={Style.container} >
                {this.props.ExtendedNavigationStore.HeaderTitle ? <BackHeader header={this.props.ExtendedNavigationStore.HeaderTitle} onPressBack={this.goBack} /> : <Header openDrawer={this.openDrawer} />}
                <ScrollView  contentContainerStyle={{flexGrow:1}} style={Style.scrollableView} horizontal showsHorizontalScrollIndicator={false}>
                    {this.renderScrollableHeader()}
                </ScrollView>
                <Routes /> /* stack with dashboard screen */
            </View>
        </Drawer>

    )
}

styles

import {StyleSheet} from 'react-native'
import {calcSize} from '../../utils'


const Styles = StyleSheet.create({
    container : {
        flex:1,  
        backgroundColor:"#e9e7e8"      
    },
    scrollableView:{
        height: calcSize(40),
        backgroundColor: '#000',

    },
    textCategory:{
        fontSize: calcSize(25),
        color:'#fff'
    },
    scrollableButton:{
        flex:1,
        margin:calcSize(30)
    }
})

export default Styles

As you can see the black size is the scroll View, I want it to be small.

In routes stack into dashboard screen, the style:

const Style = StyleSheet.create({
    container: {
        backgroundColor: '#9BC53D',
        flex: 1,
        justifyContent: 'space-around',
        alignItems: 'center'
    },
    text: {
        fontSize: 35,
        color: 'white',
        margin: 10,
        backgroundColor: 'transparent'
    },
    button: {
        width: 100,
        height: 75,
        margin: 20,
        borderWidth: 2,
        borderColor: "#ecebeb",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 40
    }
})

question from:https://stackoverflow.com/questions/49373417/react-native-scrollview-height-always-stays-static-and-does-not-change

Answer 1

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.