Documentation: add a more detailed guide for react native development #35529
Conversation
|
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. |
|
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 :) |
|
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
|
| in our terminal, or `.bash_profile` if the terminal is still using bash. | ||
|
|
||
| ```sh | ||
| export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jre/jdk/Contents/Home |
There was a problem hiding this comment.
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"
|
|
||
| ```sh | ||
| export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jre/jdk/Contents/Home | ||
| export ANDROID_HOME=/Users/{your-username}/Library/Android/sdk |
There was a problem hiding this comment.
@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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
So I do like the updated paths relative to $HOME $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:
There was a problem hiding this comment.
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!)
There was a problem hiding this comment.
Noting for posterity that, following #36007 and the comment here #36007 (review), it doesn't seem like separate instructions for M1 are now necessary.
|
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: Also, you will need to add an entry to 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. |
|
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. |
|
Sure we can try as is, and see if we need to add an additional README.md as a follow up. |
|
Going to rebase to see if unit test issues resolve themselves |
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
The text was updated successfully, but these errors were encountered: