feat: switch to new jsx runtime

Author: satya164

.github/workflows/build-templates.yml

@@ -200,8 +200,6 @@ jobs:
         working-directory: ${{ env.work_dir }}
         run: |
           yarn typecheck
-        # FIXME: Remove this once we fix the typecheck errors
-        continue-on-error: true
 
       - name: Test library
         working-directory: ${{ env.work_dir }}

packages/create-react-native-library/templates/common-example/example/src/App.tsx

@@ -1,9 +1,10 @@
-import * as React from 'react';
-
 <% if (project.view) { -%>
 import { StyleSheet, View } from 'react-native';
 import { <%- project.name -%>View } from '<%- project.slug -%>';
 <% } else { -%>
+<% if (project.arch !== 'new') { -%>
+import { useState, useEffect } from 'react';
+<% } -%>
 import { StyleSheet, View, Text } from 'react-native';
 import { multiply } from '<%- project.slug -%>';
 <% } -%>
@@ -28,9 +29,9 @@ export default function App() {
 }
 <% } else { -%>
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
+  const [result, setResult] = useState<number | undefined>();
 
-  React.useEffect(() => {
+  useEffect(() => {
     multiply(3, 7).then(setResult);
   }, []);
 

packages/create-react-native-library/templates/common/$package.json

@@ -129,6 +129,7 @@
       "prettier"
     ],
     "rules": {
+      "react/react-in-jsx-scope": "off",
       "prettier/prettier": [
         "error",
         {

packages/create-react-native-library/templates/common/tsconfig.json

@@ -8,7 +8,7 @@
     "allowUnusedLabels": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": ["esnext"],
     "module": "esnext",
     "moduleResolution": "node",

packages/react-native-builder-bob/babel-preset.js

@@ -27,7 +27,12 @@ module.exports = function (api, options, cwd) {
           modules: options.modules || false,
         },
       ],
-      require.resolve('@babel/preset-react'),
+      [
+        require.resolve('@babel/preset-react'),
+        {
+          runtime: 'automatic',
+        },
+      ],
       require.resolve('@babel/preset-typescript'),
       require.resolve('@babel/preset-flow'),
     ],

packages/react-native-builder-bob/src/index.ts

@@ -179,7 +179,7 @@ yargs
                 allowUnusedLabels: false,
                 esModuleInterop: true,
                 forceConsistentCasingInFileNames: true,
-                jsx: 'react',
+                jsx: 'react-jsx',
                 lib: ['esnext'],
                 module: 'esnext',
                 moduleResolution: 'node',

tsconfig.json

@@ -12,7 +12,7 @@
     "allowUnusedLabels": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": ["esnext", "dom"],
     "module": "esnext",
     "moduleResolution": "node",