Documentation: add a more detailed guide for react native development

[gwwar]

This PR adds some clearer first time setup instructions for react native development. I'd also be open to moving this to a separate how-to-guide, if we'd like to keep the current doc brief.

I also have images and video assets I can link to (really necessary for some of the android studio screens) but I'd be interested in knowing where the best place to add this would be. I do see an assets folder, but we probably don't want to add image/videos to the repository to avoid bloating repository size.

Testing Instructions

• Verify that instructions are clear
• If you don't have native development going locally, give the instructions a try!

[hypest]

Thanks for the ping @gziolo and yeah, thanks for opening this ticket @gwwar !

Let me reel in @SiobhyB that has some recent interest in the topic. 👍

[gwwar]

So chatting with @mkaz it sounds like it's not ideal to add image/video assets to the Gutenberg repository (since it'll bloat the repository). One way we can work around this is to add these assets to the media library of one of the WordPress.org blogs.

Let me know if folks prefer keeping this as one setup doc, or if it'd be more ideal to make a separate how to article. And of course if there are simpler steps or if I mis-noted anything! For Android setup in particular it took me quite a while to figure out the right path arguments.

[SiobhyB]

Wow, this is all so detailed and awesome, thank you for the time putting it together @gwwar 🙇‍♀️

I like your thoughts on splitting this off into a separate doc. It feels a bit hard to parse at the length it is now and there's a chance not everyone getting set up is going to need these steps (for example, a new contributor already working with React Native will probably have gone through them). We'd also want to link to these detailed steps from the Gutenberg Mobile repository's README.

So, all in all, a separate doc with only these steps seems like the best move to me. If you agree with that reasoning, let me know if I can help with any part of separating this out and I'll be happy to review again when it's done :)

[gwwar]

Reserving this comment for assets. Folks are welcome to contribute better quality ones. If folks agree, we'll want to add these to the media library of one of the wp.org blogs, then link to them in the how to guide.

CleanShot.2021-10-14.at.15.38.04.mp4

android_mp4_hd_1080p.mp4

ios-e2e_mp4_hd_1080p.mp4

[gwwar]

@SiobhyB sounds good, I've moved instructions into a how-to guide in aea287c

Let me know if any of the instructions are incorrect or if we should clarify wording!

[gwwar]

Reminder to note that this changed to a slightly different path in Arctic Fox

export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/Contents/Home"

[SiobhyB]

Thanks again for all the work on this @gwwar, I've added a few small comments/suggestions throughout, but it generally all looks excellent 🙇‍♀️

[SiobhyB]

@gwwar, I'm curious whether the following paths also work for you? These are what I have in my ~/.zshrc file, which I got from the React Native docs::

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

As those are directly from the official docs, I'd lean towards using them, but let me know if they don't work as expected for you.

[gwwar]

They don't, but let me see if there's a way to consistently install in that directory.

Also is there a smarter way to install needed packages? I had to lookup needed items in the build.gradle file.

[gwwar]

So I do like the updated paths relative to $HOME 👍 I left a note inline on where the SDK home location can be modified. By default a new install on OSX will recommend $HOME/Library/Android/sdk

I also had to set JAVA_HOME. I pointed this at what comes with Android studio which is convenient. If there's a better alternative, I'm open to changes.

One other note is that I have a working environment on my Intel Mac but not my new M1. Currently getting stuck here with this trace:

[SiobhyB]

Also is there a smarter way to install needed packages? I had to lookup needed items in the build.gradle file.

I'm afraid the only way I'm aware of is manually looking up the needed packages (I did that through the docs in my case, but your approach is also valid). I had a quick search to see if there were perhaps any Android Studio plugins to automate the process, but wasn't able to find anything.

One other note is that I have a working environment on my Intel Mac but not my new M1. Currently getting stuck here with this trace

@twstokes also ran into some problems running the demo app on an M1 and found he needed to install Platform S packages. These were the specific steps here shared:

• In Android Studio, go to Preferences -> Appearance & Behavior -> System Settings -> Android SDK.
• Check “Show Package Details” at the bottom right.
• If not already selected, under “Android S Preview” check:
  • Android SDK Platform S
  • Google APIs ARM 64
  • Google Play ARM 64
• Click OK.

And a screenshot of his settings:

Another issue that Tanner came across is a bug that prevents the Android emulator from loading. This was in May, so hopefully, there will have been a fix by now. If not, Tanner followed the workaround outlined in this Medium article.

I don't have an M1 but, if installing the Platform S packages doesn't get things working for you, we could see if Tanner or others on the project have further ideas here. Let me know how it goes! (and thank you again for all the work documenting this!)

[SiobhyB]

Noting for posterity that, following #36007 and the comment here #36007 (review), it doesn't seem like separate instructions for M1 are now necessary. 🎉

[SiobhyB]

This all looks good to me @gwwar, pending the updated references to the images you've suggested in your previous comment :)

[gwwar]

Thanks @SiobhyB! I've also added image assets in 04b03b2

cc @mkaz did you have any recommendations on formatting/readme location or does this look ok to land?

[mkaz]

Looks great! Thanks so much for the updates, it'll make it easier to get more people started and involved 👍

Can we rename the file to: osx-setup-guide.md ?
Since it still applies even if it's not your first time, makes for a slightly cleaner URL.

Also, you will need to add an entry to docs/toc.json (see existing for syntax) and run npm run docs:build and commit the generated manifest.json file.

I suppose it doesn't quite matter where in the How to Guides section of the toc.json list. I'm trying to get it in alphabetical order (#35904). I'll rebase and fix that ticket if yours goes in first.

[gwwar]

Ah I knew I must have been missing something! Thanks @mkaz! updated in fbb0285

[mkaz]

I just realized, since it's a new directory you may also want a README.md, I'm not really sure what it will do without. I'm ok with trying it as it is and we can add a README if needed.

[gwwar]

Sure we can try as is, and see if we need to add an additional README.md as a follow up.

[gwwar]

Going to rebase to see if unit test issues resolve themselves

[gwwar]

Thanks for the reviews @SiobhyB @mkaz !