Screen navigation

Here, you’ll find how Beagle deals with screen navigation.

On Beagle, navigation works as a type of Action, which can be used by all components that receives an action.

After these configurations, just add the example code as a return of your service and call the endpoint, defined in your controller, in your frontend.

Some navigation actions needs a parameter. It is possible to receive two route type:

  1. Local: intern navigation that expects a new screen.
  2. Remote: expects that the url points into an API that will return one of more Beagle’s components.

On the example below, see a case where the route is remote:

{
    "_beagleComponent_": "beagle:button",
    "text": "Click me!",
    "onPress": [
        {
            "_beagleAction_": "beagle:pushStack",
            "route": {
                "url": "/my-next-screen",
                "shouldPrefetch": false
            }
        }
    ]
}
Button(
   text = "Click me!",
   onPress = listOf(
       Navigate.PushStack(
           route = Route.Remote("/my-next-screen")
       )
   )
)

Types of navigation

Next you will see more details about Beagle’s navigation types:

OpenNativeRoute

OpenExternalURL

PushStack

PushView

PopStack

PopView

PopToView

ResetApplication

ResetStack