Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added New component: LinearProgress #2867

Merged
merged 11 commits into from
Mar 18, 2021

Conversation

arpitBhalla
Copy link
Member

@arpitBhalla arpitBhalla commented Mar 16, 2021

What kind of change does this PR introduce?

New Component LinearProgress
According to material desgin guidelines https://material.io/components/progress-indicators#linear-progress-indicators

Did you add tests for your changes?
Yupp

If relevant, did you update the documentation?

Summary

Does this PR introduce a breaking change?
Nope

Other information

@arpitBhalla
Copy link
Member Author

@flyingcircle Please Review, I havn't exported this from index.ts, tests are pending, Please Share your views

@arpitBhalla
Copy link
Member Author

WhatsApp.Video.2021-03-16.at.10.16.04.PM.mp4

@codecov
Copy link

codecov bot commented Mar 16, 2021

Codecov Report

Merging #2867 (b0d77b7) into next (ff9001e) will decrease coverage by 0.67%.
The diff coverage is 60.86%.

❗ Current head b0d77b7 differs from pull request most recent head 6f4813a. Consider uploading reports for the commit 6f4813a to get more accurate results
Impacted file tree graph

@@            Coverage Diff             @@
##             next    #2867      +/-   ##
==========================================
- Coverage   89.43%   88.76%   -0.68%     
==========================================
  Files          47       48       +1     
  Lines         956      979      +23     
  Branches      372      382      +10     
==========================================
+ Hits          855      869      +14     
- Misses         66       74       +8     
- Partials       35       36       +1     
Impacted Files Coverage Δ
src/linearProgress/LinearProgress.tsx 60.86% <60.86%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ff9001e...6f4813a. Read the comment docs.

Copy link
Collaborator

@flyingcircle flyingcircle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks awesome! I think the component should probably also extend ViewProps. You'll definitely want people to be able to extend certain capabilities such as accessibility to the component.

src/linearProgress/LinearProgress.tsx Outdated Show resolved Hide resolved
@arpitBhalla
Copy link
Member Author

@flyingcircle Kindly review

@flyingcircle
Copy link
Collaborator

Code looks good just looking through it. I'll try to test it out myself here later on in a bit.

@arpitBhalla
Copy link
Member Author

@flyingcircle sure sir🙂

@flyingcircle
Copy link
Collaborator

So I tested it out in iOS using your code. I made this adjustment:

        <Text>Linear Progress Indeterminate </Text>
        <LinearProgress style={{ marginVertical: 10 }} color="red" />
        <Text>Linear Progress Secondary color</Text>
        <LinearProgress style={{ marginVertical: 10 }} color="secondary" />
        <Text>Linear Progress with value</Text>
        <LinearProgress
          style={{ marginVertical: 10 }}
          value={progress}
          variant="determinate"
          color="red"
        />
        <Text>Linear Progress with value secondary color</Text>

        <LinearProgress
          style={{ marginVertical: 10 }}
          value={progress}
          variant="determinate"
          color="secondary"
        />
        <Button
          disabled={progress > 0}
          onPress={() => {
            setProgress(0.00001);
          }}
          title={'Start Progress'}
          containerStyle={{ margin: 10 }}
        />
        <Button
          disabled={progress === 0}
          onPress={() => {
            setProgress(0);
          }}
          title={'Restart'}
          containerStyle={{ margin: 10 }}
        />

I wasn't able to see the progress in the red bars when testing with the demo app on iOS. You currently have it where the Color is like a "dark pink" on "lighter pink". I think it may also be reasonable to have a trackColor prop so that they aren't forced into using the same color for both.

@arpitBhalla
Copy link
Member Author

@flyingcircle I made Changes, Please Review

@flyingcircle flyingcircle merged commit 2849371 into react-native-elements:next Mar 18, 2021
@flyingcircle
Copy link
Collaborator

Awesome! This looks great! I only see only minor change that should be made to the demo, but I'll post it there. Great work!

@arpitBhalla
Copy link
Member Author

@flyingcircle Thanku Sir

@arpitBhalla arpitBhalla deleted the next branch March 18, 2021 16:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants