Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Set Progress.Bar width to 100%

See original GitHub issue

Hello Joel and RNP community,

Thanks for creating and open sourcing such a helpful lib. I’m using it for all my react-native projects.

In one of those projects, I need to set the width of the progress bar to 100%. I did it by passing width={null} to progress bar. This sets the width to 100 %, but the progress animation is hindered (gif attached).

How to go about this ?

Thank you.

Issue Analytics

State:
Created 7 years ago
Reactions:8
Comments:6

Top GitHub Comments

12reactions

RomanPerincommented, Jan 21, 2017

It is great to have a possibility to use flex. Any updates, plans?

8reactions

yvbeekcommented, Sep 19, 2016

Setting the width to null seems causes a few rendering issues. I don’t think that it is supported 😃

@oblador instead of using absolute widths, perhaps it would be a nice idea to use the flex system? For example 60% fill:

<View style={{ flexDirection: "row", backgroundColor: "lightgray", borderRadius: 4, overflow: 'hidden',  }}>
  <View style={{ flex: percentage, height: 30, backgroundColor: "red" }} />
  <View style={{ flex: 1 - percentage }} />
</View>

Top Results From Across the Web

progress bar 100% width with css - Stack Overflow

I'm trying to create custom progress bar ...

W3.CSS Progress Bars - W3Schools

Change the width of a progress bar with the CSS width property (from 0 to 100%): ... Use the w3-color classes to change...

Progress - Bootstrap

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. How it works.

The Progress Indicator element - HTML - MDN Web Docs

The HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

How to make a progress bar in CSS - Alvaro Trigo

Set whatever height and width you need for progress , and give it a border. You'll basically just end up with a rectangle....