Progress.Bar progress starting from center

Progress.Bar is rendering with the progress beginning from near the middle of the bar, then expanding to fill the bar at 100% as demonstrated in this screenshot:

Any ideas what’s going on here? I’ve experimented with various styles and Progress.Bar properties and nothing seems to change the behavior.

This is with “react-native”: “0.61.4”, running in the iOS Simulator (iPad 7, OS 13.3)

Here’s a subset of my code that at least demonstrates how I’m using the progress bar in the layout and it’s styling, although this code isn’t functional as I quickly extracted the rest of my non-relevant view code:

import React, { Component } from 'react';
import {
  StyleSheet,
  SafeAreaView,
} from 'react-native';
import { WebView } from 'react-native-webview';
import * as Progress from 'react-native-progress';
import type { WebBrowser } from './WebBrowser';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webView: {
    flex: 1,
  },
  progressBar: {
    position: 'absolute',
    flex: 1,
    top: 0,
    height: 6,
    width: '100%',
    borderRadius: 0,
  },
});

/**
 * View for content reading.
 */
export default
class ContentReaderView extends Component<{
  viewModel: ContentReaderViewModel,
}>
  render() {
    const { viewModel } = this.props;
    return (
      <SafeAreaView style={styles.container}>
        <WebView
          style={styles.webView}
        />
        { viewModel.isLoading && (
          <Progress.Bar
            style={styles.progressBar}
            progress={viewModel.loadProgress}
          />
        }
      </SafeAreaView>
    );
  }
}

[kunalmhatre]

@HolySamosa, can you please try setting width as null instead of handling it via CSS?

<Progress.Bar
    width={null}
    style={styles.progressBar}
    progress={viewModel.loadProgress}
/>

Reference: https://github.com/oblador/react-native-progress#progressbar

For width property:

Full width of the progress bar, set to null to use automatic flexbox sizing.

I hope that solves your problem; if not, please let me know. 😃

[HolySamosa]

Whoops. Somehow I missed the earlier notifications for this thread. @kunalmhatre, I’ll give your suggestion a try. @hardikramoliya, did you have the same issue and did this solve your problem?

Thanks!