Nonchalant Programming Master

    rn-screen-progress-bar

    1.0.1 • Public • Published

    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!

    https://user-images.githubusercontent.com/21690864/131182596-e82e0034-a6ad-4028-a912-efc1c2198890.mp4

    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>
    

    Simulator Screen Shot - iPhone 12 - 2021-08-27 at 21 15 10

    Props

    Percentage

    Simulator Screen Shot - iPhone 12 - 2021-08-27 at 21 14 44

    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>
    

    Keywords

    none

    Install

    npm i rn-screen-progress-bar

    DownloadsWeekly Downloads

    4

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    8.01 kB

    Total Files

    7

    Last publish

    Collaborators

    • wojciech.nowaczyk