24ark/react-native-step-indicator

A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.

react-native-step-indicator's Issues

full-width support for step-indicator

May I know how can I make full-width even if I use for at least 3 steps?

Support for Animation Between Steps

Was curious if there was support for animation between steps? I have some code that may achieve this. I'll test the library tomm and see if I can integrate.

Great library been looking for a nice solution for this one for a while :)

Update: I have attached this zip with working animation version built on top of 'react-native-scrollable-tab-view' - I have not yet reviewed your solution but this might be a nice feature to support this as well.

Archive.zip

i wanna put image of the line of the step indicator.

Please Help

Removing swipe between screens

Need validation in each swipe of screens. Please help me

Label alignment

Can I change the alignment of labels?

Vertical stepper like this possible?

Hi there,

Is it possible to use this awesome package to create a stepper that looks/animates like this:

0.0.2 breaks separatorFinishedColor

I couldn't find any changelog that indicates a change in the api related to this property.

0.0.1

0.0.2

This occurs only when the step indicator is loaded with a certain step, but once it is animated to another step the coloring of the separator restores its correct behavior.

Also, if you noticed, the separator extends beyond the last step, i haven't looked into this yet. I only upgraded to 0.0.2, no code changes.

labels = [
  languageStore.get('job', 'hire'),
  languageStore.get('job', 'shareInfo'),
  languageStore.get('job', 'agreement'),
  languageStore.get('job', 'completion'),
  languageStore.get('job', 'feedback')
];

customStyles = {
  currentStepIndicatorLabelFontSize: 13,
  currentStepIndicatorSize: 30,
  currentStepLabelColor: colors.white,
  currentStepStrokeWidth: 3,
  labelColor: colors.white75,
  labelSize: 13,
  separatorFinishedColor: colors.yellow,
  separatorStrokeWidth: 2,
  separatorUnFinishedColor: colors.white,
  stepIndicatorCurrentColor: colors.white,
  stepIndicatorFinishedColor: colors.yellow,
  stepIndicatorLabelCurrentColor: colors.white,
  stepIndicatorLabelFinishedColor: colors.yellow,
  stepIndicatorLabelFontSize: 13,
  stepIndicatorLabelUnFinishedColor: colors.white,
  stepIndicatorSize: 25,
  stepIndicatorUnFinishedColor: colors.white,
  stepStrokeCurrentColor: colors.white,
  stepStrokeFinishedColor: colors.yellow,
  stepStrokeUnFinishedColor: colors.white,
  stepStrokeWidth: 3
};

// ..

<StepIndicator
  labels={this.labels}
  customStyles={this.customStyles}
  currentPosition={jobStore.job.step} // 0-5
/>

Navigate between componenets

I have used external components my code looks like this
import StepOne from '../StepOne'; import StepTwo from '../StepTwo'; import StepThree from '../StepThree'; const PAGES = [{"id":1,"page":<StepOne></StepOne>},{"id":2,"page":<StepTwo></StepTwo>},{"id":3,"page":<StepThree></StepThree>}];
Now the problem here is I need to manually trigger the transitions between pages I tried putting onPress={()=>this.viewpager.goToPage(2)} in my StepOne component but it dosen't work
I have no idea is this even possible as i didn't find any example of the same. Can someone please help me with this.

renderStepIndicator not working

Kindly add some example in doc or example app
I want to show like this

Basically i want to render tick image inside step circle and i've tried doing like this, but no success

<StepIndicator
           customStyles={customStyles}
           currentPosition={this.state.currentPosition}
           stepCount={3}
           renderStepIndicator={(state)=>{_this.putTickIndicator(state)}}
/>

putTickIndicator = (state)=> {
    console.log(state)
    return <Image source={require('./../../images/ic_backwd.png')} style={{tintColor: '#000000',height: 10, width:10}}/>
  }

[Question/feature] Current step should be a spinner

Can we have a spinner on the current step? Or a kind of pulsing animation?

cant change fonts?

Typescript usage error

Problem

