move to @rneui

Author: arpitBhalla

config-overrides.js

@@ -1,12 +1,40 @@
-const path = require('path');
-const { override, addBabelPlugins, babelInclude } = require('customize-cra');
+const path = require("path");
+const {
+  override,
+  addBabelPlugins,
+  babelInclude,
+  addWebpackAlias,
+  addBabelPresets,
+} = require("customize-cra");
 
 module.exports = override(
-  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
-  babelInclude([
-    path.resolve(__dirname, 'node_modules/react-native-elements'),
-    path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
-    path.resolve(__dirname, 'node_modules/react-native-ratings'),
-    path.resolve(__dirname, 'src'),
-  ])
+  ...addBabelPlugins([
+    "@babel/plugin-proposal-class-properties",
+    {
+      loose: true,
+    },
+  ]),
+  ...addBabelPresets([
+    "@babel/preset-env",
+    {
+      loose: true,
+      targets: {
+        browsers: ["> 1%", "last 2 versions"],
+      },
+      modules: "commonjs",
+    },
+  ]),
+  babelInclude(
+    [
+      path.resolve(__dirname, "node_modules/@rneui/base"),
+      path.resolve(__dirname, "node_modules/@rneui/themed"),
+      path.resolve(__dirname, "node_modules/react-native-vector-icons"),
+      path.resolve(__dirname, "node_modules/react-native-ratings"),
+      path.resolve(__dirname, "src"),
+    ],
+    addWebpackAlias({
+      "react-native$": "react-native-web",
+      "react-native-linear-gradient": "react-native-web-linear-gradient",
+    })
+  )
 );

package.json

@@ -3,13 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@react-native-community/toolbar-android": "^0.1.0-rc.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-native-elements": "^2.0.4",
-    "react-native-vector-icons": "^6.7.0",
-    "react-native-web": "^0.12.0",
-    "react-scripts": "3.4.1"
+    "@rneui/base": "^4.0.0-rc.4",
+    "@rneui/themed": "^4.0.0-rc.4",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "^0.69.0",
+    "react-native-safe-area-context": "^4.3.1",
+    "react-native-vector-icons": "^9.2.0",
+    "react-native-web": "^0.18.1",
+    "typescript": "^4.7.4",
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -35,6 +40,6 @@
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "customize-cra": "^1.0.0",
-    "react-app-rewired": "^2.1.6"
+    "react-app-rewired": "^2.2.1"
   }
 }

src/App.js

@@ -0,0 +1,33 @@
+import React from "react";
+import "./App.css";
+import { Button, createTheme, ThemeProvider } from "@rneui/themed";
+
+const theme = createTheme({});
+
+function App() {
+  return (
+    <>
+      <style type="text/css">{`
+        @font-face {
+          font-family: 'MaterialIcons';
+          src: url(${require("react-native-vector-icons/Fonts/MaterialIcons.ttf")}) format('truetype');
+        }
+
+        @font-face {
+          font-family: 'FontAwesome';
+          src: url(${require("react-native-vector-icons/Fonts/FontAwesome.ttf")}) format('truetype');
+        }
+      `}</style>
+
+      <ThemeProvider theme={theme}>
+        <div className="App">
+          <header className="App-header">
+            <Button title="I'm a button from React Native Elements" />
+          </header>
+        </div>
+      </ThemeProvider>
+    </>
+  );
+}
+
+export default App;

src/App.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+
+root.render(<App />);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA