I would like to create a horizontal ScrollView, but I faced some issues. The ScrollView takes all the remaining space of my screen, but what I want is the ScrollView to only take the height of the biggest children. How can I achieve that?

I have tried to set a fixed height on the style, but that didn't work. Any help?

<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.guessList}>
{guessList.map((guess, index) => (
    <NumberContainer style={styles.guessItem} key={guess}>#{guessList.length - index} {guess}</NumberContainer>
))}

const styles= StyleSheet.create({
guessList: {
    height: 70
},
guessItem: {
    marginRight: 5
}

});

I would like to create a horizontal ScrollView, but I faced some issues. The ScrollView takes all the remaining space of my screen, but what I want is the ScrollView to only take the height of the biggest children. How can I achieve that?

I have tried to set a fixed height on the style, but that didn't work. Any help?

<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.guessList}>
{guessList.map((guess, index) => (
    <NumberContainer style={styles.guessItem} key={guess}>#{guessList.length - index} {guess}</NumberContainer>
))}

const styles= StyleSheet.create({
guessList: {
    height: 70
},
guessItem: {
    marginRight: 5
}

});

• javascript
• reactjs
• react-native
• react-native-scrollview

• Can you post you code ? – BloodyMonkey Commented Jul 29, 2020 at 7:37
• 1 Have you tried using flexGrow? – Vignesh V Pai Commented Jul 29, 2020 at 7:37
• No, I have not tried to use flexGrow. May I know where should I put it and why should I put it? – Daniel Chan Commented Jul 29, 2020 at 7:43

4 Answers 4

I just tried to add {flexGrow: 0} on the style of ScrollView and now it works. It's only taking the space enough for cotaining the children ponents.

Like @Vignesh say, this should do the work

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

Here's a trick for you: get the biggest size and set it to the scrollview

<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{height: this.state.biggest_child_height}}>
    {guessList.map((guess, index) => (
        <NumberContainer onLayout={(event) => {
            if(event.nativeEvent.layout.height > this.state.biggest_child_height){
                this.setState({biggest_child_height: event.nativeEvent.layout.height})
            }
        }} style={styles.guessItem} key={guess}>#{guessList.length - index} {guess}</NumberContainer>
    ))}
</ScrollView>

Edit:

You obviously need to play with flex or set a height to render the ponent first time

Try this:

<View style={{maxHeight: 400, minHeight: 100}}>
   <ScrollView>
     ...
   </ScrollView>
</View>

After that View will get height depending on height of ScrollView.