I'm trying to use steps in the simplest way and typescript complains but when i run the app it works fine

import StepIndicator from 'react-native-step-indicator';

render() {
  return (<StepIndicator currentPosition={0} labels={steps} />); // error shown here
}

Error

[ts]
JSX element type 'StepIndicator' is not a constructor function for JSX elements.
  Types of property 'state' are incompatible.
    Type 'null' is not assignable to type 'Readonly<{}>'. [2605]

package.json

dependencies

"react": "16.6.1",
"react-native": "0.57.5",
"react-native-step-indicator": "0.0.9",

dev dependencies

"@types/node": "^10.12.9",
"@types/react": "16.7.6",
"@types/react-native": "0.57.11",
"typescript": "3.1.6"

Other info

vscode: v1.29.1
os: linux
hint: when i use const x = new StepIndicator({ labels: pasos, currentPosition: 0 }); it doesn't show errors and i can see the props suggestions

[feature] Allow for custom component when rendering a step

As the title says it would be cool to allow the developer to pass custom component to be used when rendering a particular step.

Warning componentWillReceiveProps is being deprecated

As the title says, we are getting warnings that componentWillReceiveProps is deprecated and will be removed in the next major version.
Please update to get this warning removed.

I am on versions
react-native: 0.60.5
react: 16.8.6

Alternate label alignment left - right

Hey, do you know if there would be an easy way to make labels alternate between both side of the bar?
(example: label 1 on left, label 2 on right etc.)

support for custom label component

It would be nice if it adds support for custom label component instead of string

can page status and pagenumber be changed manually?

In this ss I want to change status of "personal information" completed on pressing "save" button. If there's a solution do let me know kindly

Custom styles won't update

It's not possible to update styles after the component has been constructed. This is could be solved by storing the customStyles inside the component's state. This way it should respond to style changes.

Current step indicator changed when trigerred from other page

Hello,

I have an issue for this repo but i don't see any template so i just write this issue.

I use this component in my project for several page and found something weird that i can't handle by my self.

Case : in one page, i have 2 tabs( let's say TAB 1 and TAB 2) and step indicator component for each page. At the first load, step indicators is running well and looks nice. But, when i press indicator number 2 in TAB 1 then i move to TAB 2 i found current indicator in TAB 2 is number 2. So i press again indicator number 3 in TAB 2 then i move back to TAB 1 i found current indicator in TAB 1 is number 3.

FYI, i use version 0.0.9 of this component. I used this with redux to save current indicator because i need current indicator index to scroll to next section so i can calculate x and y value.

onPress doesn't react to touches unless I inspect it with react-devtools

I've implemented the step indicator in my app and It worked great so far, recently the onPress function of the step indicator stoped working. I dont know why, but when I inspect it (toggle inspector) and checkt it with react-devtools after I close the inspector it works again. I tried both on android studio emulator and on my android phone.
this is the code for the indicator:

<StepIndicator
                        onPress={(number) => this.stepPress(number)}
                        stepCount={4}
                        customStyles={customStyles}
                        currentPosition={this.state.currentPage}
                        labels={labels}
                    />

and the handler:
stepPress(number) { console.log(number); if (number <= this.state.allowPages) { this.setState({currentPage: number}); this.refs.scrollview.setPage(number); } else { Alert.alert('you have to fill all forms before moving forward'); } }

the problem is that it doesn't even console until I open the inspector. please help thank you

Updated usage with FlatList.

Great work on the implementation. Only thing it only works with ListViews on iOS and not android.
If you convert to FlatList and add.

renderPage = ({item}) => {
return (

{item.title}
{item.body}

);
}

getVisibleRows = (visibleRows) => {
const visibleRowNumbers = visibleRows.viewableItems.map((row) => {
return row.index;
});
this.setState({currentPage:visibleRowNumbers[0]})
}

it will work across both platforms.

Custom finishedStepIndicatorSize

I can change stepIndicatorSize and currentStepIndicatorSize, but there should also be finishedStepIndicatorSize to update the size of the indicator as soon as it is finished

current step number not centered on android

i try to check what make the problem and i found out that its something related to the growing animation.
when i set the size of the current step to be equal to the other its ok

problem color Label on Ios

stepIndicatorLabelFinishedColor and stepIndicatorLabelUnFinishedColor do not work on ios on nexts steps just when current position is 0.

in Android devices has problem

listview scrolling the StepIndicator was not follow

gradient color

Can I use a gradient color on the background?

Can be integrated with Flutter?

Hi,Im new to App development,and now im creating android and Ios apps in flutter framework.I really needed to add this step indicator in my application.Can anyone tell me how to add this into mine???

Compatibility issue with react-native 0.52.0

I tried react-native-step-indicator with react-native new version. But it not worked. This is the package.json file.
{
"name": "app-test",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "25.0.0",
"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^25.0.0",
"firebase": "^4.9.0",
"react": "16.2.0",
"react-dom": "^16.2.0",
"react-native": "0.52.0",
"react-native-android-kit": "^1.2.1",
"react-native-gesture-handler": "^1.0.0-alpha.40",
"react-native-indicators": "^0.11.1",
"react-native-paged-scroll-view": "^2.0.4",
"react-native-pathjs-charts": "0.0.33",
"react-native-router-flux": "^4.0.0-beta.28",
"react-native-step-indicator": "0.0.7",
"react-native-tab-view": "^0.0.74",
"react-native-tabs": "^1.0.9",
"react-native-viewpager": "^0.2.13",
"react-navigation": "^1.0.0-beta.27",
"victory": "^0.25.4",
"victory-native": "^0.17.0"
}
}

