ProgressBar Component for macOS, iOS (based on UIProgressView), and Windows.
macOS | iOS | Windows |
---|---|---|
> |
npm install @react-native-community/progress-view --save
or
yarn add @react-native-community/progress-view
The package is automatically linked when building the app. All you need to do is:
npx pod-install
Run the following commands
react-native link @react-native-community/progress-view
progress-view
project to your solution.node_modules\@react-native-community\progress-view\windows\progress-view\progress-view.vcxproj
Add a reference to progress-view
to your main application project. From Visual Studio 2019:
Right-click main application project > Add > Reference… Check progress-view
from Solution Projects.
Add #include "winrt/progress_view.h"
.
Add PackageProviders().Append(winrt::progress_view::ReactPackageProvider());
before InitializeComponent();
.
Manually linking the library - iOS
Libraries
➜ Add Files to [your project's name]
node_modules
➜ @react-native-community/progress-view
and add RNCProgressView.xcodeproj
libRNCProgressView.a
to your project’s Build Phases
➜ Link Binary With Libraries
Cmd+R
)Import ProgressView from @react-native-community/progress-view
import {ProgressView} from "@react-native-community/progress-view";
Add ProgressView like this
<ProgressView
progressTintColor="orange"
trackTintColor="blue"
progress={0.7}
/>
yarn install
yarn add react-native@0.62 --dev
(React Native Windows relies on a version of react-native lower than iOS)yarn start:windows
example/windows/ProgressViewExample.sln
yarn install
pod install
yarn ios
yarn install
pod install
progress
The progress value (between 0 and 1).
Type | Required |
---|---|
number | No |
progressImage
A stretchable image to display as the progress bar.
Type | Required |
---|---|
Image.propTypes.source | No |
progressTintColor
The tint color of the progress bar itself.
Type | Required |
---|---|
string | No |
progressViewStyle
The progress bar style. Network images only work on Windows.
Type | Required |
---|---|
enum(‘default’, ‘bar’) | No |
trackImage
A stretchable image to display behind the progress bar. Network images only work on Windows.
Type | Required |
---|---|
Image.propTypes.source | No |
trackTintColor
The tint color of the progress bar track.
Type | Required |
---|---|
string | No |
isIndeterminate
Turns progress bar into an indeterminate progress bar
Type | Required | Platform |
---|---|---|
bool | No | Windows |
The library is released under the MIT license. For more information see LICENSE
.
Author: react-native-progress-view
Source Code: https://github.com/react-native-progress-view/progress-view
#react-native #react #mobile-apps