ExNavigation : how to pass props to all router components?

Question

In the following code, what's the best way to pass the database variable as props to all the components served by the Router/NavigationProvider?

import {
  createRouter,
  NavigationProvider,
  StackNavigation,
} from '@exponent/ex-navigation'

const Router = createRouter(() => ({
  jobs: () => Jobs,
  sample: () => Sample
}))

render () {
  const database = this.openDatabase()
  <NavigationProvider router={Router}>
        <StackNavigation initialRoute={Router.getRoute('home')} />
  </NavigationProvider>
}

Thanks!

have you solved this in a manner way? I'm trying to achieve the same thing with [ex-navigation component](https://github.com/exponent/ex-navigation) . Would help if you could share some snippets. — el.severo, Jan 11 '17 at 22:42
The accepted answer solved it for me in this instance. Just create a file (services/database.js) and import the db instance when you need it — cmrichards, Jan 11 '17 at 23:10

Jozan · Accepted Answer · 2016-12-01T11:08:43.827

You should create a new javascript file which exports your database connection and import it in your component you wish to use it.

You can also create higher order component which gives database connection as a prop to your component. This is similar to withNavigation which is built-in in ExNavigation or connect which comes with Redux's React bindings.

However, since HOC is a bit advanced topic (but not hard to grasp!) here is an example without it.

services/database.js

// Open database connection here and export it like any other module.
// The following is pseudo code to illustrate example

import { database } from 'database'
export default database.connect()

routes.js

import Jobs from './containers/Jobs'
import Sample from './containers/Sample'
import { createRouter } from '@exponent/ex-navigation'

const Router = createRouter(() => ({
  jobs: () => Jobs,
  sample: () => Sample
}))

export default Router

App.js

import React from 'react'
import {
  NavigationProvider,
  StackNavigation,
} from '@exponent/ex-navigation'

const App = () => (
  <NavigationProvider router={Router}>
     <StackNavigation initialRoute={Router.getRoute('home')} />
  </NavigationProvider>
)

export default App

containers/Jobs.js

import React, { Component } from 'react'

// Import database connection in every container component you wish to use it
import databaseConnection from '../services/database'

export default class Jobs extends Component {
  state = {
    jobs: []
  }

  componentDidMount() {
    databaseConnection
      .get('jobs')
      .then(jobs => this.setState({ jobs }))
  }

  render() {
    return (
      {this.state.jobs.map(job =>
        // Render jobs
      )}
    )
  }
}

Thanks for that. I'm familiar with HOC and how redux works. You're right though and your example is the simplest way of doing it. I just wondered if I've been missing some kind of passProps option like I've used in other routers. — cmrichards, Oct 15 '16 at 19:39
But in your example, you're not passing as props, you're accessing the `databaseConnection` from the child component. How do I pass it in from the `App` component? — Rodrigo Ruiz, Nov 19 '16 at 20:19
Yeah, this isn't really an answer. If you want to pass through as props (and I too have cases where I want to do exactly that), it seems like ex-navigation does not have an answer for you. — Ed Ropple, Dec 29 '16 at 22:46

ExNavigation : how to pass props to all router components?

1 Answers1