24ark / react-native-step-indicator

A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.
Apache License 2.0
1.44k stars 312 forks source link

Navigate between componenets #58

Open chevulkar opened 5 years ago

chevulkar commented 5 years ago

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.

Drakoun commented 5 years ago

Did you see this example ? https://github.com/24ark/react-native-step-indicator/blob/master/example/HorizontalStepIndicatorExample.js It should help you https://github.com/24ark/react-native-step-indicator/blob/a8b5aa41d56d5c4795a8edccc694959ed1c4ab90/example/HorizontalStepIndicatorExample.js#L143-L144 https://github.com/24ark/react-native-step-indicator/blob/a8b5aa41d56d5c4795a8edccc694959ed1c4ab90/example/HorizontalStepIndicatorExample.js#L124 https://github.com/24ark/react-native-step-indicator/blob/a8b5aa41d56d5c4795a8edccc694959ed1c4ab90/example/HorizontalStepIndicatorExample.js#L133

chevulkar commented 5 years ago

I solved the problem. I passed an function as a to each screen and on click of any button on that screen I triggered that function on main screen and changed the page see the example below

import StepOne from '../StepOne'; import StepTwo from '../StepTwo'; import StepThree from '../StepThree'; nextPage = (page) => { this.viewPager.setPage(page) } const PAGES = [{"id":1,"page":<StepOne nextPage={this.nextPage}></StepOne>},{"id":2,"page":<StepTwo nextPage={this.nextPage}></StepTwo>},{"id":3,"page":<StepThree nextPage={this.nextPage}></StepThree>}];

and from StepTwo I simply called onPress={()=>this.props.nextPage(2)}

chevulkar commented 5 years ago

I have passed nextPage as a props to the pages, and from second pages I simply call the function

chevulkar commented 5 years ago

Post your code here ill look into it

angielle commented 5 years ago

@chevulkar your solution creates an error that this.nextPage is undefined

chevulkar commented 5 years ago

Please share your code.