[ext] React Native Navigator?—? Navigating like A Pro in React Native

There is a lot of can do with the React Native Navigator. Here, I'll try to go through a few examples of what you can do with the Navigator and explain about it all works in depth.

In React Native you have both choices as of now for Navigation (only one cross platform) out of the box, as well as the EXN Avigator from Exponent. We'll focus on the main Navigator component as that's what's most questions I had seen pop up was about, and was the Cros S platform Navigator option. We'll not talk about Navigatorios as it isn't currently maintained by the main react native project and are only Availab Le for use on IOS. But definitely check out Exnavigator by Exponent, it's also really good.

Part 1?—? Basic Scene Rendering

One thing to understand is this whatever you pass to

Navigator.push

Is and available in the Renderscene method as a property of the route.

Let's look at an example:

Set up your Navigator like this:

<navigator
  style={{Flex:1}}
  initialroute={{name: ' Main '}}
  renderscene={This.renderscene}/>

Then, the your Renderscene method like this:

Renderscene (route, navigator) {
   if (Route.name = = ' Main ') {
     return <main Navigator={navigator}/>
   }
   if (Route.name = = ' Home ') {
     return    }
},

When your is ready-to-push a route, you could to this:

_navigate () {
  This.props.navigator.push ({
    Matches Route.name
  })
}

To call it, simply use:

<touchablehighlight onpress={() = This._navigate ()}>
    <text>go to View</text>
</TouchableHighlight>

Passing Properties

What is about passing properties? Let's look at the above example and add this functionality.

We need to set up a object that we'll use to pass these properties. Many people use the name Passprops, but this can is whatever name you want. Passprops just makes sense as it is actually passing properties. Our navigator component would stay the same. First, let's edit our Renderscene method:

Renderscene (route, navigator) {
   if (Route.name = = ' Main ') {
     Return <main Navigator={navigator} {... route.passprops}/>
   }
   if (Route.name = = ' Home ') {
     Return    }
},

Next, our _navigate function:

_navigate (property) {
  This.props.navigator.push ({
    Name: ' Home ',
    Passprops: {
      Name:property
    }
  })
}

And finally let's pass a property to the navigator:

<touchablehighlight onpress={() = This._navigate (' Hello world ')}>
    <text>go to View</text>
</TouchableHighlight>

There is a sample of the above application here.

When you had a large application with a lot of routes, the Renderscene method we defined above would start to get very lar Ge. Next, let's make the Renderscene method more dynamic.

Remember:anything you pass into your Navigator.push method would be available as a property on the route.

This means if your call:

This.props.navigator.push ({
  
  Animal: ' Dog ',
  
  State: ' Arizona '
})

All of these above properties would be available in the Renderscene method as a property of the route:

Renderscene (route, navigator) {
  Route.name = = = ' Chris '//True
  Route.animal = = = ' Cat '//False
  Route.children = = = 7//False
  Route.state = = = ' Arizona '//True
}

This "can do calculations based" on "have been passed in:

if (Route.animal = = ' cat ')//do something, render a certain scene or something

Part 2?—? Dynamic Scene Rendering

Let's set up a new Renderscene method using another implementation:

Renderscene (route, navigator) {
   Return React.createelement (route.component, {... this.props, ... route.passprops, route, navigator})
}

... this.props?-? Spread attributes to ensure any props passed down is available as usual as This.props

... route.passprops? -?when pushing to a route, allows a passprops property to pass props to next to component

Route?—? Route available as a prop on the component

Navigator?—? Navigator available as a prop on the component

There is another-to-render the above configuration, though we'll not being using it in our example it's useful to know About as it have an easier-to-read syntax if you is not familiar or does not want to use react.createelement:

Renderscene (route, navigator) {
    Let routecomponent = Route.component
    Return <routecomponent Navigator={navigator} {... route.passprops}/>
}

Or

Renderscene (route, navigator) {
  Return <route.component Navigator={navigator} {... route.passprops}/>
}

As can see in the first dynamic example above, we is using the React.createelement function to manually create our CO Mponent definition.

Below is the API for React.createelement in React Native:

Reactelement.createelement (component, [object props], [children ...])

The first argument is the component-to-render, the second argument is a object containing any props this need to be Attached to, component, and the third argument are any children.

To use this, we'll call Navigator.push like this:

_navigate (name) {
  This.props.navigator.push ({
    Component:home,
    Passprops: {
      Name:name
    }
  })
}

And pass the properties like this:

<touchablehighlight onpress={() = This._navigate (' SOME NAME ')}>
  <text>go to Home</text>
</TouchableHighlight>

The component have to is available in the scope of the "view for this" work. You can either import the view into the page:

Import Home from '. /pathtohome '

OR Create the component in the same file.

There is a example of the above configuration here.

Part 3?—? Scene Configuration

You can control how the navigator renders the scene to the view with the Configurescene method on the navigator. The properties available are:

Pushfromright
Floatfromright
Floatfromleft
Floatfrombottom
Floatfrombottomandroid
Fadeandroid
Horizontalswipejump
Horizontalswipejumpfromright
Verticalupswipejump
Verticaldownswipejump

