How can I make react-native build copy an asset from node_modules to the apk?

Question

I am building a react-native app which embeds a WebView in order to host some non-native react components. I have a small html file which is the source for the WebView and lives in a sub-folder of android/app/src/main/assets, which I understand is where it needs to be for the build to copy it to the apk, though I think I will need another copy in another location for IOS. So far so good...this much works.

Now, the htm file needs to pull in the regular react components from code in an npm module. It contains a script tag whose src needs to reference a file which is available in a subdirectory of node_modules. I don't know of any url I can put in the src that will reference the file direct from node_modules and get it copied to the apk. The simple solution is to manually copy the file into the same subfolder of android/app/src/main/assets and simply use its name as the src. This also works, though there may be a better way.

Problem: how can I automate copying the file from node_modules to assets? (Ideally, a solution would also work for IOS, though at this point I'd be glad to have an android-only one.)

I explored rnpm and react-native link. Documentation I can find is very inadequate, but it appears this mechanism can only be used for fonts.

I explored adding a copy command to the start script in package.json, like this:

"scripts": {
    "start": "copy/Y node_modules/X/Ybundle.js android/app/src/main/assets/X/Ybundle.js & node node_modules/react-native/local-cli/cli.js start"
},

but the copy did not happen when I ran react-native start-android.

I am wondering whether something could be added to the react-native project's gradle script, but cannot find any documentation on how this is used in the react native build process.

Answer 1

The best solution I've found so far is to add some scripts to package.json:

"scripts": {
    "copyAssets": "node -e \"fs.copyFileSync('./node_modules/bloom-player-react/output/bloomPlayerControlBundle.js','./android/app/src/main/assets/bloom-player/bloomPlayerControlBundle.js')\"",
    "start-android": "npm run copyAssets && react-native run-android",
    ...
  }

Then when I npm run start-android, first the copy happens, and then the normal android startup.