From fe76d571785f1057eb853b31db9989203fd688b0 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Tue, 2 Jul 2024 18:00:38 +0200
Subject: [PATCH] feat: switch to new jsx runtime

---
 .../templates/common-example/example/src/App.tsx         | 9 +++++----
 .../templates/common/$package.json                       | 1 +
 .../templates/common/tsconfig.json                       | 2 +-
 packages/react-native-builder-bob/babel-preset.js        | 7 ++++++-
 packages/react-native-builder-bob/src/index.ts           | 2 +-
 tsconfig.json                                            | 2 +-
 6 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/create-react-native-library/templates/common-example/example/src/App.tsx b/packages/create-react-native-library/templates/common-example/example/src/App.tsx
index 38db6fe50..acc5c7d17 100644
--- a/packages/create-react-native-library/templates/common-example/example/src/App.tsx
+++ b/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);
   }, []);
 
diff --git a/packages/create-react-native-library/templates/common/$package.json b/packages/create-react-native-library/templates/common/$package.json
index bc2322165..91a22262e 100644
--- a/packages/create-react-native-library/templates/common/$package.json
+++ b/packages/create-react-native-library/templates/common/$package.json
@@ -136,6 +136,7 @@
       "prettier"
     ],
     "rules": {
+      "react/react-in-jsx-scope": "off",
       "prettier/prettier": [
         "error",
         {
diff --git a/packages/create-react-native-library/templates/common/tsconfig.json b/packages/create-react-native-library/templates/common/tsconfig.json
index d76cc5f8c..7472abcad 100644
--- a/packages/create-react-native-library/templates/common/tsconfig.json
+++ b/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",
diff --git a/packages/react-native-builder-bob/babel-preset.js b/packages/react-native-builder-bob/babel-preset.js
index 7f5d51614..2b725e98d 100644
--- a/packages/react-native-builder-bob/babel-preset.js
+++ b/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'),
     ],
diff --git a/packages/react-native-builder-bob/src/index.ts b/packages/react-native-builder-bob/src/index.ts
index 55e052a1a..d16f2b189 100644
--- a/packages/react-native-builder-bob/src/index.ts
+++ b/packages/react-native-builder-bob/src/index.ts
@@ -181,7 +181,7 @@ yargs
                 allowUnusedLabels: false,
                 esModuleInterop: true,
                 forceConsistentCasingInFileNames: true,
-                jsx: 'react',
+                jsx: 'react-jsx',
                 lib: ['ESNext'],
                 module: 'ESNext',
                 moduleResolution: 'Bundler',
diff --git a/tsconfig.json b/tsconfig.json
index 520914d78..3f73ea820 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,7 @@
     "allowUnusedLabels": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": ["esnext", "dom"],
     "module": "esnext",
     "moduleResolution": "node",