Next and previous button

Good afternoon, I'm having trouble creating next and previous button, would you have any examples ??

I'm trying to use the RN navigation but it's not working, it brings me the error undefined is not object (evaluating this2.props.navigation.navigate)

labelAlign property not being applied

Hi there,

I have tried using the property "labelAlign" with either values 'right' or 'left' to align the labels to the either side. However, the labels' alignment does not update and is still has the default 'center' alignment.

Space between step indicator and label text and also fixed length for separatorStroke

How to add spacing between step indicator and left align label for vertical direction ?
Current output:

Also currently length for separatorStroke calculated based on height of the parent container. Is it possible to to set fixed height or length for separatorStroke ?

Expected output:

only first indicator number rendered

only first indicator number rendered by default，RN version 4.8.3，iOS emulator

Blurry white gap between currentStepStrokeWidth and stepIndicator

I see the blur in Android devices, what is the cause, I am I only getting this error.

The custom style I used
customStyles = {
stepIndicatorSize: 25,
currentStepIndicatorSize:35,
separatorStrokeWidth: 8,
currentStepStrokeWidth: 6,
stepStrokeCurrentColor: '#0b4f7c',
stepStrokeWidth: 0,
stepStrokeFinishedColor: '#196ea7',
stepStrokeUnFinishedColor: '#0b4f7c',
separatorFinishedColor: '#196ea7',
separatorUnFinishedColor: '#0b4f7c',
stepIndicatorFinishedColor: '#196ea7',
stepIndicatorUnFinishedColor: '#0b4f7c',
stepIndicatorCurrentColor: '#196ea7',
stepIndicatorLabelFontSize: 15,
currentStepIndicatorLabelFontSize: 15,
stepIndicatorLabelCurrentColor: '#ffffff',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: '#ffffff',
labelColor: '#999999',
labelSize: 12,
currentStepLabelColor: '#196ea7'
}

step indiactor change position very slowly

Hello. i have long forms in ViewPager pages and when i Change pages step indiactor position work very slowly. i show my forms like this
` <ViewPager
style={{flexGrow:1}}
ref={(viewPager) => {this.viewPager = viewPager}}
onPageSelected={(page) => {this.setState({currentPage:page.position})}}
>

            </ViewPager>`

custom label - width can't 100% or auto

i don't know how to set width of label

How to animate?

Awesome plugin. Followed your steps. I've set my currentPosition state to 0 initially and in componentdidupdate, I am changing the currentPosition state. I dont know how to animate this though. Can you please provide instructions for that?

