React Native Paper ProgressBar 不可见

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 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.

Answer 2

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
}

eg

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