React Native

While the Redux use case is more than suitable to use for React Native, we have one unique (and arguably limiting) property of the React Native packager which is: you can't require anything dynamically.

So all of the fancy glob-and-require code that's supposed to glue up many files can't be done. This means more manual work and bookkeeping.

// this can't be done

each(m => require(m), glob('modules/**/state'))

Injecting with hygen

Using hygen we can help ourselves maintain these dependencies.

Having that every module, component or file that you add is generated with hygen, we could do something like this:

_templates/

component/

new/

component.ejs.t

inject_component.ejs.t <---- let's look at this

And here's how inject_component looks like:

---

inject: true

to: app/globs/all-components.js

skip_if: <%= name %>

after: "const components = ["

---

<%= Name %>: require('../components/<%= name %>').default,

This assumes we have a central file in globs/all-components.js that we use to glue all components to one re-exportable module:

const components = {

Avatar: require('../components/avatar').default,

Icon: require('../components/icon').default

}

export default components

Running this:

$ hygen component new --name intro

Will build this:

const components = {

Avatar: require('../components/avatar').default,

Icon: require('../components/icon').default,

Intro: require('../components/intro').default

}

export default components

Now we could do something fun like this:

import { Intro } from 'app/globs/all-components'