React Native ScrollView height issues

Question

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
}

});

No, I have not tried to use flexGrow. May I know where should I put it and why should I put it? — Daniel Chan, Jul 29 '20 at 07:43

score 8 · Accepted Answer · answered Jul 29 '20 at 08:11

8

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 components.

answered Jul 29 '20 at 08:11

Daniel Chan

343
5
13

score 0 · Answer 2 · answered Jul 29 '20 at 07:44

0

Like @Vignesh say, this should do the work

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

answered Jul 29 '20 at 07:44

BloodyMonkey

1,572
1
9
15

Just try, but didn't work. The ScrollView still occupy the remaining height of the screen – Daniel Chan Jul 29 '20 at 07:54

score 0 · Answer 3 · answered Jul 29 '20 at 08:05

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 component first time

score 0 · Answer 4 · answered Jul 29 '20 at 09:03

0

Try this:

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

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

answered Jul 29 '20 at 09:03

M.N.

65
8

React Native ScrollView height issues

4 Answers4