Will this also work for React Native Web?

[bwjohns4]

Will this also work for React Native Web?

[rockiger]

If you use with create-react-app, it will probably work (https://necolas.github.io/react-native-web/docs/installation/#create-react-app). If you use it with expo, it probably won't.

[bwjohns4]

I built it with Expo. Is there anything I can do to tweak it after bundling to make it work as an Expo app?

[rockiger]

I don't know. Can you create the same directory structure like the build-folder of a create-react-app? Then probably yes.

For what is worth, Ben Broide has a nice write up on how to add a React app to WordPress. ReactPress is based on that post.

[bwjohns4]

I created the same build folder structure (just renamed web-build to build), and the React Native Web app is recognized in ReactPress, it just doesn't seem to be enqueuing the scripts or something. I just see an empty spot on the wordpress page where I would expect to see the React Native app.

I added this echo to class-reactpress-public.php:

// Load js files.
            foreach ($js_files as $index => $js_file) {
                wp_enqueue_script('rp-react-app-asset-' . $index, $plugin_app_dir_url . 'build/' . $js_file, array(), 1, true);
echo $plugin_app_dir_url . 'build/' . $js_file;
            }

And here is the output of my echo:

https://vzpzmc0k7hq.c.updraftclone.com/wp-content/reactpress/apps/keepconnectcloudservices/build/static/js/runtime~app.2e9f1821.js https://vzpzmc0k7hq.c.updraftclone.com/wp-content/reactpress/apps/keepconnectcloudservices/build/static/js/2.c85fa8ad.chunk.js https://vzpzmc0k7hq.c.updraftclone.com/wp-content/reactpress/apps/keepconnectcloudservices/build/static/js/app.ed4a7cb7.chunk.js

It seems that the script files are being found, but they don't seem to be enqueing correctly. If I do View Page Source I cannot find these scripts anywhere within the source.

Any insight?

[bwjohns4]

I found the enqueuing issue: I was using an optimization plugin that was removing the scripts for some reason. I turned that off and now see the scripts enqueued, but still not running the app.

[rockiger]

How does expo connect to a webpage?

Create-React-App attaches to a div with the id 'root' <div id="root" />.

Does Expo use a different method / id? If yes, you have to edit the page where the app should be shown accordingly.

[bwjohns4]

It looks like Expo still uses the <div id="root" />. I'm trying now to edit "homepage" in the package.json file to see if that helps the entrypoint connect. I don't really understand yet how react initializes and loads the scripts in the index file.

[bwjohns4]

CSS Issue?

It appears that my app loads within the Wordpress ReactPress template page, injecting into the <div id="root" />. I can also see console.log statements appear when debugging the javascript in Chrome Inspect, so I'm confident that my app javascript is also running. I can put debug breakpoints, etc. into it and verify that it is indeed running. I just cannot see it on the page.

I have noticed that React Native does not use separate CSS but it's instead generated within JS. In the build folder, there is no /static/css folder like that exists in the Create-React_App folder. That means that there are no separate CSS files that can be generated and enqueued by Wordpress. I just see an empty outline boxes for the div's containing my app components (when I hover over the div's in the Chrome Inspect tools). They don't show up at all, but I can see that the text and relevant data gets inserted into the div's, they're just not visible.

I'm looking into if it's possible to bundle the CSS separately in RNW to allow this to work.