Barcode is not complete when first render page

[s89146892002]

My app have two page, one is home, another is barcode page.
The initial page is home page then I change to the barcode page.The barcode show like below.

Then I change to the home then change to the barcode page again. The barcode show normal.

render() { return ( <Container> <Grid> <Row Row size={ 30 } style={ { alignItems: 'center', justifyContent: 'center', } }> <Text style={ { fontSize: 20 } }> test </Text> </Row> <Row Row size={ 70 } style={ { alignItems: 'center', justifyContent: 'center', } }> <Barcode value={ this.props.code } text={ this.props.code } /> </Row> </Grid> </Container> ); }

Why? I'm so confused. thank you!