☂️ Improve React Native onboarding experience

[arushikesarwani94]

Description

Hi everyone!

This is an umbrella issue to collect a set of tasks aimed to improve the React Native onboarding experience. Onboarding experience as part of the DX pillar aims to improve user workflows like :

• creating or starting their first React Native app;
• trying out built-in React Native APIs for the first time;
• installing their first third-party package in a React Native project;
• collaborating on a React Native project with others for the first time;
• setting up a new machine to work on an existing React Native app

We believe that everyone would benefit by improving the core developer experience, hence this umbrella issue to help us cleanup and restructure some of our codebase.

How to Test

It’s crucial that you test the changes you submit. The proper way of doing this is:

1. Build cli codebase using : node ./scripts/build.js && yarn build:debugger
2. Link the cli-doctor using : yarn link
3. In the example React Native app(Awesome Project), run yarn link "@react-native-community/cli-doctor"
4. Run the CLI Doctor using : npx @react-native-community/cli doctor

The Tasks

The following is a list of tasks we think might aid the bootstrapping experience of React Native. The list is a living one: the more we improve with the situation, the more patterns we can discover. Whenever we found some pattern that we can add, we will attach this to the list.

If you want to tackle some specific task which is not listed, feel free to post a comment with a brief description of the task and I'll make sure to add it to the list of tasks so it is tracked.

Please comment below if you're willing to take the stance on any of those task and wait for a confirmation before start working on it. Please note that if you claim a task, but don't submit a PR within 2 week, we're going to free up that task for someone else.

• [ ] feat : Custom Adb ports #1864

cli-doctor :

• [x] feat : detect wrong app dependencies #1848 Assigned to @tarunrajput Commit https://github.com/react-native-community/cli/pull/1983/commits/ce0ae4ca7f9c6e87b832e4c297801f8d5db92e6d
• [x] ~Java version check in versionRanges should be [11 - 18] (i.e. 19 is not supported). Assigned to @tarunrajput~ Commit https://github.com/react-native-community/cli/pull/1940/commits/06ffb36e989110a353f77d1934662d38a14306d0
• [x] ~Node version check in versionRanges should be >= 18. Assigned to @Shubham1429~ Commit https://github.com/react-native-community/cli/commit/be7e6e2e747b62c9cb72bbc9bf9ea53d34630a60
• [x] ~feat : doctor should detect & report if packager is running correctly : https://github.com/react-native-community/cli/blob/main/packages/cli-tools/src/isPackagerRunning.ts Assigned to @tarunrajput~ Commit https://github.com/react-native-community/cli/commit/a2e90fd10c5397e273ca831b45d69650ee37e936
• [x] ~fix : Gracefully handle errors in doctor in case of TODOs https://github.com/react-native-community/cli/blob/16ec7a39514b8ccfea682c843dfbd1f7cad4bf7e/packages/cli-doctor/src/tools/runAutomaticFix.ts#L96-L98 https://github.com/react-native-community/cli/blob/16ec7a39514b8ccfea682c843dfbd1f7cad4bf7e/packages/cli-doctor/src/commands/doctor.ts#L257-L260 Assigned to @jeferson-sb~ Commit https://github.com/react-native-community/cli/commit/4650a8d41c5f9851e0f6bf5939a1bd8f4326c990
• [ ] Have CLI doctor check permissions on gradlew script #2127

Open ended discussions :

• [ ] Reduce “Installing Bundler” step noise

During the “Installing Bundler” step, seemingly unnecessary warnings are printed, e.g. error Ignoring unf_ext-0.0.7.6 because its extensions are not built. Try: gem pristine unf_ext —version 0.0.7.6. This distracts from the actionable parts of init’s output. Reported in #1832

• [ ] Investigate the build output reported by Gradle to "beautify" the error message for the user in CLI

[tarunrajput]

@arushikesarwani94 , I'd like to take this one

Java version check in versionRanges should be [11 - 18] (i.e. 19 is not supported).

[tarunrajput]

Hi @arushikesarwani94, I'd like to work on this next

feat : doctor should detect & report if packager is running correctly

[szymonrybczak]

Inside codebase in cli-doctor we've got few TODO: items where we don't properly handle errors:
https://github.com/react-native-community/cli/blob/16ec7a39514b8ccfea682c843dfbd1f7cad4bf7e/packages/cli-doctor/src/tools/runAutomaticFix.ts#L96-L98 https://github.com/react-native-community/cli/blob/16ec7a39514b8ccfea682c843dfbd1f7cad4bf7e/packages/cli-doctor/src/commands/doctor.ts#L257-L260 I think this also will be nice DevX improvement to properly handle these :)

[arushikesarwani94]

I think this also will be nice DevX improvement to properly handle these :)

Updated the task list.

[Shubham1429]

Hi @arushikesarwani94, I'd would like to work on this

Node version check in versionRanges should be >= 16 and < 17 since Node 17 is not supported.

[arushikesarwani94]

Hi @arushikesarwani94, I'd would like to work on this

Node version check in versionRanges should be >= 16 and < 17 since Node 17 is not supported.

Thanks for your interest in this. As a pre-requisite to this one, it might be worth confirming the behavior of RN with Node 17 onwards. AFAIK Node 17 not being LTS isn't supported, however Node 18 is supported.

https://github.com/facebook/react-native/pull/35443

[jeferson-sb]

Hi @arushikesarwani94 Can I take this one?

fix : Gracefully handle errors in doctor in case of TODOs

[tarunrajput]

feat : detect wrong app dependencies

Hi @arushikesarwani94, I'd like to pick this one

[arushikesarwani94]

Hi @arushikesarwani94, I'd would like to work on this

Node version check in versionRanges should be >= 18

@Shubham1429 Would you still be interested in picking this up ?

[Shubham1429]

Hi @arushikesarwani94, sorry for the delay. I've been busy recently. I'll create a PR by Monday.

[github-actions[bot]]

There hasn't been any activity on this issue in the past 3 months, so it has been marked as stale and it will be closed automatically if no further activity occurs in the next 7 days.

[szymonrybczak]

If anyone wants to grab some issue to fix, here's pretty easy one https://github.com/react-native-community/cli/issues/2127 🙌