React Native Paper ProgressBar Not visible

Question

Hello i was following along a tutorial and it was going fine, until the tutor used react-native-paper ProgressBar in his project, I wrote exactly same but it was not visible, I found the documentation and plugged it, still not visible.

What am i Doing wrong?

import {View, StyleSheet, Text} from 'react-native' ;
import { ProgressBar, Colors } from 'react-native-paper';

import CountDown from '../comps/CountDown.js' ;

const Timer = ({task}) => {
  return ( 
    <View style={styles.container}> 
      <CountDown />
      <Text style={styles.text}> Focusing On:</Text>
      <Text style={[styles.text, styles.textBold]}> {task} </Text>
      <ProgressBar progress={0.4} color='#5E84E2' style={styles.progress}/>
    </View>
  ) ;
}

const styles = StyleSheet.create({
  container : {
    flex: 1,
    width: 100,
    alignItems: 'center' ,
    justifyContent: 'center',
    paddingTop: 40,
  },
  text: {
    // flex: 0.5, 
    color: 'white'
  },
  textBold: {
    fontWeight: 'bold' ,
    // borderColor: 'white',
    // borderWidth: 1,
    // borderStyle: 'solid' ,
  },
  progress: {
    height: 10,
    // borderColor: 'white',
    // borderWidth: 1,
    // borderStyle: 'solid' ,
  }
}) ;

export default Timer ;

Also, If i were to Give border to the progressBar, it appears but keep on increasing in width even when width is more than the viewport width. I dont know what is happening

score 4 · Accepted Answer · answered Apr 28 '21 at 12:21

4

The problem here is when you use alignItems the children components need to have a fixed width, your progress bar doesnet have a fixed width.

You will have to provide a with in the styles.

 progress: {
    height: 10,
    width:50
  }

Based on documentation default value for width is

auto (default value) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.

Better have a value for width which will solve your issue.

answered Apr 28 '21 at 12:21

Guruparan Giritharan

15,660
4
27
50

Ok i will try this – manan aggarwal Apr 28 '21 at 17:09
1

yes bro, it worked, thanks for saving me many many hours :). I never knew this quirk of alignItems. Thanks Once Again – manan aggarwal Apr 30 '21 at 05:06

score 1 · Answer 2 · answered Nov 29 '21 at 15:18

A responsive solution

Currently ProgressBar doesn't support the flex styling system. If someone is also looking to make the width equal to 100% if it's parrent component, there is a good recommended solution provided here.

Just set the width to undefined:

progress: {
    height: 10,
    width:undefined
}

e.g.

<View style={{ flex: 2, other flex styles }}>
  <ProgressBar progress={0.5} color="white"  style={{ height: 5, width: undefined }} />
</View>

React Native Paper ProgressBar Not visible

2 Answers2

A responsive solution