24ark / React Native Step Indicator
Licence: apache-2.0
A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.
Stars: ✭ 1,054
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Native Step Indicator
Adapter
A quick adapter library for RecyclerView, GridView, ListView, ViewPager, Spinner
Stars: ✭ 376 (-64.33%)
Mutual labels: viewpager, listview
Overscroll Decor
Android: iOS-like over-scrolling effect applicable over almost all scrollable Android views.
Stars: ✭ 2,671 (+153.42%)
Mutual labels: viewpager, listview
Adaptablebottomnavigation
A simpler way for implementing the Bottom Navigation View on Android
Stars: ✭ 844 (-19.92%)
Mutual labels: viewpager
Onboardingfreebi
Simple demo of onboarding freebie screens from uplabs.com
Stars: ✭ 37 (-96.49%)
Mutual labels: viewpager
Awesome Android Ui
😎😍Android libs and UI from GitHub or other websites. android libs from Github
Stars: ✭ 33 (-96.87%)
Mutual labels: listview
Smarttablayout
A custom ViewPager title strip which gives continuous feedback to the user when scrolling
Stars: ✭ 6,972 (+561.48%)
Mutual labels: viewpager
Listbuddies
Android library to achieve in an easy way, the behaviour of the home page in the Expedia app, with a pair of auto-scroll circular parallax ListViews.
Stars: ✭ 971 (-7.87%)
Mutual labels: listview
Base Mvvm
App built to showcase basic Android View components like ViewPager, RecyclerView(homogeneous and heterogeneous items), NavigationDrawer, Animated Vector Drawables, Collapsing Toolbar Layout etc. housed in a MVVM architecture
Stars: ✭ 18 (-98.29%)
Mutual labels: viewpager
Restaurant App
Restaurant Food Ordering Mobile Application
Stars: ✭ 44 (-95.83%)
Mutual labels: listview
List view item builder
Flutter package: Item builder for ListView,to quickly build header & item & footer,and provide jumpTo(index) function.
Stars: ✭ 31 (-97.06%)
Mutual labels: listview
Coverflowpager
Android CoverFlow widget implementation using ViewPager
Stars: ✭ 35 (-96.68%)
Mutual labels: viewpager
Viewpagerhelper
这个一个 viewpager/viewpager2工具类,能够帮你快速实现导航栏轮播图,app引导页,viewpager/viewpager2 + fragment;内置多种tab指示器,让你告别 viewpager 的繁琐操作,专注逻辑功能
Stars: ✭ 957 (-9.2%)
Mutual labels: viewpager
Funtablayout
An efficient tablayout for Android with added FUN!
Stars: ✭ 20 (-98.1%)
Mutual labels: viewpager
React Native Super Grid
Responsive Grid View for React Native
Stars: ✭ 971 (-7.87%)
Mutual labels: listview
Clusterize.js
Tiny vanilla JS plugin to display large data sets easily
Stars: ✭ 6,995 (+563.66%)
Mutual labels: listview
Google Books Android Viewer
Android library to bridge between RecyclerView and sources like web page or database. Includes demonstrator (Google Books viewer)
Stars: ✭ 37 (-96.49%)
Mutual labels: listview
React Native Viewpager
ViewPager and Indicator component for react-native on both android and ios.
Stars: ✭ 921 (-12.62%)
Mutual labels: viewpager
Verticalviewpager
Vertical View Pager Scroll page in upward and downward direction. To know more See README.
Stars: ✭ 33 (-96.87%)
Mutual labels: viewpager
Multi type list view
A flutter customer ListView that displays multiple widget types.
Stars: ✭ 47 (-95.54%)
Mutual labels: listview
react-native-step-indicator
A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.
Features
- Can be used with ViewPager and Listview
- Custom Styling
- Supports vertical and horizontal orientation
- Supports animation between steps
example/src/HorizontalStepIndicator.tsx example/src/VerticalStepIndicator.tsx
Example
$ yarn
$ yarn example ios // For ios
$ yarn example android // For Android
Installation
npm install react-native-step-indicator --save
or
yarn add react-native-step-indicator
Usage
import StepIndicator from 'react-native-step-indicator';
const labels = ["Cart","Delivery Address","Order Summary","Payment Method","Track"];
const customStyles = {
stepIndicatorSize: 25,
currentStepIndicatorSize:30,
separatorStrokeWidth: 2,
currentStepStrokeWidth: 3,
stepStrokeCurrentColor: '#fe7013',
stepStrokeWidth: 3,
stepStrokeFinishedColor: '#fe7013',
stepStrokeUnFinishedColor: '#aaaaaa',
separatorFinishedColor: '#fe7013',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: '#fe7013',
stepIndicatorUnFinishedColor: '#ffffff',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 13,
currentStepIndicatorLabelFontSize: 13,
stepIndicatorLabelCurrentColor: '#fe7013',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: '#aaaaaa',
labelColor: '#999999',
labelSize: 13,
currentStepLabelColor: '#fe7013'
}
constructor() {
this.state = {
currentPosition: 0
}
}
render() {
return (
<StepIndicator
customStyles={customStyles}
currentPosition={this.state.currentPosition}
labels={labels}
/>
)
}
onPageChange(position){
this.setState({currentPosition: position});
}
//...
Properties
Name | Type | Description | Default |
---|---|---|---|
currentPosition |
Number | Current position in steps | 0 |
stepCount |
Number | Number of steps | 5 |
direction |
String | Orientation(i.e. horizontal,vertical) | horizontal |
customStyles |
Object | Custom styling | {} |
labels |
Array | Labels for each step | null |
onPress |
Function (position: Number) | Function called when a step is pressed | null |
renderStepIndicator |
Function (position: Number, stepStatus: String) | Use this to render custom content inside step | null |
renderLabel |
Function (position: Number, stepStatus: String, label: String, currentPosition: Number) | Use this to render custom label for each step | null |
Custom Styles
Name | Type | Default |
---|---|---|
stepIndicatorSize |
Number | 30 |
currentStepIndicatorSize |
Number | 40 |
separatorStrokeWidth |
Number | 3 |
separatorStrokeUnfinishedWidth |
Number | 0 |
separatorStrokeFinishedWidth |
Number | 0 |
stepStrokeWidth |
Number | 0 |
currentStepStrokeWidth |
Number | 5 |
stepStrokeCurrentColor |
String | '#4aae4f' |
stepStrokeFinishedColor |
String | '#4aae4f' |
stepStrokeUnFinishedColor |
String | '#4aae4f' |
separatorFinishedColor |
String | '#4aae4f' |
separatorUnFinishedColor |
String | '#a4d4a5' |
stepIndicatorFinishedColor |
String | '#4aae4f' |
stepIndicatorUnFinishedColor |
String | '#a4d4a5' |
stepIndicatorCurrentColor |
String | '#ffffff' |
stepIndicatorLabelFontSize |
Number | 15 |
currentStepIndicatorLabelFontSize |
Number | 15 |
stepIndicatorLabelCurrentColor |
String | '#000000' |
stepIndicatorLabelFinishedColor |
String | '#ffffff' |
stepIndicatorLabelUnFinishedColor |
String | 'rgba(255,255,255,0.5)' |
labelColor |
String | '#000000' |
currentStepLabelColor |
String | '#4aae4f' |
labelSize |
Number | 13 |
labelAlign |
String | 'center' |
labelFontFamily |
String |
Contributing
If you'd like to see something added or changed to this module please open a new GitHub issue. Pull requests are always welcome.
License
- Apache-2.0. © Arkit Vora
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].