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:open
  • Created 4 years ago
  • Comments:9

github_iconTop GitHub Comments

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to enable routing and navigation between component ...
The Angular 8 Router helps to navigate between pages that are being triggered by the user's actions. The navigation happens when the user...
Read more >
Angular Routing Between Components (Angular 9) - DZone
Angular Routing allows for navigation between components and enables the changing of part of a page, hence the reasoning for developing ...
Read more >
Common Routing Tasks - Angular
First, add links to the two components. Assign the anchor tag that you want to add the route to the routerLink attribute. Set...
Read more >
Navigating Between Screens - React Native
This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably ...
Read more >
Link Component - Navigate Between Pages | Learn Next.js
In Next.js, you can use the Link Component next/link to link between pages in your application. <Link> allows you to do client-side navigation...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found