To implement this, you can set up your navigator with this additional property and attach it to a function:

<navigator
    configurescene={This.configurescene}
    style={{Flex:1}}
    initialroute={{Component:main}}
    renderscene={This.renderscene}/>

Then, set up your configurescene and pass in one of the above listed configurations:

Configurescene (route, Routestack) {
   
}

One interesting-the-use-is-to-check for-a route property, then show a modal without have to do a lot of Configur ation

Configurescene (route, Routestack) {
    if (Route.type = = = ' Modal ') {
      Return Navigator.SceneConfigs.FloatFromBottom
    }
    
}

Now, we just need to pass the type to the navigator, and set a default type:

_navigate (name, type= ' Normal ') {
  This.props.navigator.push ({
    Component:home,
    Passprops: {
      Name:name
    },
    Type:type
  })
}

If no type is defined in the _navigate call and then type= ' Normal ' would be the default. If anything else is passed as the second argument to _navigate, ' Normal ' would be replaced.

And we can call the modal like this:

  onpress={() = This._navigate (' hello!! ', ' Modal ')}>
  <text style={styles.buttontext}>show modal</text>
</TouchableHighlight>

tada! Here is a working example of Scene Configuration.

Part 4?—? Custom Navigation Bar

Want to has a persistent Navigation Bar in your app. To does this, you need to add another property to the Navigator component called Navigationbar and pass in a <NAVIGATOR.N Avigationbar/> Component:

navigationbar={
  
    
    routemapper={Navigationbarroutemapper}/>
}

Then we set up the Navigationbarroutemapper object to configure the Nav bar. The Navigationbarroutemapper takes three function arguments:

  
}

  
}

  
}

We ' ve already covered the route and navigator properties, and the same properties would be available in the route and Navig Ator properties here as they is in the Renderscene method. Index keeps tabs of how far to the route stack you are. Index starts at 0 a goes up, so if you want to does calculations based on index you can use this.

We'll check if index is zero-show or hide the back button.

We'll also check to see if there are a route.onpress function passed in and show or hide a right button with a custom fun Ction and text:

var navigationbarroutemapper = {
 LeftButton (route, navigator, Index, navstate) {
 if (Index > 0) {
 return (
 <touchablehighlight 
 Underlaycolo r= "Transparent" 
 onpress={() = {if (Index > 0) {navigator.pop ()}}}> 
 <text style= {Styles.leftnavbuttontext}>back</text> 
 </TouchableHighlight>) 
} 
 Else {return n ULL} 
}, 
 Rightbutton (route, navigator, index, navstate) {
 if (route.onpress) return (
 <toucha Blehighlight 
 onpress={() = Route.onpress ()}> 
 <text style={Styles.rightnavbuttontext} 
 {Route.righttext | | ' Right Button '} 
 </text> 
 </TouchableHighlight>) 
}, 
 Title (route, navigator, Ind Ex, navstate) {
 return <text style={styles.title}>my APP title</text> 
} 
}; 
 

Next, let's set up your. Push configuration, create our onpress and pass the Onpress method as a property of the route:

Onpress () {
  Alert ("YO from right button")
}
  
GoToNext () {
  This.props.navigator.push ({
    Component:two,
    Passprops: {
      ID: ' MY ID ',
    },
    OnPress:this.onPress,
    Righttext: ' alert! '
  })
}

Here's what the looks like:

Here is a working example of the Navigationbar.

Part 5?—? Navigator Methods

So far and we have been using the push method of the navigator:

  
})

But, there is quite a few other methods as well:

Getcurrentroutes ()-Returns the current list of routes

Jumpback ()-Backward without unmounting the current scene

Jumpforward ()-Jump forward to the next scene in the route stack

Jumpto (Route)-Transition to an existing scene without unmounting

Push (route)-Navigate forward to a new scene, squashing any scenes so you couldjumpforward to

Pop ()-Transition back and unmount the current scene

Replace (route)-replace the current scene with a new route

Replaceatindex (route, index)-Replace a scene as specified by an index

Replaceprevious (Route)-Replace the previous scene

ResetTo (Route)-Navigate to a new scene and reset route stack

Immediatelyresetroutestack (routestack)-Reset every scene with an array of routes

Poptoroute (Route)-Pop to a particular scene, as specified by its route. All scenes after it'll be unmounted

Poptotop ()-Pop to the first scene of the stack, unmounting every other scene

Would implement some of these other methods:

  
})

This.props.navigator.pop ()

This.props.navigator.popToTop ()

  Component:somecomponent
})

I ' ve set up a project here with these methods implemented.

React Native May was undergoing a future change in the navigation, as there was a proposal to replace the API and functional ity. In this case, I'll try to does another tutorial on the new Navigator functionality in the future if it's released!

My Name is Nader dabit. I am a developer at School Status where we help educators make smart instructional decisions by providing all their data i n one place. Check us out @schoolstatusapp.

If You like React Native, checkout out our podcast?—? React Native Radio ondevchat.tv

[ext] React Native Navigator?—? Navigating like A Pro in React Native