feat: switch to new jsx runtime

Author: satya164

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

@@ -136,6 +136,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": "Bundler",

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

@@ -29,7 +29,12 @@ module.exports = function (api, options, cwd) {
           modules: cjs ? 'commonjs' : 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

@@ -188,7 +188,7 @@ yargs
                 allowUnusedLabels: false,
                 esModuleInterop: true,
                 forceConsistentCasingInFileNames: true,
-                jsx: 'react',
+                jsx: 'react-jsx',
                 lib: ['ESNext'],
                 module: 'ESNext',
                 moduleResolution: 'Bundler',

tsconfig.json

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