chore: use react-native init for generating example app

[atlj]

Summary

The current state of the library requires manual labor to upgrade example apps. Instead of manually upgrading the example app we can rely on React Native CLI to generate the app for us. We can then simply make necessary changes to the created template.

How does it work?

We first run npx react-native init <projectName>Example --template react-native-template-typescript --directory example --skip-install to create the app. We then make the following changes:

1. Delete .gitignore, .eslintrc.js, .prettierrc.js, index.js and App.js
2. Overwrite metro.config.js and babel.config.js
3. Write react-native.config.js, src/App.tsx and index.ts
4. Change package.json:
   • Remove test and lint scripts then add pods and postInstall scripts
   • Remove some dependencies

     @react-native-community/eslint-config @tsconfig/react-native @types/jest @types/react-native @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-jest eslint jest typescript
   • Add some dependencies

     'babel-plugin-module-resolver': '^4.1.0' 'metro-react-native-babel-preset': '^0.72.1' 'patch-package': '^6.4.7' 'postinstall-postinstall': '^2.1.0'
   • remove jest config
5. If TurboModules are enabled; set newArchEnabled=true on android/gradle.properties and add ENV['RCT_NEW_ARCH_ENABLED'] = '1' to ios/Podfile
6. Edit __tests__/App-test.tsx to import App from ../src/App
7. Set root level package.json's react and react-native versions from example/package.json

Notes and issues

• Currently we delete __tests__ folder inside example directory. The reason is that this folder includes react-test-renderer tests. These tests run fine when they are called from example/package.json. But when you try to call them from root level package.json, it throws the following:

example/__tests__/App-test.tsx
  ● Test suite failed to run

    Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules

      at invariant (example/node_modules/invariant/invariant.js:40:15)
      at Object.invariant (example/node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:180:3)
      at Object.require (example/node_modules/react-native/Libraries/TurboModule/TurboModuleRegistry.js:11:23)

I have tried many things but couldn't get it working properly. This is not a regression as before this PR, we didn't have these tests at all.

Test plan

• Turbo module with backward compat (experimental)
• Turbo module (experimental)
• Native module
• Native view
• JavaScript library
• Expo app
• Ensure lint, test and typescript scripts work properly on generated project

Next steps

Follow this approach for Expo modules

[MateWW]

Maybe we can call it generateExampleApp.
WDYT?

[atlj]

It was like this then got changed

[satya164]

exampleAppGenerators is different 😅

I think generateReactNativeExample or something like that is good, we'd also need generateExpoExample

[troZee]

I have tested your changes using Native view template and everything works fine. Great job 🚀 ❤️

[satya164]

Currently, after selecting my options, it feels like it gets stuck while generating the project with RN CLI.

We should add a progress indicator using https://www.npmjs.com/package/ora while the project is being generated. Something like [] Generating project... (replace [] with a spinner)

If I don't have an internet connection, the CLI gets stuck and doesn't seem do anything. It should print an error instead.

[atlj]

Currently, after selecting my options, it feels like it gets stuck while generating the project with RN CLI.

We should add a progress indicator using https://www.npmjs.com/package/ora while the project is being generated. Something like [] Generating project... (replace [] with a spinner)

If I don't have an internet connection, the CLI gets stuck and doesn't seem do anything. It should print an error instead.

CLI getting stuck is caused by react-native cli, should we detect if user is not connected and throw an error?

[atlj]

and one note:

• Currently we delete __tests__ folder inside example directory. The reason is that this folder includes react-test-renderer tests. These tests run fine when they are called from example/package.json. But when you try to call them from root level package.json, it throws the following:

example/__tests__/App-test.tsx
  ● Test suite failed to run

    Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules

      at invariant (example/node_modules/invariant/invariant.js:40:15)
      at Object.invariant (example/node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:180:3)
      at Object.require (example/node_modules/react-native/Libraries/TurboModule/TurboModuleRegistry.js:11:23)

I have tried many things but couldn't get it working properly. This is not a regression as before this PR, we didn't have these tests at all.

[satya164]

CLI getting stuck is caused by react-native cli, should we detect if user is not connected and throw an error?

Let's think about it in a follow up PR

[satya164]

/rebase

[thymikee]

What's up with CLI getting stuck? Maybe @adamTrz could help out here

[atlj]

Currently, if you become offline, CLI keeps trying to work. We might throw an error stating that the user is currently offline.

[adamTrz]

What's up with CLI getting stuck? Maybe @adamTrz could help out here

Don't think I can help with no internet connection 😉

Tried to repro this with local CLI and I did got an error

info There appears to be trouble with your network connection. Retrying...

[thymikee]

info There appears to be trouble with your network connection. Retrying...

This is occasionally coming from Yarn. Nothing to be worried about imho

[satya164]

info There appears to be trouble with your network connection. Retrying...

This is occasionally coming from Yarn. Nothing to be worried about imho

In this case we skip installing dependencies so I think Yarn isn't involved here

[satya164]

thanks for the hard work!