rn-screen-progress-bar
React native device screen progress bar.
Pretty simple package that helps implement screen progress bar. It works on ScrollView component, so it will count everything you put inside ContentArea component. It supports both, Android and IOS platforms.
If you have any suggestions or find any bug, feel free to make an issue!
Import and usage
Firstly, you need to import the ContentArea component to the file you want to use it.
import {ContentArea} from 'rn-screen-progress-bar';
Than you just need to put the component in the right place and put the children elements inside.
<ContentArea>
<Text>Lorem ipsum dolor sit amet</Text>
</ContentArea>
Props
Percentage
percentage
By default the percentage text is hidden, to show it you need to pass "percentage" prop. <ContentArea
percentage
percentageColor="#ffffff">
<Text>Lorem ipsum dolor sit amet</Text>
</ContentArea>
percentageColor
You can also change the text color by passing the color in the "percentageColor" prop. By default it is set to white. <ContentArea
percentage
percentageColor="#ffffff">
<Text>Lorem ipsum dolor sit amet</Text>
</ContentArea>
Customization
backgroundColor
It allows to set the color of the underneath bar. By defult it is set to white. <ContentArea
backgroundColor="#000000">
<Text>Lorem ipsum dolor sit amet</Text>
</ContentArea>
barColor
It allows to change the progress bar background color. By default it is set to black. <ContentArea
barColor="#8BED4F">
<Text>Lorem ipsum dolor sit amet</Text>
</ContentArea>
top
It allows to set the position of the whole bar from the top. By default it is set to 0. <ContentArea
top="20">
<Text>Lorem ipsum dolor sit amet</Text>
</ContentArea>