From fa223754cd67cd3cbd5c377ac4f0f8a22163ec8b Mon Sep 17 00:00:00 2001 From: Damien Lajarretie Date: Thu, 9 Feb 2017 11:27:58 +0100 Subject: [PATCH 01/22] Add prop to Bar to animate only when progress is increasing --- Bar.js | 11 ++++++++++- README.md | 1 + 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/Bar.js b/Bar.js index 637f5e1..c7c9118 100644 --- a/Bar.js +++ b/Bar.js @@ -15,6 +15,7 @@ const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_ export default class ProgressBar extends Component { static propTypes = { animated: PropTypes.bool, + animateIncreaseOnly: PropTypes.bool, borderColor: PropTypes.string, borderRadius: PropTypes.number, borderWidth: PropTypes.number, @@ -30,6 +31,7 @@ export default class ProgressBar extends Component { static defaultProps = { animated: true, + animateIncreaseOnly: false, borderRadius: 4, borderWidth: 1, color: 'rgba(0, 122, 255, 1)', @@ -73,7 +75,14 @@ export default class ProgressBar extends Component { : Math.min(Math.max(props.progress, 0), 1) ); - if (props.animated) { + if ( + props.animated && + ( + !props.animateIncreaseOnly || ( + props.animateIncreaseOnly && (progress > this.props.progress) + ) + ) + ) { Animated.spring(this.state.progress, { toValue: progress, bounciness: 0, diff --git a/README.md b/README.md index 307151e..8db81f6 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,7 @@ All of the props under *Properties* in addition to the following: |**`width`**|Full width of the progress bar. |`150`| |**`height`**|Height of the progress bar. |`6`| |**`borderRadius`**|Rounding of corners, set to `0` to disable. |`4`| +|**`animateIncreaseOnly`**|Animate the changes to `progress` only if increasing. |`false`| ### `Progress.Circle` From a10154d05b7f59870479d5b286e0f7bb9975bdfd Mon Sep 17 00:00:00 2001 From: Damien Lajarretie Date: Thu, 9 Feb 2017 11:47:12 +0100 Subject: [PATCH 02/22] Update package.json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 49b760a..5ea5f67 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-native-progress", + "name": "AIS/react-native-progress", "version": "3.2.0", "description": "Progress indicators and spinners for React Native using ReactART", "main": "index.js", @@ -34,7 +34,7 @@ }, "repository": { "type": "git", - "url": "git://github.com/oblador/react-native-progress.git" + "url": "git://github.com/AirIntServices/react-native-progress.git" }, "license": "MIT", "devDependencies": { From be78ac4873df1fc8376667cccb37066d5bf794d4 Mon Sep 17 00:00:00 2001 From: Damien Lajarretie Date: Thu, 9 Feb 2017 11:53:00 +0100 Subject: [PATCH 03/22] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5ea5f67..ea1fffa 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "AIS/react-native-progress", + "name": "@ais/react-native-progress", "version": "3.2.0", "description": "Progress indicators and spinners for React Native using ReactART", "main": "index.js", From 02b9ce1d2f9426131dee4b9cd6522bc475ac80c5 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Wed, 3 May 2017 19:47:20 +0200 Subject: [PATCH 04/22] Bump Example to React Native 0.44 --- Example/.flowconfig | 9 ++-- Example/.gitignore | 2 +- Example/android/app/BUCK | 53 +++++++++---------- Example/android/app/build.gradle | 2 +- Example/android/app/proguard-rules.pro | 4 ++ .../android/app/src/main/AndroidManifest.xml | 3 +- .../java/com/example/MainApplication.java | 4 +- Example/android/build.gradle | 2 +- .../gradle/wrapper/gradle-wrapper.properties | 2 +- Example/android/keystores/BUCK | 12 ++--- Example/app.json | 4 ++ Example/ios/Example/Info.plist | 2 + Example/ios/ExampleTests/ExampleTests.m | 2 +- Example/package.json | 4 +- 14 files changed, 58 insertions(+), 47 deletions(-) create mode 100644 Example/app.json diff --git a/Example/.flowconfig b/Example/.flowconfig index 876e701..a76425e 100644 --- a/Example/.flowconfig +++ b/Example/.flowconfig @@ -22,6 +22,8 @@ node_modules/react-native/flow flow/ [options] +emoji=true + module.system=haste experimental.strict_type_args=true @@ -34,11 +36,12 @@ suppress_type=$FlowIssue suppress_type=$FlowFixMe suppress_type=$FixMe -suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-6]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) -suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-6]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ +suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) +suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy +suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError unsafe.enable_getters_and_setters=true [version] -^0.36.0 +^0.42.0 diff --git a/Example/.gitignore b/Example/.gitignore index fc13f16..10be197 100644 --- a/Example/.gitignore +++ b/Example/.gitignore @@ -34,11 +34,11 @@ local.properties # node_modules/ npm-debug.log +yarn-error.log # BUCK buck-out/ \.buckd/ -android/app/libs *.keystore # fastlane diff --git a/Example/android/app/BUCK b/Example/android/app/BUCK index 2ebdb98..c8f5603 100644 --- a/Example/android/app/BUCK +++ b/Example/android/app/BUCK @@ -1,5 +1,3 @@ -import re - # To learn about Buck see [Docs](https://buckbuild.com/). # To run your application with Buck: # - install Buck @@ -11,8 +9,9 @@ import re # lib_deps = [] + for jarfile in glob(['libs/*.jar']): - name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) + name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')] lib_deps.append(':' + name) prebuilt_jar( name = name, @@ -20,7 +19,7 @@ for jarfile in glob(['libs/*.jar']): ) for aarfile in glob(['libs/*.aar']): - name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) + name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')] lib_deps.append(':' + name) android_prebuilt_aar( name = name, @@ -28,39 +27,39 @@ for aarfile in glob(['libs/*.aar']): ) android_library( - name = 'all-libs', - exported_deps = lib_deps + name = "all-libs", + exported_deps = lib_deps, ) android_library( - name = 'app-code', - srcs = glob([ - 'src/main/java/**/*.java', - ]), - deps = [ - ':all-libs', - ':build_config', - ':res', - ], + name = "app-code", + srcs = glob([ + "src/main/java/**/*.java", + ]), + deps = [ + ":all-libs", + ":build_config", + ":res", + ], ) android_build_config( - name = 'build_config', - package = 'com.example', + name = "build_config", + package = "com.example", ) android_resource( - name = 'res', - res = 'src/main/res', - package = 'com.example', + name = "res", + package = "com.example", + res = "src/main/res", ) android_binary( - name = 'app', - package_type = 'debug', - manifest = 'src/main/AndroidManifest.xml', - keystore = '//android/keystores:debug', - deps = [ - ':app-code', - ], + name = "app", + keystore = "//android/keystores:debug", + manifest = "src/main/AndroidManifest.xml", + package_type = "debug", + deps = [ + ":app-code", + ], ) diff --git a/Example/android/app/build.gradle b/Example/android/app/build.gradle index 7d655dc..b89df76 100644 --- a/Example/android/app/build.gradle +++ b/Example/android/app/build.gradle @@ -58,7 +58,7 @@ import com.android.build.OutputFile * inputExcludes: ["android/**", "ios/**"], * * // override which node gets called and with what additional arguments - * nodeExecutableAndArgs: ["node"] + * nodeExecutableAndArgs: ["node"], * * // supply additional arguments to the packager * extraPackagerArgs: [] diff --git a/Example/android/app/proguard-rules.pro b/Example/android/app/proguard-rules.pro index 48361a9..6e8516c 100644 --- a/Example/android/app/proguard-rules.pro +++ b/Example/android/app/proguard-rules.pro @@ -50,6 +50,10 @@ -dontwarn com.facebook.react.** +# TextLayoutBuilder uses a non-public Android constructor within StaticLayout. +# See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details. +-dontwarn android.text.StaticLayout + # okhttp -keepattributes Signature diff --git a/Example/android/app/src/main/AndroidManifest.xml b/Example/android/app/src/main/AndroidManifest.xml index 677f075..8275835 100644 --- a/Example/android/app/src/main/AndroidManifest.xml +++ b/Example/android/app/src/main/AndroidManifest.xml @@ -19,7 +19,8 @@ + android:configChanges="keyboard|keyboardHidden|orientation|screenSize" + android:windowSoftInputMode="adjustResize"> diff --git a/Example/android/app/src/main/java/com/example/MainApplication.java b/Example/android/app/src/main/java/com/example/MainApplication.java index 4a10e25..f51721b 100644 --- a/Example/android/app/src/main/java/com/example/MainApplication.java +++ b/Example/android/app/src/main/java/com/example/MainApplication.java @@ -1,10 +1,8 @@ package com.example; import android.app.Application; -import android.util.Log; import com.facebook.react.ReactApplication; -import com.facebook.react.ReactInstanceManager; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; @@ -17,7 +15,7 @@ public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override - protected boolean getUseDeveloperSupport() { + public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } diff --git a/Example/android/build.gradle b/Example/android/build.gradle index fcba4c5..eed9972 100644 --- a/Example/android/build.gradle +++ b/Example/android/build.gradle @@ -5,7 +5,7 @@ buildscript { jcenter() } dependencies { - classpath 'com.android.tools.build:gradle:1.3.1' + classpath 'com.android.tools.build:gradle:2.2.3' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files diff --git a/Example/android/gradle/wrapper/gradle-wrapper.properties b/Example/android/gradle/wrapper/gradle-wrapper.properties index b9fbfab..dbdc05d 100644 --- a/Example/android/gradle/wrapper/gradle-wrapper.properties +++ b/Example/android/gradle/wrapper/gradle-wrapper.properties @@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip diff --git a/Example/android/keystores/BUCK b/Example/android/keystores/BUCK index 15da20e..88e4c31 100644 --- a/Example/android/keystores/BUCK +++ b/Example/android/keystores/BUCK @@ -1,8 +1,8 @@ keystore( - name = 'debug', - store = 'debug.keystore', - properties = 'debug.keystore.properties', - visibility = [ - 'PUBLIC', - ], + name = "debug", + properties = "debug.keystore.properties", + store = "debug.keystore", + visibility = [ + "PUBLIC", + ], ) diff --git a/Example/app.json b/Example/app.json new file mode 100644 index 0000000..e933d06 --- /dev/null +++ b/Example/app.json @@ -0,0 +1,4 @@ +{ + "name": "Example", + "displayName": "Example" +} \ No newline at end of file diff --git a/Example/ios/Example/Info.plist b/Example/ios/Example/Info.plist index 2fb6a11..0bf27a6 100644 --- a/Example/ios/Example/Info.plist +++ b/Example/ios/Example/Info.plist @@ -4,6 +4,8 @@ CFBundleDevelopmentRegion en + CFBundleDisplayName + Example CFBundleExecutable $(EXECUTABLE_NAME) CFBundleIdentifier diff --git a/Example/ios/ExampleTests/ExampleTests.m b/Example/ios/ExampleTests/ExampleTests.m index 857f14c..22ba225 100644 --- a/Example/ios/ExampleTests/ExampleTests.m +++ b/Example/ios/ExampleTests/ExampleTests.m @@ -37,7 +37,7 @@ - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test - (void)testRendersWelcomeScreen { - UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; + UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; BOOL foundElement = NO; diff --git a/Example/package.json b/Example/package.json index 5de6c66..ef32f9a 100644 --- a/Example/package.json +++ b/Example/package.json @@ -7,8 +7,8 @@ "test": "jest" }, "dependencies": { - "react": "15.4.2", - "react-native": "0.40.0", + "react": "16.0.0-alpha.6", + "react-native": "0.44.0", "react-native-progress": "file:../" }, "devDependencies": { From a84c31b6cee127dbefaa44040fd0b45b08a3dcdc Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Wed, 3 May 2017 19:50:49 +0200 Subject: [PATCH 05/22] Fix RN 0.43+ compatibility by not using direction defaults. Fixes #52 --- withAnimation.js | 1 - 1 file changed, 1 deletion(-) diff --git a/withAnimation.js b/withAnimation.js index 6cb756e..f465fc2 100644 --- a/withAnimation.js +++ b/withAnimation.js @@ -24,7 +24,6 @@ export default function withAnimation(WrappedComponent, indeterminateProgress) { static defaultProps = { animated: true, - direction: 'clockwise', indeterminate: false, progress: 0, }; From b28558a7a245b860d7920a609cb19732c0bbf3f1 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Thu, 4 May 2017 08:04:10 +0200 Subject: [PATCH 06/22] Import PropTypes from separate package --- Bar.js | 7 ++----- Circle.js | 7 ++----- CircleSnail.js | 7 ++----- Pie.js | 7 ++----- Shapes/Arc.js | 7 ++----- Shapes/Circle.js | 7 ++----- Shapes/Sector.js | 7 ++----- package.json | 3 +++ withAnimation.js | 7 ++----- 9 files changed, 19 insertions(+), 40 deletions(-) diff --git a/Bar.js b/Bar.js index 637f5e1..300d636 100644 --- a/Bar.js +++ b/Bar.js @@ -1,8 +1,5 @@ -import React, { - Component, - PropTypes, -} from 'react'; - +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { Animated, Easing, diff --git a/Circle.js b/Circle.js index f88a136..5c2574d 100644 --- a/Circle.js +++ b/Circle.js @@ -1,8 +1,5 @@ -import React, { - Component, - PropTypes, -} from 'react'; - +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { Animated, ART, diff --git a/CircleSnail.js b/CircleSnail.js index a4625e2..29d372a 100644 --- a/CircleSnail.js +++ b/CircleSnail.js @@ -1,8 +1,5 @@ -import React, { - Component, - PropTypes, -} from 'react'; - +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { Animated, ART, diff --git a/Pie.js b/Pie.js index c747059..6c1364c 100644 --- a/Pie.js +++ b/Pie.js @@ -1,8 +1,5 @@ -import React, { - Component, - PropTypes, -} from 'react'; - +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { Animated, ART, diff --git a/Shapes/Arc.js b/Shapes/Arc.js index 72a5a00..2feeb64 100644 --- a/Shapes/Arc.js +++ b/Shapes/Arc.js @@ -1,10 +1,7 @@ /* eslint new-cap: ["error", { "capIsNew": false }] */ -import React, { - Component, - PropTypes, -} from 'react'; - +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { ART } from 'react-native'; const CIRCLE = Math.PI * 2; diff --git a/Shapes/Circle.js b/Shapes/Circle.js index befecb6..cc3a0c4 100644 --- a/Shapes/Circle.js +++ b/Shapes/Circle.js @@ -1,11 +1,8 @@ /* eslint new-cap: ["error", { "capIsNew": false }] */ /* eslint no-unexpected-multiline: 0 */ -import React, { - Component, - PropTypes, -} from 'react'; - +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { ART } from 'react-native'; function makeCirclePath(x, y, radius, direction) { diff --git a/Shapes/Sector.js b/Shapes/Sector.js index 5d6df5b..293015c 100644 --- a/Shapes/Sector.js +++ b/Shapes/Sector.js @@ -1,10 +1,7 @@ /* eslint new-cap: ["error", { "capIsNew": false }] */ -import React, { - Component, - PropTypes, -} from 'react'; - +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { ART } from 'react-native'; const CIRCLE = Math.PI * 2; diff --git a/package.json b/package.json index 49b760a..808cb06 100644 --- a/package.json +++ b/package.json @@ -45,5 +45,8 @@ "eslint-plugin-import": "^1.16.0", "eslint-plugin-jsx-a11y": "^2.2.3", "eslint-plugin-react": "^6.4.1" + }, + "dependencies": { + "prop-types": "^15.5.8" } } diff --git a/withAnimation.js b/withAnimation.js index f465fc2..5db7561 100644 --- a/withAnimation.js +++ b/withAnimation.js @@ -1,8 +1,5 @@ -import React, { - Component, - PropTypes, -} from 'react'; - +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { Animated, Easing, From 956afe3b3d33f747061fa82864717aeda8e74e94 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Thu, 4 May 2017 08:04:39 +0200 Subject: [PATCH 07/22] Release 3.2.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 808cb06..7257eba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-progress", - "version": "3.2.0", + "version": "3.2.1", "description": "Progress indicators and spinners for React Native using ReactART", "main": "index.js", "scripts": { From 379152729f420a9b58e8f695b5a6f211fff5107c Mon Sep 17 00:00:00 2001 From: Mike Hobizal Date: Mon, 3 Jul 2017 14:42:59 -0700 Subject: [PATCH 08/22] Add `strokeCap` prop for `Progress.Circle` (#45) * Add `strokeCap` prop for `Progress.Circle` Changes: Allows for further customization of the `Progress.Circle` by adding a `strokeCap` prop, similar to the `Progress.CircleSnail` component. * Add prop to Arc to allow for custom strokeCap * Update project readme --- Circle.js | 2 ++ README.md | 9 +++++---- Shapes/Arc.js | 5 ++++- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/Circle.js b/Circle.js index 5c2574d..c5281f1 100644 --- a/Circle.js +++ b/Circle.js @@ -89,6 +89,7 @@ export class ProgressCircle extends Component { showsText, size, style, + strokeCap, textStyle, thickness, unfilledColor, @@ -154,6 +155,7 @@ export class ProgressCircle extends Component { startAngle={0} endAngle={(indeterminate ? 1.8 : 2) * Math.PI} stroke={borderColor || color} + strokeCap={strokeCap} strokeWidth={border} /> ) : false} diff --git a/README.md b/README.md index 307151e..07ad0f6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # react-native-progress -Progress indicators and spinners for React Native using ReactART. +Progress indicators and spinners for React Native using ReactART. ![progress-demo](https://cloud.githubusercontent.com/assets/378279/11212043/64fb1420-8d01-11e5-9ec0-5e175a837c62.gif) @@ -10,7 +10,7 @@ Progress indicators and spinners for React Native using ReactART. ### ReactART based components -To use the `Pie` or `Circle` components, you need to include the ART library in your project on iOS, for android it's already included. +To use the `Pie` or `Circle` components, you need to include the ART library in your project on iOS, for android it's already included. #### For CocoaPod users: @@ -72,6 +72,7 @@ All of the props under *Properties* in addition to the following: |**`formatText(progress)`**|A function returning a string to be displayed for the textual representation. |*See source*| |**`textStyle`**|Styles for progress text, defaults to a same `color` as circle and `fontSize` proportional to `size` prop. |*None*| |**`direction`**|Direction of the circle `clockwise` or `counter-clockwise` |`clockwise`| +|**`strokeCap`**|Stroke Cap style for the circle `butt`, `square` or `round` |`butt`| ### `Progress.Pie` @@ -95,14 +96,14 @@ All of the props under *Properties* in addition to the following: ## Examples -* [`Example` project bundled with this module](https://github.com/oblador/react-native-progress/tree/master/Example) +* [`Example` project bundled with this module](https://github.com/oblador/react-native-progress/tree/master/Example) * [react-native-image-progress](https://github.com/oblador/react-native-image-progress) ## [Changelog](https://github.com/oblador/react-native-progress/releases) ## Thanks -To [Mandarin Drummond](https://github.com/MandarinConLaBarba) for giving me the NPM name. +To [Mandarin Drummond](https://github.com/MandarinConLaBarba) for giving me the NPM name. ## License diff --git a/Shapes/Arc.js b/Shapes/Arc.js index 2feeb64..06aeb29 100644 --- a/Shapes/Arc.js +++ b/Shapes/Arc.js @@ -49,6 +49,7 @@ export default class Arc extends Component { top: PropTypes.number, left: PropTypes.number, }), + strokeCap: PropTypes.string, strokeWidth: PropTypes.number, direction: PropTypes.oneOf(['clockwise', 'counter-clockwise']), }; @@ -56,6 +57,7 @@ export default class Arc extends Component { static defaultProps = { startAngle: 0, offset: { top: 0, left: 0 }, + strokeCap: 'butt', strokeWidth: 0, direction: 'clockwise', }; @@ -67,6 +69,7 @@ export default class Arc extends Component { radius, offset, direction, + strokeCap, strokeWidth, ...restProps } = this.props; @@ -83,7 +86,7 @@ export default class Arc extends Component { return ( From 633e0da3420a3b5a981d0db86a5f4dedaaa71cd1 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Tue, 4 Jul 2017 00:36:15 +0200 Subject: [PATCH 09/22] Add automatic flexbox styling to Progress.Bar using width={null} --- Bar.js | 16 +++++++++++++--- README.md | 2 +- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/Bar.js b/Bar.js index 300d636..31c7106 100644 --- a/Bar.js +++ b/Bar.js @@ -19,6 +19,7 @@ export default class ProgressBar extends Component { color: PropTypes.string, height: PropTypes.number, indeterminate: PropTypes.bool, + onLayout: PropTypes.func, progress: PropTypes.number, style: View.propTypes.style, unfilledColor: PropTypes.string, @@ -40,6 +41,7 @@ export default class ProgressBar extends Component { super(props); const progress = Math.min(Math.max(props.progress, 0), 1); this.state = { + width: 0, progress: new Animated.Value(props.indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress), animationValue: new Animated.Value(BAR_WIDTH_ZERO_POSITION), }; @@ -95,6 +97,15 @@ export default class ProgressBar extends Component { }); } + handleLayout = (event) => { + if (!this.props.width) { + this.setState({ width: event.nativeEvent.layout.width }); + } + if (this.props.onLayout) { + this.props.onLayout(event); + } + }; + render() { const { borderColor, @@ -109,7 +120,7 @@ export default class ProgressBar extends Component { ...restProps } = this.props; - const innerWidth = width - (borderWidth * 2); + const innerWidth = Math.max(0, width || this.state.width) - (borderWidth * 2); const containerStyle = { width, borderWidth, @@ -121,7 +132,6 @@ export default class ProgressBar extends Component { const progressStyle = { backgroundColor: color, height, - width: innerWidth, transform: [{ translateX: this.state.animationValue.interpolate({ inputRange: [0, 1], @@ -138,7 +148,7 @@ export default class ProgressBar extends Component { }; return ( - + {children} diff --git a/README.md b/README.md index 07ad0f6..1061898 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ All of the props under *Properties* in addition to the following: | Prop | Description | Default | |---|---|---| -|**`width`**|Full width of the progress bar. |`150`| +|**`width`**|Full width of the progress bar, set to `null` to use automatic flexbox sizing. |`150`| |**`height`**|Height of the progress bar. |`6`| |**`borderRadius`**|Rounding of corners, set to `0` to disable. |`4`| From 2d1bb29d10ec8c5a30c0d31e2b434c47d34c3f20 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Tue, 4 Jul 2017 00:49:12 +0200 Subject: [PATCH 10/22] Try to fix issue with android sometimes showing full progress for 0 --- Bar.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Bar.js b/Bar.js index 31c7106..fd65bc3 100644 --- a/Bar.js +++ b/Bar.js @@ -143,7 +143,11 @@ export default class ProgressBar extends Component { outputRange: [innerWidth / -2, 0], }), }, { - scaleX: this.state.progress, + // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278 + scaleX: this.state.progress.interpolate({ + inputRange: [0, 1], + outputRange: [0.0001, 1], + }), }], }; From d765617334cfd09db4d4b0c5956cf6ff00437e76 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Tue, 4 Jul 2017 00:49:35 +0200 Subject: [PATCH 11/22] Release 3.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7257eba..bd6c512 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-progress", - "version": "3.2.1", + "version": "3.3.0", "description": "Progress indicators and spinners for React Native using ReactART", "main": "index.js", "scripts": { From 025960e5497922d74670b4665b7e13f92e32f5de Mon Sep 17 00:00:00 2001 From: Michal Date: Fri, 21 Jul 2017 01:24:35 +0200 Subject: [PATCH 12/22] Fix prop types (#68) --- Circle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Circle.js b/Circle.js index c5281f1..7255ee3 100644 --- a/Circle.js +++ b/Circle.js @@ -29,7 +29,7 @@ export class ProgressCircle extends Component { borderColor: PropTypes.string, borderWidth: PropTypes.number, color: PropTypes.string, - children: React.PropTypes.node, + children: PropTypes.node, direction: PropTypes.oneOf(['clockwise', 'counter-clockwise']), formatText: PropTypes.func, indeterminate: PropTypes.bool, From c32ee28c18aa346814b7f711585888fc32ac6677 Mon Sep 17 00:00:00 2001 From: Simone Quattrocchi Date: Mon, 31 Jul 2017 18:57:36 +0200 Subject: [PATCH 13/22] Add strokeCap prop to CircleSnail (#72) * Add strokeCap prop to CircleSnail * Update CircleSnail README --- CircleSnail.js | 5 ++++- README.md | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CircleSnail.js b/CircleSnail.js index 29d372a..9cdc618 100644 --- a/CircleSnail.js +++ b/CircleSnail.js @@ -29,6 +29,7 @@ export default class CircleSnail extends Component { spinDuration: PropTypes.number, style: View.propTypes.style, thickness: PropTypes.number, + strokeCap: PropTypes.string }; static defaultProps = { @@ -38,6 +39,7 @@ export default class CircleSnail extends Component { hidesWhenStopped: false, size: 40, thickness: 3, + strokeCap: 'round' }; constructor(props) { @@ -125,6 +127,7 @@ export default class CircleSnail extends Component { size, style, thickness, + strokeCap, ...restProps } = this.props; @@ -168,7 +171,7 @@ export default class CircleSnail extends Component { offset={offset} startAngle={this.state.startAngle} endAngle={this.state.endAngle} - strokeCap="round" + strokeCap={strokeCap} strokeWidth={thickness} /> diff --git a/README.md b/README.md index 1061898..f32ff57 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,7 @@ All of the props under *Properties* in addition to the following: |**`thickness`**|Thickness of the circle. |`3`| |**`duration`**|Duration of animation. |`1000`| |**`spinDuration`**|Duration of spin (orbit) animation. |`5000`| +|**`strokeCap`**|Stroke Cap style for the circle `butt`, `square` or `round` |`round`| ## Examples From fce0e1afd8e1e3373d4c742086d6e5348d4b9af0 Mon Sep 17 00:00:00 2001 From: Jon Kessler Date: Mon, 31 Jul 2017 15:31:03 -0700 Subject: [PATCH 14/22] Use ViewPropTypes instead of View.propTypes, as it is deprecated. Fall back if not available. (#70) --- Bar.js | 5 ++++- Circle.js | 5 ++++- CircleSnail.js | 5 ++++- Pie.js | 5 ++++- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/Bar.js b/Bar.js index fd65bc3..a854631 100644 --- a/Bar.js +++ b/Bar.js @@ -4,11 +4,14 @@ import { Animated, Easing, View, + ViewPropTypes, } from 'react-native'; const INDETERMINATE_WIDTH_FACTOR = 0.3; const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR); +const RNViewPropTypes = ViewPropTypes || View.propTypes; + export default class ProgressBar extends Component { static propTypes = { animated: PropTypes.bool, @@ -21,7 +24,7 @@ export default class ProgressBar extends Component { indeterminate: PropTypes.bool, onLayout: PropTypes.func, progress: PropTypes.number, - style: View.propTypes.style, + style: RNViewPropTypes.style, unfilledColor: PropTypes.string, width: PropTypes.number, }; diff --git a/Circle.js b/Circle.js index 7255ee3..4fbb61ab 100644 --- a/Circle.js +++ b/Circle.js @@ -6,6 +6,7 @@ import { StyleSheet, Text, View, + ViewPropTypes, } from 'react-native'; import Arc from './Shapes/Arc'; @@ -16,6 +17,8 @@ const CIRCLE = Math.PI * 2; const AnimatedSurface = Animated.createAnimatedComponent(ART.Surface); const AnimatedArc = Animated.createAnimatedComponent(Arc); +const RNViewPropTypes = ViewPropTypes || View.propTypes; + const styles = StyleSheet.create({ container: { backgroundColor: 'transparent', @@ -40,7 +43,7 @@ export class ProgressCircle extends Component { rotation: PropTypes.instanceOf(Animated.Value), showsText: PropTypes.bool, size: PropTypes.number, - style: View.propTypes.style, + style: RNViewPropTypes.style, textStyle: Text.propTypes.style, thickness: PropTypes.number, unfilledColor: PropTypes.string, diff --git a/CircleSnail.js b/CircleSnail.js index 9cdc618..b9b2d47 100644 --- a/CircleSnail.js +++ b/CircleSnail.js @@ -5,6 +5,7 @@ import { ART, Easing, View, + ViewPropTypes, } from 'react-native'; import Arc from './Shapes/Arc'; @@ -14,6 +15,8 @@ const AnimatedArc = Animated.createAnimatedComponent(Arc); const MIN_ARC_ANGLE = 0.1; const MAX_ARC_ANGLE = 1.5 * Math.PI; +const RNViewPropTypes = ViewPropTypes || View.propTypes; + export default class CircleSnail extends Component { static propTypes = { animating: PropTypes.bool, @@ -27,7 +30,7 @@ export default class CircleSnail extends Component { hidesWhenStopped: PropTypes.bool, size: PropTypes.number, spinDuration: PropTypes.number, - style: View.propTypes.style, + style: RNViewPropTypes.style, thickness: PropTypes.number, strokeCap: PropTypes.string }; diff --git a/Pie.js b/Pie.js index 6c1364c..21a66bd 100644 --- a/Pie.js +++ b/Pie.js @@ -5,6 +5,7 @@ import { ART, StyleSheet, View, + ViewPropTypes, } from 'react-native'; import Circle from './Shapes/Circle'; @@ -16,6 +17,8 @@ const CIRCLE = Math.PI * 2; const AnimatedSurface = Animated.createAnimatedComponent(ART.Surface); const AnimatedSector = Animated.createAnimatedComponent(Sector); +const RNViewPropTypes = ViewPropTypes || View.propTypes; + const styles = StyleSheet.create({ container: { backgroundColor: 'transparent', @@ -36,7 +39,7 @@ export class ProgressPie extends Component { ]), rotation: PropTypes.instanceOf(Animated.Value), size: PropTypes.number, - style: View.propTypes.style, + style: RNViewPropTypes.style, unfilledColor: PropTypes.string, }; From c1db0564280525f3588a350b740968159f4ec1ce Mon Sep 17 00:00:00 2001 From: Byron Hallett Date: Wed, 2 Aug 2017 15:32:14 +1000 Subject: [PATCH 15/22] Fix strokeCap prop not being passed to foreground arc from /Circle.js (#65) * fix strokeCap prop not being passed to foreground arc from Circle component The default prop was being used, and the circle progress bar was always being rendered with 'butt' type strokeCap * add circlePercent and rotationOffset parameters to Circle.js * Revert "add circlePercent and rotationOffset parameters to Circle.js" This reverts commit b209640dba463a94d0cbc365b0c25339b0d84282. --- Circle.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Circle.js b/Circle.js index 4fbb61ab..ace1aea 100644 --- a/Circle.js +++ b/Circle.js @@ -149,6 +149,7 @@ export class ProgressCircle extends Component { endAngle={angle} direction={direction} stroke={color} + strokeCap={strokeCap} strokeWidth={thickness} /> ) : false} From 3d7b4882663c8219d419d2e624203c5baa2c27f6 Mon Sep 17 00:00:00 2001 From: Ahmed Hassan Date: Tue, 22 Aug 2017 23:02:07 +0200 Subject: [PATCH 16/22] Add native driver support for Bar and smooth animation (#57) * Add native driver support and smooth bar animation * update readme * revert changes on circles and only change bar * add animationOptions prop * update readme to include animationOptions * remove whitespace * fix typo --- Bar.js | 22 ++++++++++++++++++---- README.md | 4 ++++ 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/Bar.js b/Bar.js index a854631..f9116fa 100644 --- a/Bar.js +++ b/Bar.js @@ -27,6 +27,11 @@ export default class ProgressBar extends Component { style: RNViewPropTypes.style, unfilledColor: PropTypes.string, width: PropTypes.number, + useNativeDriver: PropTypes.bool, + animationOptions: PropTypes.shape({ + animationFunction: PropTypes.oneOf([Animated.decay, Animated.timing, Animated.spring]), + config: PropTypes.object.isRequired + }) }; static defaultProps = { @@ -38,6 +43,11 @@ export default class ProgressBar extends Component { indeterminate: false, progress: 0, width: 150, + useNativeDriver: false, + animationOptions: { + animationFunction: Animated.spring, + config: { bounciness: 0 } + } }; constructor(props) { @@ -63,6 +73,7 @@ export default class ProgressBar extends Component { } else { Animated.spring(this.state.animationValue, { toValue: BAR_WIDTH_ZERO_POSITION, + useNativeDriver: props.useNativeDriver, }).start(); } } @@ -76,10 +87,12 @@ export default class ProgressBar extends Component { ); if (props.animated) { - Animated.spring(this.state.progress, { - toValue: progress, - bounciness: 0, - }).start(); + const { animationFunction, config } = this.props.animationOptions; + animationFunction(this.state.progress, { + ...config, + toValue: progress, + useNativeDriver: props.useNativeDriver + }).start() } else { this.state.progress.setValue(progress); } @@ -93,6 +106,7 @@ export default class ProgressBar extends Component { duration: 1000, easing: Easing.linear, isInteraction: false, + useNativeDriver: this.props.useNativeDriver, }).start((endState) => { if (endState.finished) { this.animate(); diff --git a/README.md b/README.md index f32ff57..19bfac2 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,10 @@ All of the props under *Properties* in addition to the following: |**`width`**|Full width of the progress bar, set to `null` to use automatic flexbox sizing. |`150`| |**`height`**|Height of the progress bar. |`6`| |**`borderRadius`**|Rounding of corners, set to `0` to disable. |`4`| +|**`useNativeDriver`**|Use native driver for the animations. |`false`| +|**`animationOptions`**|Object with the following options|| +|**`animationOptions.animationFunction`**|Sets the animation function to animate the progress. Can be one of: Animated.decay, Animated.timing, Animated.spring|`Animated.spring`| +|**`animationOptions.config`**|Sets the config that is passed into the `animationFunction`|`{ bounciness: 0 }`| ### `Progress.Circle` From b6ab3ad24d262a152c261b384171d1976044c95b Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Tue, 22 Aug 2017 23:23:20 +0200 Subject: [PATCH 17/22] Bump example to RN 0.47.2 --- Example/.babelrc | 4 +- Example/.flowconfig | 8 +- Example/android/app/build.gradle | 7 ++ Example/ios/Example.xcodeproj/project.pbxproj | 117 +++++++++++++++--- Example/package.json | 12 +- 5 files changed, 118 insertions(+), 30 deletions(-) diff --git a/Example/.babelrc b/Example/.babelrc index 8df53fe..a9ce136 100644 --- a/Example/.babelrc +++ b/Example/.babelrc @@ -1,3 +1,3 @@ { -"presets": ["react-native"] -} \ No newline at end of file + "presets": ["react-native"] +} diff --git a/Example/.flowconfig b/Example/.flowconfig index a76425e..8346120 100644 --- a/Example/.flowconfig +++ b/Example/.flowconfig @@ -26,8 +26,6 @@ emoji=true module.system=haste -experimental.strict_type_args=true - munge_underscores=true module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' @@ -36,12 +34,12 @@ suppress_type=$FlowIssue suppress_type=$FlowFixMe suppress_type=$FixMe -suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) -suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ +suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) +suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError unsafe.enable_getters_and_setters=true [version] -^0.42.0 +^0.49.1 diff --git a/Example/android/app/build.gradle b/Example/android/app/build.gradle index b89df76..5cc5e59 100644 --- a/Example/android/app/build.gradle +++ b/Example/android/app/build.gradle @@ -33,6 +33,13 @@ import com.android.build.OutputFile * // bundleInPaidRelease: true, * // bundleInBeta: true, * + * // whether to disable dev mode in custom build variants (by default only disabled in release) + * // for example: to disable dev mode in the staging build type (if configured) + * devDisabledInStaging: true, + * // The configuration property can be in the following formats + * // 'devDisabledIn${productFlavor}${buildType}' + * // 'devDisabledIn${buildType}' + * * // the root of your project, i.e. where "package.json" lives * root: "../../", * diff --git a/Example/ios/Example.xcodeproj/project.pbxproj b/Example/ios/Example.xcodeproj/project.pbxproj index 6d3a9b9..4665c7d 100644 --- a/Example/ios/Example.xcodeproj/project.pbxproj +++ b/Example/ios/Example.xcodeproj/project.pbxproj @@ -22,7 +22,7 @@ 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; 146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; - 5D7639A71E3135C40002FDFB /* libART.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5D76398D1E3135B90002FDFB /* libART.a */; }; + 5D7D53981F4CD74900C3E091 /* libART.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5D7D53951F4CD73900C3E091 /* libART.a */; }; 5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; }; 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; }; /* End PBXBuildFile section */ @@ -182,13 +182,48 @@ remoteGlobalIDString = 3D3CD9181DE5FBD800167DC4; remoteInfo = "jschelpers-tvOS"; }; - 5D76398C1E3135B90002FDFB /* PBXContainerItemProxy */ = { + 5D7D53871F4CD72100C3E091 /* PBXContainerItemProxy */ = { isa = PBXContainerItemProxy; - containerPortal = 5D7639881E3135B90002FDFB /* ART.xcodeproj */; + containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; + proxyType = 2; + remoteGlobalIDString = 139D7ECE1E25DB7D00323FB7; + remoteInfo = "third-party"; + }; + 5D7D53891F4CD72100C3E091 /* PBXContainerItemProxy */ = { + isa = PBXContainerItemProxy; + containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; + proxyType = 2; + remoteGlobalIDString = 3D383D3C1EBD27B6005632C8; + remoteInfo = "third-party-tvOS"; + }; + 5D7D538B1F4CD72100C3E091 /* PBXContainerItemProxy */ = { + isa = PBXContainerItemProxy; + containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; + proxyType = 2; + remoteGlobalIDString = 139D7E881E25C6D100323FB7; + remoteInfo = "double-conversion"; + }; + 5D7D538D1F4CD72100C3E091 /* PBXContainerItemProxy */ = { + isa = PBXContainerItemProxy; + containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; + proxyType = 2; + remoteGlobalIDString = 3D383D621EBD27B9005632C8; + remoteInfo = "double-conversion-tvOS"; + }; + 5D7D53941F4CD73900C3E091 /* PBXContainerItemProxy */ = { + isa = PBXContainerItemProxy; + containerPortal = 5D7D538F1F4CD73900C3E091 /* ART.xcodeproj */; proxyType = 2; remoteGlobalIDString = 0CF68AC11AF0540F00FF9E5C; remoteInfo = ART; }; + 5D7D53961F4CD73900C3E091 /* PBXContainerItemProxy */ = { + isa = PBXContainerItemProxy; + containerPortal = 5D7D538F1F4CD73900C3E091 /* ART.xcodeproj */; + proxyType = 2; + remoteGlobalIDString = 323A12871E5F266B004975B8; + remoteInfo = "ART-tvOS"; + }; 5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = { isa = PBXContainerItemProxy; containerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */; @@ -239,7 +274,7 @@ 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Example/Info.plist; sourceTree = ""; }; 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Example/main.m; sourceTree = ""; }; 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; - 5D7639881E3135B90002FDFB /* ART.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ART.xcodeproj; path = "../node_modules/react-native/Libraries/ART/ART.xcodeproj"; sourceTree = ""; }; + 5D7D538F1F4CD73900C3E091 /* ART.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ART.xcodeproj; path = "../node_modules/react-native/Libraries/ART/ART.xcodeproj"; sourceTree = ""; }; 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = ""; }; 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; }; 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; }; @@ -258,9 +293,9 @@ isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( - 5D7639A71E3135C40002FDFB /* libART.a in Frameworks */, - 5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */, + 5D7D53981F4CD74900C3E091 /* libART.a in Frameworks */, 146834051AC3E58100842450 /* libReact.a in Frameworks */, + 5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */, 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */, 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */, 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */, @@ -378,14 +413,19 @@ 3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */, 3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */, 3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */, + 5D7D53881F4CD72100C3E091 /* libthird-party.a */, + 5D7D538A1F4CD72100C3E091 /* libthird-party.a */, + 5D7D538C1F4CD72100C3E091 /* libdouble-conversion.a */, + 5D7D538E1F4CD72100C3E091 /* libdouble-conversion.a */, ); name = Products; sourceTree = ""; }; - 5D7639891E3135B90002FDFB /* Products */ = { + 5D7D53901F4CD73900C3E091 /* Products */ = { isa = PBXGroup; children = ( - 5D76398D1E3135B90002FDFB /* libART.a */, + 5D7D53951F4CD73900C3E091 /* libART.a */, + 5D7D53971F4CD73900C3E091 /* libART-tvOS.a */, ); name = Products; sourceTree = ""; @@ -394,7 +434,7 @@ isa = PBXGroup; children = ( 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */, - 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation-tvOS.a */, + 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation.a */, ); name = Products; sourceTree = ""; @@ -411,7 +451,7 @@ 832341AE1AAA6A7D00B99B32 /* Libraries */ = { isa = PBXGroup; children = ( - 5D7639881E3135B90002FDFB /* ART.xcodeproj */, + 5D7D538F1F4CD73900C3E091 /* ART.xcodeproj */, 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */, 146833FF1AC3E56700842450 /* React.xcodeproj */, 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */, @@ -524,8 +564,8 @@ projectDirPath = ""; projectReferences = ( { - ProductGroup = 5D7639891E3135B90002FDFB /* Products */; - ProjectRef = 5D7639881E3135B90002FDFB /* ART.xcodeproj */; + ProductGroup = 5D7D53901F4CD73900C3E091 /* Products */; + ProjectRef = 5D7D538F1F4CD73900C3E091 /* ART.xcodeproj */; }, { ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */; @@ -728,11 +768,46 @@ remoteRef = 3DAD3EAE1DF850E9000B6D8A /* PBXContainerItemProxy */; sourceTree = BUILT_PRODUCTS_DIR; }; - 5D76398D1E3135B90002FDFB /* libART.a */ = { + 5D7D53881F4CD72100C3E091 /* libthird-party.a */ = { + isa = PBXReferenceProxy; + fileType = archive.ar; + path = "libthird-party.a"; + remoteRef = 5D7D53871F4CD72100C3E091 /* PBXContainerItemProxy */; + sourceTree = BUILT_PRODUCTS_DIR; + }; + 5D7D538A1F4CD72100C3E091 /* libthird-party.a */ = { + isa = PBXReferenceProxy; + fileType = archive.ar; + path = "libthird-party.a"; + remoteRef = 5D7D53891F4CD72100C3E091 /* PBXContainerItemProxy */; + sourceTree = BUILT_PRODUCTS_DIR; + }; + 5D7D538C1F4CD72100C3E091 /* libdouble-conversion.a */ = { + isa = PBXReferenceProxy; + fileType = archive.ar; + path = "libdouble-conversion.a"; + remoteRef = 5D7D538B1F4CD72100C3E091 /* PBXContainerItemProxy */; + sourceTree = BUILT_PRODUCTS_DIR; + }; + 5D7D538E1F4CD72100C3E091 /* libdouble-conversion.a */ = { + isa = PBXReferenceProxy; + fileType = archive.ar; + path = "libdouble-conversion.a"; + remoteRef = 5D7D538D1F4CD72100C3E091 /* PBXContainerItemProxy */; + sourceTree = BUILT_PRODUCTS_DIR; + }; + 5D7D53951F4CD73900C3E091 /* libART.a */ = { isa = PBXReferenceProxy; fileType = archive.ar; path = libART.a; - remoteRef = 5D76398C1E3135B90002FDFB /* PBXContainerItemProxy */; + remoteRef = 5D7D53941F4CD73900C3E091 /* PBXContainerItemProxy */; + sourceTree = BUILT_PRODUCTS_DIR; + }; + 5D7D53971F4CD73900C3E091 /* libART-tvOS.a */ = { + isa = PBXReferenceProxy; + fileType = archive.ar; + path = "libART-tvOS.a"; + remoteRef = 5D7D53961F4CD73900C3E091 /* PBXContainerItemProxy */; sourceTree = BUILT_PRODUCTS_DIR; }; 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */ = { @@ -742,10 +817,10 @@ remoteRef = 5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */; sourceTree = BUILT_PRODUCTS_DIR; }; - 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation-tvOS.a */ = { + 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation.a */ = { isa = PBXReferenceProxy; fileType = archive.ar; - path = "libRCTAnimation-tvOS.a"; + path = libRCTAnimation.a; remoteRef = 5E9157341DD0AC6500FF2AA8 /* PBXContainerItemProxy */; sourceTree = BUILT_PRODUCTS_DIR; }; @@ -797,7 +872,7 @@ ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh"; + shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh"; }; /* End PBXShellScriptBuildPhase section */ @@ -853,6 +928,10 @@ INFOPLIST_FILE = ExampleTests/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 8.0; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; + OTHER_LDFLAGS = ( + "-ObjC", + "-lc++", + ); PRODUCT_NAME = "$(TARGET_NAME)"; TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Example.app/Example"; }; @@ -866,6 +945,10 @@ INFOPLIST_FILE = ExampleTests/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 8.0; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; + OTHER_LDFLAGS = ( + "-ObjC", + "-lc++", + ); PRODUCT_NAME = "$(TARGET_NAME)"; TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Example.app/Example"; }; diff --git a/Example/package.json b/Example/package.json index ef32f9a..074b67d 100644 --- a/Example/package.json +++ b/Example/package.json @@ -7,15 +7,15 @@ "test": "jest" }, "dependencies": { - "react": "16.0.0-alpha.6", - "react-native": "0.44.0", + "react": "16.0.0-alpha.12", + "react-native": "0.47.2", "react-native-progress": "file:../" }, "devDependencies": { - "babel-jest": "18.0.0", - "babel-preset-react-native": "1.9.1", - "jest": "18.1.0", - "react-test-renderer": "15.4.2" + "babel-jest": "20.0.3", + "babel-preset-react-native": "3.0.1", + "jest": "20.0.4", + "react-test-renderer": "16.0.0-alpha.12" }, "jest": { "preset": "react-native" From 0556a83a3ec0b12863a75e9bb013b55e36c12c78 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Tue, 22 Aug 2017 23:23:44 +0200 Subject: [PATCH 18/22] Refactor animationOptions into two props --- Bar.js | 25 +++++++++++-------------- README.md | 5 ++--- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/Bar.js b/Bar.js index f9116fa..4321c42 100644 --- a/Bar.js +++ b/Bar.js @@ -28,10 +28,9 @@ export default class ProgressBar extends Component { unfilledColor: PropTypes.string, width: PropTypes.number, useNativeDriver: PropTypes.bool, - animationOptions: PropTypes.shape({ - animationFunction: PropTypes.oneOf([Animated.decay, Animated.timing, Animated.spring]), - config: PropTypes.object.isRequired - }) + // eslint-disable-next-line react/forbid-prop-types + animationConfig: PropTypes.object.isRequired, + animationType: PropTypes.oneOf(['decay', 'timing', 'spring']), }; static defaultProps = { @@ -44,10 +43,8 @@ export default class ProgressBar extends Component { progress: 0, width: 150, useNativeDriver: false, - animationOptions: { - animationFunction: Animated.spring, - config: { bounciness: 0 } - } + animationConfig: { bounciness: 0 }, + animationType: 'spring', }; constructor(props) { @@ -87,12 +84,12 @@ export default class ProgressBar extends Component { ); if (props.animated) { - const { animationFunction, config } = this.props.animationOptions; - animationFunction(this.state.progress, { - ...config, - toValue: progress, - useNativeDriver: props.useNativeDriver - }).start() + const { animationType, animationConfig } = this.props; + Animated[animationType](this.state.progress, { + ...animationConfig, + toValue: progress, + useNativeDriver: props.useNativeDriver, + }).start(); } else { this.state.progress.setValue(progress); } diff --git a/README.md b/README.md index 19bfac2..ee932af 100644 --- a/README.md +++ b/README.md @@ -60,9 +60,8 @@ All of the props under *Properties* in addition to the following: |**`height`**|Height of the progress bar. |`6`| |**`borderRadius`**|Rounding of corners, set to `0` to disable. |`4`| |**`useNativeDriver`**|Use native driver for the animations. |`false`| -|**`animationOptions`**|Object with the following options|| -|**`animationOptions.animationFunction`**|Sets the animation function to animate the progress. Can be one of: Animated.decay, Animated.timing, Animated.spring|`Animated.spring`| -|**`animationOptions.config`**|Sets the config that is passed into the `animationFunction`|`{ bounciness: 0 }`| +|**`animationConfig`**|Config that is passed into the `Animated` function|`{ bounciness: 0 }`| +|**`animationType`**|Animation type to animate the progress, one of: `decay`, `timing`, `spring`|`spring`| ### `Progress.Circle` From e26623be7229acbb3526327199fb6812d57dfee3 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Tue, 22 Aug 2017 23:24:02 +0200 Subject: [PATCH 19/22] Release 3.4.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bd6c512..672b9eb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-progress", - "version": "3.3.0", + "version": "3.4.0", "description": "Progress indicators and spinners for React Native using ReactART", "main": "index.js", "scripts": { From 31a6b348db1242a1a592f68f0b09e0a7ed42d7db Mon Sep 17 00:00:00 2001 From: Damien Lajarretie Date: Thu, 9 Feb 2017 11:27:58 +0100 Subject: [PATCH 20/22] Add prop to Bar to animate only when progress is increasing --- Bar.js | 81 ++++++++++++++++++++++++++++++------------------------- README.md | 1 + 2 files changed, 46 insertions(+), 36 deletions(-) diff --git a/Bar.js b/Bar.js index 4321c42..16ec828 100644 --- a/Bar.js +++ b/Bar.js @@ -1,20 +1,17 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { - Animated, - Easing, - View, - ViewPropTypes, -} from 'react-native'; +import { Animated, Easing, View, ViewPropTypes } from 'react-native'; const INDETERMINATE_WIDTH_FACTOR = 0.3; -const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR); +const BAR_WIDTH_ZERO_POSITION = + INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR); const RNViewPropTypes = ViewPropTypes || View.propTypes; export default class ProgressBar extends Component { static propTypes = { animated: PropTypes.bool, + animateIncreaseOnly: PropTypes.bool, borderColor: PropTypes.string, borderRadius: PropTypes.number, borderWidth: PropTypes.number, @@ -35,6 +32,7 @@ export default class ProgressBar extends Component { static defaultProps = { animated: true, + animateIncreaseOnly: false, borderRadius: 4, borderWidth: 1, color: 'rgba(0, 122, 255, 1)', @@ -52,7 +50,9 @@ export default class ProgressBar extends Component { const progress = Math.min(Math.max(props.progress, 0), 1); this.state = { width: 0, - progress: new Animated.Value(props.indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress), + progress: new Animated.Value( + props.indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress, + ), animationValue: new Animated.Value(BAR_WIDTH_ZERO_POSITION), }; } @@ -78,15 +78,16 @@ export default class ProgressBar extends Component { props.indeterminate !== this.props.indeterminate || props.progress !== this.props.progress ) { - const progress = (props.indeterminate + const progress = props.indeterminate ? INDETERMINATE_WIDTH_FACTOR - : Math.min(Math.max(props.progress, 0), 1) - ); + : Math.min(Math.max(props.progress, 0), 1); - if (props.animated) { - const { animationType, animationConfig } = this.props; - Animated[animationType](this.state.progress, { - ...animationConfig, + if ( + props.animated && + (!props.animateIncreaseOnly || + (props.animateIncreaseOnly && progress > this.props.progress)) + ) { + Animated.spring(this.state.progress, { toValue: progress, useNativeDriver: props.useNativeDriver, }).start(); @@ -104,14 +105,14 @@ export default class ProgressBar extends Component { easing: Easing.linear, isInteraction: false, useNativeDriver: this.props.useNativeDriver, - }).start((endState) => { + }).start(endState => { if (endState.finished) { this.animate(); } }); } - handleLayout = (event) => { + handleLayout = event => { if (!this.props.width) { this.setState({ width: event.nativeEvent.layout.width }); } @@ -134,7 +135,7 @@ export default class ProgressBar extends Component { ...restProps } = this.props; - const innerWidth = Math.max(0, width || this.state.width) - (borderWidth * 2); + const innerWidth = Math.max(0, width || this.state.width) - borderWidth * 2; const containerStyle = { width, borderWidth, @@ -146,27 +147,35 @@ export default class ProgressBar extends Component { const progressStyle = { backgroundColor: color, height, - transform: [{ - translateX: this.state.animationValue.interpolate({ - inputRange: [0, 1], - outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth], - }), - }, { - translateX: this.state.progress.interpolate({ - inputRange: [0, 1], - outputRange: [innerWidth / -2, 0], - }), - }, { - // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278 - scaleX: this.state.progress.interpolate({ - inputRange: [0, 1], - outputRange: [0.0001, 1], - }), - }], + transform: [ + { + translateX: this.state.animationValue.interpolate({ + inputRange: [0, 1], + outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth], + }), + }, + { + translateX: this.state.progress.interpolate({ + inputRange: [0, 1], + outputRange: [innerWidth / -2, 0], + }), + }, + { + // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278 + scaleX: this.state.progress.interpolate({ + inputRange: [0, 1], + outputRange: [0.0001, 1], + }), + }, + ], }; return ( - + {children} diff --git a/README.md b/README.md index ee932af..d72dc6f 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ All of the props under *Properties* in addition to the following: |**`useNativeDriver`**|Use native driver for the animations. |`false`| |**`animationConfig`**|Config that is passed into the `Animated` function|`{ bounciness: 0 }`| |**`animationType`**|Animation type to animate the progress, one of: `decay`, `timing`, `spring`|`spring`| +|**`animateIncreaseOnly`**|Animate the changes to `progress` only if increasing. |`false`| ### `Progress.Circle` From 615412123fe83c12f3114a3c1cfd9231e841dafe Mon Sep 17 00:00:00 2001 From: Damien Lajarretie Date: Thu, 9 Feb 2017 11:47:12 +0100 Subject: [PATCH 21/22] Update package.json --- package.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 672b9eb..71a6694 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { - "name": "react-native-progress", + "name": "AIS/react-native-progress", "version": "3.4.0", - "description": "Progress indicators and spinners for React Native using ReactART", + "description": + "Progress indicators and spinners for React Native using ReactART", "main": "index.js", "scripts": { "test": "eslint *.js Shapes" @@ -34,7 +35,7 @@ }, "repository": { "type": "git", - "url": "git://github.com/oblador/react-native-progress.git" + "url": "git://github.com/AirIntServices/react-native-progress.git" }, "license": "MIT", "devDependencies": { From bd4751093b0f1cd3ee37234e01f67e5221e4c1d0 Mon Sep 17 00:00:00 2001 From: Damien Lajarretie Date: Thu, 9 Feb 2017 11:53:00 +0100 Subject: [PATCH 22/22] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 71a6694..02ba9a6 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "AIS/react-native-progress", + "name": "@ais/react-native-progress", "version": "3.4.0", "description": "Progress indicators and spinners for React Native using ReactART",