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

Answer 1

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

You will have to provide a fixed width 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.

Having a value for width will solve your issue.