Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Navigate between componenets

See original GitHub issue

Issue Description

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.

Issue Analytics

State:
Created 4 years ago
Comments:9

Top GitHub Comments

2reactions

Drakouncommented, Jan 28, 2019

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

1reaction

chevulkarcommented, Feb 1, 2019

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)}