How to make the ProgressBar occupy the remaining width of the View container-CodePudding

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?

CodePudding user response：

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