Skip to content

Commit 33b4242

Browse files
TatianaKaposTatianaKapos
authored
Add windows progress bar (#37)
1 parent 5457339 commit 33b4242

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+3597
-1910
lines changed

‎.flowconfig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
[ignore]
22
; We fork some components by platform
33
.*/*[.]android.js
4+
.*/*[.]windows.js
45

56
; These should not be required directly
67
; require from fbjs/lib instead: require('fbjs/lib/warning')

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,6 @@ buck-out/
4848
\.buckd/
4949
!debug.keystore
5050
*.keystore
51+
52+
#VS code
53+
.vscode/**

‎README.md

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66
[![MIT License][license-badge]][license]
77
[![Lean Core Badge][lean-core-badge]][lean-core-issue]
88

9-
ProgressBar Component for iOS, based on UIProgressView.
9+
ProgressBar Component for iOS (based on UIProgressView) and Windows.
1010

11-
<img src="https://user-images.githubusercontent.com/6936373/73007429-e09dd500-3e4f-11ea-85dd-ce06be668975.png" width="320"/>
11+
| iOS | Windows |
12+
| --- | --- |
13+
| <img src="https://user-images.githubusercontent.com/6936373/73007429-e09dd500-3e4f-11ea-85dd-ce06be668975.png" width="320"> | <img src="https://user-images.githubusercontent.com/42554868/87102503-fb4de580-c206-11ea-98f7-b9f911d115f8.gif" width="320" height="500"> >
1214

1315
## Getting started
1416

@@ -40,8 +42,31 @@ Run the following commands
4042
react-native link @react-native-community/progress-view
4143
```
4244

45+
#### Windows
46+
##### Add the `progress-view` project to your solution.
47+
48+
1. Open the solution in Visual Studio 2019
49+
2. Right-click Solution icon in Solution Explorer > Add > Existing Project
50+
Select `node_modules\@react-native-community\progress-view\windows\progress-view\progress-view.vcxproj`
51+
52+
##### **windows/myapp.sln**
53+
Add a reference to `progress-view` to your main application project. From Visual Studio 2019:
54+
55+
Right-click main application project > Add > Reference...
56+
Check `progress-view` from Solution Projects.
57+
58+
##### **pch.h**
59+
60+
Add `#include "winrt/progress_view.h"`.
61+
62+
##### **app.cpp**
63+
64+
Add `PackageProviders().Append(winrt::progress_view::ReactPackageProvider());` before `InitializeComponent();`.
65+
66+
4367
### Manual installation
4468

69+
#### IOS
4570
<details>
4671
<summary>Manually linking the library - iOS</summary>
4772

@@ -54,9 +79,36 @@ react-native link @react-native-community/progress-view
5479

5580
## Usage
5681

82+
Import ProgressView from `@react-native-community/progress-view`
83+
5784
```javascript
5885
import {ProgressView} from "@react-native-community/progress-view";
5986
```
87+
Add ProgressView like this
88+
89+
```jsx
90+
<ProgressView
91+
progressTintColor="orange"
92+
trackTintColor="blue"
93+
progress={0.7}
94+
/>
95+
```
96+
97+
### Running Example App
98+
99+
#### Windows
100+
1. Clone branch
101+
2. cd into progress_view and run `yarn install`
102+
3. run `yarn add [email protected] --dev` (React Native Windows relies on a version of react-native lower than iOS)
103+
4. Start metro server with `yarn start:windows`
104+
5. Open Visual Studios and open `example/windows/ProgressViewExample.sln`
105+
6. Set to Debug x64 and start solution
106+
107+
#### IOS
108+
1. Clone branch
109+
2. cd into progress-view and run `yarn install`
110+
2. cd into example/ios and run `pod install`
111+
4. cd back into progress-view and run `yarn ios`
60112

61113
## Reference
62114

@@ -109,7 +161,7 @@ The tint color of the progress bar itself.
109161

110162
### `progressViewStyle`
111163

112-
The progress bar style.
164+
The progress bar style. Network images only work on Windows.
113165

114166
| Type | Required |
115167
| ---------------------- | -------- |
@@ -119,7 +171,7 @@ The progress bar style.
119171

120172
### `trackImage`
121173

122-
A stretchable image to display behind the progress bar.
174+
A stretchable image to display behind the progress bar. Network images only work on Windows.
123175

124176
| Type | Required |
125177
| ---------------------- | -------- |
@@ -135,6 +187,15 @@ The tint color of the progress bar track.
135187
| ------ | -------- |
136188
| string | No |
137189

190+
### `isIndeterminate`
191+
192+
Turns progress bar into an indeterminate progress bar
193+
194+
| Type | Required | Platform |
195+
| ------ | -------- | -------- |
196+
| bool | No | Windows |
197+
198+
138199
## Contributors
139200

140201
- [Kaiden Sin](https://github.com/kdenz) - [Passionate Product Maker and Coder](http://linkedin.com/in/kaiden)

‎example/App.js

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import {StyleSheet, Text, SafeAreaView} from 'react-native';
2+
import {StyleSheet, Text, SafeAreaView, Platform} from 'react-native';
33
import {ProgressView} from '../js';
44

55
type Props = {||};
@@ -66,6 +66,40 @@ export class App extends React.Component<Props, State> {
6666
progressTintColor="yellow"
6767
progress={this.getProgress(0.8)}
6868
/>
69+
70+
<Text style={styles.text}>isIndeterminate</Text>
71+
<ProgressView style={styles.progressView} isIndeterminate={true} />
72+
<Text style={styles.text}>ProgressImage with local image</Text>
73+
<ProgressView
74+
style={styles.progressView}
75+
progress={0.5}
76+
progressImage={require('./test.png')}
77+
/>
78+
<Text style={styles.text}>TrackImage with network image</Text>
79+
{Platform.OS === 'windows' ? (
80+
<ProgressView
81+
style={styles.progressView}
82+
progress={0.5}
83+
trackImage={{
84+
uri: 'https://homepages.cae.wisc.edu/~ece533/images/cat.png',
85+
}}
86+
/>
87+
) : (
88+
<Text>Network Images only work on Windows</Text>
89+
)}
90+
<Text style={styles.text}>TrackTint Color</Text>
91+
<ProgressView
92+
style={styles.progressView}
93+
progress={0.8}
94+
trackTintColor={'red'}
95+
progressTintColor={'yellow'}
96+
/>
97+
<Text style={styles.text}>Bar Style</Text>
98+
<ProgressView
99+
style={styles.progressView}
100+
progress={0.4}
101+
progressViewStyle={'bar'}
102+
/>
69103
</SafeAreaView>
70104
);
71105
}
@@ -83,4 +117,9 @@ const styles = StyleSheet.create({
83117
fontSize: 24,
84118
fontWeight: '700',
85119
},
120+
text: {
121+
fontSize: 18,
122+
fontWeight: '500',
123+
marginTop: 10,
124+
},
86125
});

‎example/android/gradlew.bat

Lines changed: 84 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,84 @@
1-
@if "%DEBUG%" == "" @echo off
2-
@rem ##########################################################################
3-
@rem
4-
@rem Gradle startup script for Windows
5-
@rem
6-
@rem ##########################################################################
7-
8-
@rem Set local scope for the variables with windows NT shell
9-
if "%OS%"=="Windows_NT" setlocal
10-
11-
set DIRNAME=%~dp0
12-
if "%DIRNAME%" == "" set DIRNAME=.
13-
set APP_BASE_NAME=%~n0
14-
set APP_HOME=%DIRNAME%
15-
16-
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
17-
set DEFAULT_JVM_OPTS=
18-
19-
@rem Find java.exe
20-
if defined JAVA_HOME goto findJavaFromJavaHome
21-
22-
set JAVA_EXE=java.exe
23-
%JAVA_EXE% -version >NUL 2>&1
24-
if "%ERRORLEVEL%" == "0" goto init
25-
26-
echo.
27-
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
28-
echo.
29-
echo Please set the JAVA_HOME variable in your environment to match the
30-
echo location of your Java installation.
31-
32-
goto fail
33-
34-
:findJavaFromJavaHome
35-
set JAVA_HOME=%JAVA_HOME:"=%
36-
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
37-
38-
if exist "%JAVA_EXE%" goto init
39-
40-
echo.
41-
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
42-
echo.
43-
echo Please set the JAVA_HOME variable in your environment to match the
44-
echo location of your Java installation.
45-
46-
goto fail
47-
48-
:init
49-
@rem Get command-line arguments, handling Windows variants
50-
51-
if not "%OS%" == "Windows_NT" goto win9xME_args
52-
53-
:win9xME_args
54-
@rem Slurp the command line arguments.
55-
set CMD_LINE_ARGS=
56-
set _SKIP=2
57-
58-
:win9xME_args_slurp
59-
if "x%~1" == "x" goto execute
60-
61-
set CMD_LINE_ARGS=%*
62-
63-
:execute
64-
@rem Setup the command line
65-
66-
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
67-
68-
@rem Execute Gradle
69-
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
70-
71-
:end
72-
@rem End local scope for the variables with windows NT shell
73-
if "%ERRORLEVEL%"=="0" goto mainEnd
74-
75-
:fail
76-
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
77-
rem the _cmd.exe /c_ return code!
78-
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
79-
exit /b 1
80-
81-
:mainEnd
82-
if "%OS%"=="Windows_NT" endlocal
83-
84-
:omega
1+
@if "%DEBUG%" == "" @echo off
2+
@rem ##########################################################################
3+
@rem
4+
@rem Gradle startup script for Windows
5+
@rem
6+
@rem ##########################################################################
7+
8+
@rem Set local scope for the variables with windows NT shell
9+
if "%OS%"=="Windows_NT" setlocal
10+
11+
set DIRNAME=%~dp0
12+
if "%DIRNAME%" == "" set DIRNAME=.
13+
set APP_BASE_NAME=%~n0
14+
set APP_HOME=%DIRNAME%
15+
16+
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
17+
set DEFAULT_JVM_OPTS=
18+
19+
@rem Find java.exe
20+
if defined JAVA_HOME goto findJavaFromJavaHome
21+
22+
set JAVA_EXE=java.exe
23+
%JAVA_EXE% -version >NUL 2>&1
24+
if "%ERRORLEVEL%" == "0" goto init
25+
26+
echo.
27+
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
28+
echo.
29+
echo Please set the JAVA_HOME variable in your environment to match the
30+
echo location of your Java installation.
31+
32+
goto fail
33+
34+
:findJavaFromJavaHome
35+
set JAVA_HOME=%JAVA_HOME:"=%
36+
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
37+
38+
if exist "%JAVA_EXE%" goto init
39+
40+
echo.
41+
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
42+
echo.
43+
echo Please set the JAVA_HOME variable in your environment to match the
44+
echo location of your Java installation.
45+
46+
goto fail
47+
48+
:init
49+
@rem Get command-line arguments, handling Windows variants
50+
51+
if not "%OS%" == "Windows_NT" goto win9xME_args
52+
53+
:win9xME_args
54+
@rem Slurp the command line arguments.
55+
set CMD_LINE_ARGS=
56+
set _SKIP=2
57+
58+
:win9xME_args_slurp
59+
if "x%~1" == "x" goto execute
60+
61+
set CMD_LINE_ARGS=%*
62+
63+
:execute
64+
@rem Setup the command line
65+
66+
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
67+
68+
@rem Execute Gradle
69+
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
70+
71+
:end
72+
@rem End local scope for the variables with windows NT shell
73+
if "%ERRORLEVEL%"=="0" goto mainEnd
74+
75+
:fail
76+
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
77+
rem the _cmd.exe /c_ return code!
78+
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
79+
exit /b 1
80+
81+
:mainEnd
82+
if "%OS%"=="Windows_NT" endlocal
83+
84+
:omega

‎example/test.png

622 KB
Loading

0 commit comments

Comments
 (0)