0

What I want to achieve: I want a horizontal view with two elements:

  • Text
  • ProgressBar (imported from React Native Paper)

I want the text to take as much space as needed (fit-content). The rest of the width should be taken by the ProgressBar.

What I've tried so far:

                <View style={{
                               flexDirection: 'row',
                               alignItems: 'center'
                   }}>
                    <Text>Difficulty:</Text>
                    <ProgressBar
                        progress={0.2}
                        color="#5E84E2"
                    />
                </View>

With the above setup, the ProgressBar is not even visible. What am I doing wrong?

Rechu
  • 617
  • 1
  • 4
  • 14

1 Answers1

1

You can give flex:1 to progress bar view to fit in remaining space

<View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
    }}>
    <View>
      <Text>Difficulty:</Text>
    </View>
    <View style={{ flex: 1 }}>
      <ProgressBar progress={0.5} color="red" />
    </View>
  </View>

Preview : https://snack.expo.dev/Ef39fDbCK

Masoud Bidar
  • 156
  • 6
  • Why did you put `Text` and `ProgressBar` into seperate `View`s. Shouldn't we just use `style` directly on `ProgressBar`, should we? – Rechu Nov 12 '21 at 07:47
  • @Rechu because it doesn't work like that. `ProgressBar` has a default value of `width=auto`, which will fill the width of its parent. you can override it by defining the width as prop, but your question is about filling the remaining space after text. which will be done by flex. now you can change the text to a longer value and the width of `ProgressBar` will change base on that. – Masoud Bidar Nov 12 '21 at 08:18
  • Does the same rule apply to `Text` as well (the width of Text is set to auto)? By the way, where did you find the information that the width of `ProgressBar` is auto? I think that I missunderstood on start how the layout works in React. – Rechu Nov 12 '21 at 09:07
  • @Rechu `React` is using `FlexBox` and the default value of `width` and `height` is `auto`. I think you need to read the documentation of them, this questions are irrelative to the original topic but FYI your code needs `flex` and you should wrap them with `View` in order to have two columns side by side. If you have any problem with using `View` please explain why, otherwise if this fixes your problem you may upvote and select my answer. – Masoud Bidar Nov 12 '21 at 09:27
  • right now I am at work, but once I finish, I will check your approach and upvote. Thanks for prompt replies! – Rechu Nov 12 '21 at 09:50