This is a new section of the documentation and it's missing a lot of terms! Please submit a pull request or an issue with a term that you think should be explained here.
Also known as navigation header, navigation bar, navbar, and probably many other things. This is the rectangle at the top of your screen that contains the back button and the title for your screen. The entire rectangle is often referred to as the header in React Navigation.
A screen component is a component that we use in our route configuration.
Screen in the component name is entirely optional, but a frequently used convention; we could call it
CasaPantalla and this would work just the same.
We saw earlier that our screen components are provided with the
navigation prop. It's important to note that this only happens if the screen is rendered as a route by React Navigation (for example, in response to
this.props.navigation.navigate). For example, if we render
DetailsScreen as a child of
DetailsScreen won't be provided with the
The "Navigation prop reference" section goes into more detail on this, describes workarounds, and provides more information on other properties available on
This prop will be passed into all screens, and it can be used for the following:
dispatchwill send an action up to the router
stateis the current route for the screen
getParamis a helper to access a param that may be on the route
goBack, etc are available to dispatch actions in a convenient way
Navigators can also accept a navigation prop, which they should get from the parent navigator, if there is one.
For more details, see the "Navigation prop document".
The state of a navigator generally looks something like this:
For this navigation state, there are two routes (which may be tabs, or cards in a stack). The index indicates the active route, which is "B".
Each route is a piece of navigation state which contains a key to identify it, and a "routeName" to designate the type of route. It can also contain arbitrary params:
Child Navigation State
When composing navigators, it is possible for a route to be a navigation state. It would look like this: