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.

[Drakoun]

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]

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