thanks

Update finished color

How to change customStyle for specific position. For example, I have 4 steps, in which I have viewed 3. When I go back to step 1 or 2, until 3 steps the color should be the same and for 4th step it should be different.

Import syntax for typescript.

What is the correct way to import StepIndicator?
import StepIndicator from "react-native-step-indicator"; and import * as StepIndicator from "react-native-step-indicator"; not work. It says Property render is missing. Changing this line to import * as React from "react" work.

stepIndicatorLabelUnFinishedColor and stepIndicatorLabelFinishedColor not working

Here is my code

`const customStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize:35,
separatorStrokeWidth: 8,
currentStepStrokeWidth: 1,
stepStrokeCurrentColor: '#fe7013',
stepStrokeWidth: 3,
stepStrokeFinishedColor: '#fe7013',
stepStrokeUnFinishedColor: '#aaaaaa',
separatorFinishedColor: '#fe7013',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: 'red',
stepIndicatorUnFinishedColor: '#ffffff',
stepIndicatorCurrentColor: 'red',
stepIndicatorLabelFontSize: 16,
currentStepIndicatorLabelFontSize: 16,
stepIndicatorLabelCurrentColor: '#fff',
stepIndicatorLabelFinishedColor:'#fff',
stepIndicatorLabelUnFinishedColor: '#000',
}

render() {

return (
  <View style={styles.container}>
   <StepIndicator
     customStyles={customStyles}
     currentPosition={this.state.currentPosition}
     stepCount={3}
    
/>
  </View>
);

}`

stepIndicatorLabelCurrentColor is working as shown in screenshot(white) but stepIndicatorLabelFinishedColor and stepIndicatorLabelUnFinishedColor are not working

Please update example for horizontal view

Due react-native-viewpager is no more maintenance. So please provide an example of another package. I suggest using https://github.com/zbtang/React-Native-ViewPager

custom Font Family for labels?

Not able to apply custom fontFamily to the Label Text

StepIndicator keep refreshing

Version 0.0.3
StepIndicator kept being updated with animating the current circle as another text input is typing in.

How to i can get index of item has click?

I want get index of item, go back or next to. I has read docs and i no see any props to i can do this.
So can you help me do this?
Thanks

RTL support

It would be nice if it adds support for rtl.
steps from right to left

The example project is not running

After running the example project, I get this error
Error: Couldn't find preset "es2015" relative to directory

I also try to install babel preset es2015 but the problem isn't resolved.

Method for forcing final step to be complete.

I'm trying to set the current step to something beyond the total steps, but it still considers the final step as 'current'. The screenshot shows the progress as completed (delivered to customer), but the step indicator is still showing the destination as active.

The current position is 3.

Custom Image for Finished

I want to render Custom Image for finished and numbers for current and not finished.

customStyles are not updating dynamically..

Can I know is it possible now to update customStyles dynamically ?
I Have set my styles in state and using the same in customStyles prop in StepIndicator.

I my case customStyle will change as pr the status change on indicator.

return
But the colors / styles are not reflecting/changing.

Please help me out here.

Step movement onPress()

Hi,
I have written the same code from your example (HorizontalStepIndicator.js).
Happy with it,but i wanted something like i have a button below to the step indicators, and when i click on that button the step has to move to the next,so how do i achieve that.
(what is the onPress() that i have to write on that button)?
Please help.

Allow custom finished color per step

I currently have a use case where I'd like the finished color per step to be dependent on some state of completion of the form that they have filled in.

For example, on each page of the form the user can check off "Opt out", and if they move on to the next page without fully completing the form, I'd like to render a different fill color for that step depending on the "completeness" of that step.

I currently just feed in an array of state that correspond to the position, and that conditionally renders the finished color for each step as complete("green"), or incomplete("red").

How would you approach this with the current API? Would this be a common use case for others that could warrant a pull request? I'm happy to contribute if so, but would like your input before I proceed.

Awesome component by the way, thanks!