ProgressBar with % height style does not work on web

[Big-Cheung]

Current behaviour

ProgressBar does not work with a style prop that sets the height to a percentage on web. It will simply set its height to 0px.

Expected behaviour

ProgressBar with height set to 20% is expected to have a height of 20% of the parent view. It works properly on Android and iOS simulator, but not on Web.

How to reproduce?

Set the style prop of a ProgressBar to a percentage and view on web.

Preview

Sample code :
https://snack.expo.dev/@bigcheung/frisky-cashew?platform=web
On both Android and iOS simulator, both the yellow and purple bars are visible. Purple bar disappears on web, however.

What have you tried so far?

The issue is that the uppermost view component of the ProgressBar component (used for accessability) fits content. However, when the height of the progress bar is calculated from the height of the parent, and the height of the parent is calculated from the content, the height shrinks to 0px. It must be fixed from ProgressBar.tsx unless the DOM element is manipulated directly.

Environment

React Native Paper 4.9.2
Tested with Google Chrome 114.0.5735.199, Firefox 112.0.1, Microsoft Edge Version 114.0.1823.82