├── .gitignore
├── changelog.md
├── tsconfig.json
├── lib
    ├── index.d.ts
    └── index.js
├── package.json
├── src
    └── index.tsx
└── Readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | # node.js
2 | #
3 | node_modules/
4 | npm-debug.log
5 | yarn-error.log
6 | package-lock.json
7 | yarn.lock 


--------------------------------------------------------------------------------
/changelog.md:
--------------------------------------------------------------------------------
 1 | 
 2 | #### Version 1.0.3 
 3 |  
 4 |  1. Added `hideProgressBar` props
 5 |  2. Fixed bug for inconsistent height for first progress
 6 |  3. Removed Animatable since we aren't using it.
 7 | 
 8 | 
 9 | ### 1.0.11
10 |   1. Updated React-native statusbar dependency 
11 |   2. Updated Readme.md 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["src"],
 3 |   "exclude": [
 4 |     "node_modules",
 5 |     "babel.config.js",
 6 |     "metro.config.js",
 7 |     "jest.config.js"
 8 |   ],
 9 |   "compilerOptions": {
10 |     "lib": ["es5", "es6", "esnext.asynciterable"],
11 |     "allowSyntheticDefaultImports": false,
12 |     "esModuleInterop": false,
13 |     "jsx": "react",
14 |     "moduleResolution": "node",
15 |     "strict": true,
16 |     "target": "esnext",
17 |     "resolveJsonModule": true,
18 |     "outDir": "./lib",
19 |     "declaration": true
20 |   }
21 | }


