Extend ReactNative's platform specific extensions?

Question

Is it possible to hook into React-Native's platform specific extensions to use custom ones?

In the same way you can diverge .ios.js and .android.js, is there a way to define custom extensions .xyz.js. (An equivalent to webpack's resolve.extensions)

Answer 1

You can override the original bundler configuration in rn-cli.config.js in the project root like this:

const { getDefaultConfig } = require('metro-config')

module.exports = (async () => {
  const {
    resolver: {
      sourceExt
    }
  } = await getDefaultConfig()

  return {
    resolver: {
      sourceExts: ['xyz.js', ...sourceExts]
    }
  }
})()

The bundler documentation suggests to use the platforms property instead of sourceExt, but unfortunately, I'm having no luck with that one yet (most probably because the actual target platform still will be ios or `android, so RN will use that one instead of ours).

sourceExts extends not the platform list itself, but the extension list, which is something like ['js', 'json', 'ts', 'tsx'] by default. If we expand it like ['xyz.js', 'js', 'json', 'ts', 'tsx'], RN will pick *.xyz.js, if exists, first.