Improvements to documentation

Here are some thoughts on things we need to cover in the docs

• Recipes for various setups, e.g. typescript
• Setting up babel-plugin-module-resolver as an alternative to https://blog.callstack.io/a-cure-for-relative-requires-in-react-native-2b263cecf0f6
• Transpiling modules under node_modules
• More detailed docs regarding how it differs from React Native packager
• Manually configuring XCode or Gradle to use Haul instead of RN packager

If you have more ideas, please comment below/edit this post if you have access.

[GeeWee]

I’d be willing to create a PR with a typescript recipe if there’s interest.

[migueloller]

Hey @satya164, just wanted to chime in and say that it’s also possible to avoid long relative requires by using Webpack. Here’s a Haul config I’ve been using that allows .jsx in React Native and allows to require anything inside src (e.g., require('components/MyButton')).

const path = require('path')

module.exports = ({ platform }, defaults) => ({
  entry: `./index.${platform}.js`,
  module: {
    ...defaults.module,
    rules: [
      ...defaults.module.rules,
      // Support .jsx
      {
        test: /\.jsx$/,
        use: {
          loader: require.resolve('happypack/loader'),
          query: { id: 'babel' },
        },
        include: path.resolve(__dirname, 'src'),
      },
    ],
  },
  resolve: {
    ...defaults.resolve,
    // Support .jsx
    extensions: [...defaults.resolve.extensions, '.jsx'],
    // Avoid extremely long relative imports
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
})

More fine-grained control like babel-plugin-module-resolver can also be achieved using the resolve.alias option in Webpack but just using resolve.modules worked for my use case.

I’m also planning on adding react-hot-loader to support HMR for functional stateless components in React Native (currently unsupported). I wouldn’t mind contributing to the docs adding a couple of recipes.