--------------------------------------------------------------------------------
/lib/index.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="react" />
 2 | import { SafeAreaDeciderProps } from 'react-native-smart-statusbar';
 3 | export interface ProgressBarProps {
 4 |     colorOfProgressBar?: string;
 5 |     hideProgressBar?: boolean;
 6 |     colorOfNonProgressBar?: string;
 7 |     currentProgress: number;
 8 |     totalNumberOfProgressBars: number;
 9 |     heightOfProgressBar?: number;
10 |     SafeAreaViewDeciderProps?: SafeAreaDeciderProps;
11 |     blink?: boolean;
12 |     durationForTheBlink?: number;
13 | }
14 | declare const ProgressBar: ({ currentProgress, colorOfNonProgressBar, colorOfProgressBar, heightOfProgressBar, SafeAreaViewDeciderProps, totalNumberOfProgressBars, blink, durationForTheBlink, hideProgressBar, }: ProgressBarProps) => JSX.Element | null;
15 | export default ProgressBar;
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-form-progress",
 3 |   "version": "1.0.24",
 4 |   "description": "A react native component super useful in displaying progress when user is filling up forms like signup page, setting, information catering etc",
 5 |   "main": "lib/index.js",
 6 |   "types": "lib",
 7 |   "scripts": {
 8 |     "build": "npm run prettier:write && tsc -p .",
 9 |     "prettier:base": "prettier --parser typescript --single-quote",
10 |     "prettier:check": "npm run prettier:base -- --list-different \"src/**/*.tsx\"",
11 |     "prettier:write": "npm run prettier:base -- --write \"src/**/*.tsx\""
12 |   },
13 |   "husky": {
14 |     "hooks": {
15 |       "pre-commit": "lint-staged"
16 |     }
17 |   },
18 |   "lint-staged": {
19 |     "src/**/*.tsx": [
20 |       "npm run prettier:write",
21 |       "git add"
22 |     ]
23 |   },
24 |   "repository": {
25 |     "type": "git",
26 |     "url": "git+https://github.com/blendtale/react-native-form-progres.git"
27 |   },
28 |   "keywords": [
29 |     "form",
30 |     "progress",
31 |     "progress-bar",
32 |     "progressbar",
33 |     "react-native",
34 |     "react"
35 |   ],
36 |   "author": "\"Rohit Bhatia <irohitbhatia@gmail.com>",
37 |   "license": "MIT",
38 |   "dependencies": {
39 |     "react-native-smart-statusbar": "^1.0.24"
40 |   },
41 |   "peerDependencies": {
42 |     "react": "*",
43 |     "react-native": "*"
44 |   },
45 |   "devDependencies": {
46 |     "@types/react-native": "^0.64.2",
47 |     "husky": "^6.0.0",
48 |     "lint-staged": "^10.2.10",
49 |     "prettier": "^2.0.5",
50 |     "typescript": "^4.1.3"
51 |   },
52 |   "bugs": {
53 |     "url": "https://github.com/blendtale/react-native-form-progress/issues"
54 |   },
55 |   "homepage": "https://github.com/blendtale/react-native-form-progress#readme"
56 | }
57 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { View, Dimensions } from 'react-native';
 3 | import SafeAreaViewDecider from 'react-native-smart-statusbar';
 4 | const SafeAreaViewDeciderDefaultProps = {
 5 |     statusBarHiddenForNotch: false,
 6 |     statusBarHiddenForNonNotch: true,
 7 | };
 8 | const ProgressBar = ({ currentProgress, colorOfNonProgressBar = 'white', colorOfProgressBar = 'black', heightOfProgressBar = 5, SafeAreaViewDeciderProps = SafeAreaViewDeciderDefaultProps, totalNumberOfProgressBars, blink = true, durationForTheBlink = 500, hideProgressBar = false, }) => {
 9 |     const width = Dimensions.get('window').width;
10 |     const [blinkVisibility, setBlinkVisiblity] = React.useState(false);
11 |     const blinkInterval = React.useRef(null);
12 |     const progressBarArray = [];
13 |     React.useEffect(() => {
14 |         if (blink) {
15 |             const timer = setInterval(() => {
16 |                 setBlinkVisiblity((blinkVisibility) => !blinkVisibility);
17 |             }, durationForTheBlink);
18 |             return () => {
19 |                 clearInterval(timer);
20 |             };
21 |         }
22 |     }, []);
23 |     if (hideProgressBar) {
24 |         return null;
25 |     }
26 |     const widthOfIndividualBlog = width / totalNumberOfProgressBars;
27 |     const currentProgressValue = currentProgress > totalNumberOfProgressBars
28 |         ? totalNumberOfProgressBars
29 |         : currentProgress;
30 |     for (let i = 0; i < totalNumberOfProgressBars + 1; i++) {
31 |         if (i < currentProgressValue) {
32 |             progressBarArray.push(React.createElement(View, { style: {
33 |                     width: widthOfIndividualBlog,
34 |                     backgroundColor: colorOfProgressBar,
35 |                     height: heightOfProgressBar,
36 |                 }, key: i }));
37 |         }
38 |         else if (i > currentProgressValue) {
39 |             React.createElement(View, { style: {
40 |                     width: widthOfIndividualBlog,
41 |                     height: heightOfProgressBar,
42 |                     backgroundColor: colorOfNonProgressBar,
43 |                 }, key: i });
44 |         }
45 |         else if (i === currentProgressValue) {
46 |             if (blinkVisibility) {
47 |                 progressBarArray.push(React.createElement(View, { style: {
48 |                         width: widthOfIndividualBlog,
49 |                         backgroundColor: colorOfProgressBar,
50 |                         height: heightOfProgressBar,
51 |                     }, key: i }));
52 |             }
53 |         }
54 |     }
55 |     return (React.createElement(View, null,
56 |         React.createElement(SafeAreaViewDecider, Object.assign({}, SafeAreaViewDeciderProps)),
57 |         React.createElement(View, { style: {
58 |                 display: 'flex',
59 |                 flexDirection: 'row',
60 |                 height: heightOfProgressBar,
61 |             } }, progressBarArray)));
62 | };
63 | export default ProgressBar;
64 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import { View, Dimensions } from 'react-native';
  3 | import SafeAreaViewDecider, {
  4 |   SafeAreaDeciderProps,
  5 | } from 'react-native-smart-statusbar';
  6 | 
  7 | export interface ProgressBarProps {
  8 |   colorOfProgressBar?: string;
  9 |   hideProgressBar?: boolean;
 10 |   colorOfNonProgressBar?: string;
 11 |   currentProgress: number;
 12 |   totalNumberOfProgressBars: number;
 13 |   heightOfProgressBar?: number;
 14 |   SafeAreaViewDeciderProps?: SafeAreaDeciderProps;
 15 |   blink?: boolean;
 16 |   durationForTheBlink?: number;
 17 | }
 18 | 
 19 | const SafeAreaViewDeciderDefaultProps = {
 20 |   statusBarHiddenForNotch: false,
 21 |   statusBarHiddenForNonNotch: true,
 22 | };
 23 | 
 24 | const ProgressBar = ({
 25 |   currentProgress,
 26 |   colorOfNonProgressBar = 'white',
 27 |   colorOfProgressBar = 'black',
 28 |   heightOfProgressBar = 5,
 29 |   SafeAreaViewDeciderProps = SafeAreaViewDeciderDefaultProps,
 30 |   totalNumberOfProgressBars,
 31 |   blink = true,
 32 |   durationForTheBlink = 500,
 33 |   hideProgressBar = false,
 34 | }: ProgressBarProps) => {
 35 |   const width = Dimensions.get('window').width;
 36 |   const [blinkVisibility, setBlinkVisiblity] = React.useState(false);
 37 |   const blinkInterval: any = React.useRef(null);
 38 |   const progressBarArray = [];
 39 | 
 40 |   React.useEffect(() => {
 41 |     if (blink) {
 42 |       const timer = setInterval(() => {
 43 |         setBlinkVisiblity((blinkVisibility) => !blinkVisibility);
 44 |       }, durationForTheBlink);
 45 |       return () => {
 46 |         clearInterval(timer);
 47 |       };
 48 |     }
 49 |   }, []);
 50 | 
 51 |   if (hideProgressBar) {
 52 |     return null;
 53 |   }
 54 | 
 55 |   const widthOfIndividualBlog = width / totalNumberOfProgressBars;
 56 |   const currentProgressValue =
 57 |     currentProgress > totalNumberOfProgressBars
 58 |       ? totalNumberOfProgressBars
 59 |       : currentProgress;
 60 | 
 61 |   for (let i = 0; i < totalNumberOfProgressBars + 1; i++) {
 62 |     if (i < currentProgressValue) {
 63 |       progressBarArray.push(
 64 |         <View
 65 |           style={{
 66 |             width: widthOfIndividualBlog,
 67 |             backgroundColor: colorOfProgressBar,
 68 |             height: heightOfProgressBar,
 69 |           }}
 70 |           key={i}
 71 |         ></View>
 72 |       );
 73 |     } else if (i > currentProgressValue) {
 74 |       <View
 75 |         style={{
 76 |           width: widthOfIndividualBlog,
 77 |           height: heightOfProgressBar,
 78 |           backgroundColor: colorOfNonProgressBar,
 79 |         }}
 80 |         key={i}
 81 |       ></View>;
 82 |     } else if (i === currentProgressValue) {
 83 |       if (blinkVisibility) {
 84 |         progressBarArray.push(
 85 |           <View
 86 |             style={{
 87 |               width: widthOfIndividualBlog,
 88 |               backgroundColor: colorOfProgressBar,
 89 |               height: heightOfProgressBar,
 90 |             }}
 91 |             key={i}
 92 |           ></View>
 93 |         );
 94 |       }
 95 |     }
 96 |   }
 97 |   return (
 98 |     <View>
 99 |       <SafeAreaViewDecider {...SafeAreaViewDeciderProps} />
100 |       <View
101 |         style={{
102 |           display: 'flex',
103 |           flexDirection: 'row',
104 |           height: heightOfProgressBar,
105 |         }}
106 |       >
107 |         {progressBarArray}
108 |       </View>
109 |     </View>
110 |   );
111 | };
112 | 
113 | export default ProgressBar;
114 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | |              | Status                                                                                                                                                                                                                                                                                                                                                         |
 2 | | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 3 | | Dependencies | [![Dependencies](https://img.shields.io/david/blendtale/react-native-form-progress)](https://david-dm.org/blendtale/react-native-form-progress) [![Peer dependencies](https://img.shields.io/david/peer/blendtale/react-native-form-progress)](https://david-dm.org/blendtale/react-native-form-progress)                                                      |
 4 | | Package      | [![npm package version](https://img.shields.io/npm/v/react-native-form-progress)](https://www.npmjs.com/package/react-native-form-progress) [![npm downloads](https://img.shields.io/npm/dt/react-native-form-progress)](https://www.npmjs.com/package/react-native-form-progress) ![Type definitions](https://img.shields.io/badge/types-TypeScript-blue.svg) |
 5 | 
 6 | # React Native Form progress
 7 | 
 8 | A react native component super useful in displaying progress when user is filling up forms like signup page, setting, information catering etc
 9 | 
10 | ### Note
11 | 
12 | - If you find this repo interesting do not forgot to give it a star.
13 | - If you have a feature request than open it on github and feature should be added within 2-7 days (author of the repo would keep you updated)
14 | - If you find a bug, open an issue on github and author would fix it less than 24 hours
15 | 
16 | ## Installing
17 | 
18 | ```
19 | npm i react-native-device-info
20 | npm i react-native-form-progress
21 | ```
22 | 
23 | #### For IOS
24 | 
25 | ```
26 | cd ios
27 | pod install
28 | ```
29 | 
30 | for people using RN <= 0.59, please read the installation instruction from `react-native-device-info` [repo](https://github.com/react-native-community/react-native-device-info)
31 | 
32 | ### Using
33 | 
34 | `import ProgressBar from 'react-native-form-progress'`
35 | 
36 | And then
37 | 
38 | ```
39 | 	<ProgressBar
40 | 					currentProgress={7}
41 | 					totalNumberOfProgressBars={8}
42 | 					colorOfProgressBar="#2E7D32"
43 | 					 />
44 | ```
45 | 
46 | and just keep incrementing current progress
47 | 
48 | ### Working GIFS
49 | 
50 | ### With blink
51 | 
52 | ![ezgif com-video-to-gif](https://user-images.githubusercontent.com/32276134/64683540-1180fd00-d4a1-11e9-9711-c87b2905b8d4.gif)
53 | 
54 | ### Props
55 | 
56 | | **Prop**                  | **Type** | **Default** | **Required** | **description**                                                                                               |
57 | | ------------------------- | -------- | ----------- | ------------ | ------------------------------------------------------------------------------------------------------------- |
58 | | hideProgressBar           | Boolean  | false       | No           | hides progress bar ( returns auxilary component)                                                              |
59 | | colorOfProgressBar        | string   | 'black'     | No           | What Color do you want your progress bar to have                                                              |
60 | | colorOfNonProgressBar     | string   | 'white'     | No           | the space progress bar is yet to take                                                                         |
61 | | currentProgress           | number   | none        | Yes          | the current progress of your progress bar, **increment this value** on sucessful completion of event          |
62 | | totalNumberOfProgressBars | number   | none        | Yes          | Typical this determines how many boxes should progress bar have in all together                               |
63 | | heightOfProgressBar       | number   | 5           | No           | what should be the height of your progress bar                                                                |
64 | | SafeAreaViewDeciderProps  | object   | See below   | No           | Takes [SafeAreaViewDeciderProps](https://www.npmjs.com/package/react-native-form-progress) Props as an object |
65 | | blink                     | boolean  | true        | No           | Do you wan the progress bar to blink or not                                                                   |
66 | | durationForTheBlink       | false    | 500         | No           | how fast you want the blink to happen                                                                         |
67 | 
68 | ### Props for Safe Area
69 | 
70 | Pass Safe Area props like this
71 | 
72 | ```
73 | 	SafeAreaViewDeciderProps: {
74 | 		statusBarHiddenForNotch: false,
75 | 		statusBarHiddenForNonNotch: false,
76 | 	},
77 | ```
78 | 
79 | Default value for Safe Area are
80 | 
81 | ```
82 | statusBarHiddenForNotch: false,
83 | statusBarHiddenForNonNotch: false,
84 | ```
85 | 


--------------------------------------------------------------------------------