did clean install and web compatibility

.eslintrc.js

@@ -1,10 +1,4 @@
 module.exports = {
   root: true,
-  ignorePatterns: [
+  extends: '@react-native-community',
-    'node_modules/',
+};
-    'coverage/',
-    'android/',
-    'ios/',
-    'src/mocks/Setup',
-  ],
-};

.eslintrc.json

@@ -1,30 +0,0 @@
-{
-    "parser": "babel-eslint",
-    "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-    "env": {
-      "browser": true,
-      "react-native/react-native": true
-    },
-    "plugins": ["react", "react-native"],
-    "extends": ["eslint:recommended", "plugin:react/recommended"],
-    "rules": {
-      "react-native/no-unused-styles": 2,
-      "react-native/split-platform-components": 2,
-      "react-native/no-inline-styles": 2,
-      "react-native/no-color-literals": 2,
-      "react-native/no-raw-text": 2,
-      "react-native/sort-styles": [
-        "error",
-        "asc",
-         {
-           "ignoreClassNames": false,
-           "ignoreStyleProperties": false
-         }
-       ]
-    }
-  }
-  

App.js

@@ -0,0 +1,117 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import type {Node} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  LearnMoreLinks,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+ * LTI update could not be added via codemod */
+const Section = ({children, title}): Node => {
+  const isDarkMode = useColorScheme() === 'dark';
+  return (
+    <View style={styles.sectionContainer}>
+      <Text
+        style={[
+          styles.sectionTitle,
+          {
+            color: isDarkMode ? Colors.white : Colors.black,
+          },
+        ]}>
+        {title}
+      </Text>
+      <Text
+        style={[
+          styles.sectionDescription,
+          {
+            color: isDarkMode ? Colors.light : Colors.dark,
+          },
+        ]}>
+        {children}
+      </Text>
+    </View>
+  );
+};
+
+const App: () => Node = () => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode ? Colors.black : Colors.white,
+          }}>
+          <Section title="Step One">
+            Edit <Text style={styles.highlight}>App.js</Text> to change this
+            screen and then come back to see your edits.
+          </Section>
+          <Section title="See Your Changes">
+            <ReloadInstructions />
+          </Section>
+          <Section title="Debug">
+            <DebugInstructions />
+          </Section>
+          <Section title="Learn More">
+            Read the docs to discover what to do next:
+          </Section>
+          <LearnMoreLinks />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  sectionContainer: {
+    marginTop: 32,
+    paddingHorizontal: 24,
+  },
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  sectionDescription: {
+    marginTop: 8,
+    fontSize: 18,
+    fontWeight: '400',
+  },
+  highlight: {
+    fontWeight: '700',
+  },
+});
+
+export default App;

app.json

@@ -0,0 +1,4 @@
+{
+  "name": "AwesomeProject",
+  "displayName": "AwesomeProject"
+}

babel.config.js

@@ -1,3 +1,13 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        alias: {
+          '@caj': './src/caj',
+        },
+      },
+    ],
+  ],
 };

dist/bundle.web.js.LICENSE.txt

@@ -0,0 +1,39 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>React Native Web</title>
+    <meta charset="utf-8" />
+    <meta content="initial-scale=1,width=device-width" name="viewport" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/javascript" src="/bundle.js"></script>
+  </body>
+</html>

index.web.tsx

@@ -0,0 +1,15 @@
+import {createRoot} from 'react-dom/client';
+import {AppRegistry} from 'react-native';
+
+import App from './src/App';
+
+//AppRegistry.registerComponent("App", () => App)
+
+/*
+AppRegistry.runApplication("App", {
+  initialProps: {},
+  rootTag: document.getElementById("root"),
+})*/
+
+const root = createRoot(document.getElementById('root') as HTMLElement);
+root.render(<App />);

package.json

@@ -6,63 +6,81 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",
-    "web": "react-scripts start",
+    "web": "cd web && ../node_modules/.bin/webpack-dev-server",
+    "web-build": "cd web && ../node_modules/.bin/webpack",
     "test": "jest",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint ."
   },
   "dependencies": {
-    "native-base": "^3.4.22",
+    "babel-preset-esnext": "^1.1.3",
+    "babel-preset-react": "^6.24.1",
     "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "18.1.0",
-    "react-native": "^0.70.6",
+    "react-native": "0.70.6",
-    "react-native-safe-area-context": "^4.2.4",
+    "react-native-web": "^0.18.10"
-    "react-native-svg": "^12.1.1",
-    "react-native-web": "^0.18.10",
-    "react-scripts": "^5.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@tsconfig/react-native": "^2.0.2",
+    "@types/node": "^18.11.10",
-    "@types/jest": "^26.0.23",
+    "@types/webpack": "^5.28.0",
-    "@types/react": "^18.0.21",
-    "@types/react-native": "^0.70.6",
-    "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
     "babel-jest": "^26.6.3",
+    "babel-loader": "^9.1.0",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-react-native-web": "^0.18.10",
-    "eslint": "^8.28.0",
+    "babel-preset-react-native": "^4.0.1",
-    "eslint-config-react-app": "^7.0.1",
+    "eslint": "^7.32.0",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-react-native": "^4.0.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "0.72.3",
     "react-test-renderer": "18.1.0",
-    "typescript": "^4.8.3"
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1"
   },
   "jest": {
     "preset": "react-native",
+    "transform": {
+      "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
+      "\\.(ts|tsx)$": "ts-jest"
+    },
+    "globals": {
+      "ts-jest": {
+        "tsConfig": "tsconfig.jest.json",
+        "diagnostics": {
+          "pathRegex": "\\.(spec|test)\\.ts$",
+          "warnOnly": true,
+          "ignoreCodes": [
+            2571,
+            6031,
+            18003,
+            "TS2322"
+          ]
+        }
+      }
+    },
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
     "moduleFileExtensions": [
       "ts",
       "tsx",
       "js",
       "jsx",
-      "json",
       "node"
+    ],
+    "modulePaths": [
+      "<rootDir>"
+    ],
+    "setupFiles": [
+      "./tests/setup.js"
     ]
   },
-  "browserslist": {
+  "browser": [
-    "production": [
+    ">0.2%",
-      ">0.2%",
+    "not dead",
-      "not dead",
+    "not ie <= 11",
-      "not op_mini all"
+    "not op_mini all"
-    ],
+  ]
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
 }

src/App.tsx

@@ -1,30 +1,54 @@
-import React from 'react';
+import React, {useState} from 'react';
-import {NativeBaseProvider, Box, Button, Text} from 'native-base';
+import {Image, Text, StyleSheet} from 'react-native';
-import {extendTheme} from 'native-base';
+import {testt} from '@caj/configs/test';
+
+import imgSrc from '@caj/img/maimg.png';
+
+interface User {
+  name: string;
+  id: number;
+}
+
+const user: User = {
+  name: 'Hayes',
+  id: 0,
+};
 
 const App = () => {
-  const theme = extendTheme({
+  const [titleText, setTitleText] = useState("Bird's Nest");
-    components: {
+  const bodyText =
-      Heading: {
+    'This is not really a bird nest. ' + user.name + ' - ' + testt.data;
-        baseStyle: (props: any) => {
+
-          return {
+  const onPressTitle = () => {
-            _light: {color: 'red.300'},
+    setTitleText("Bird's Nest [pressed]");
-            _dark: {color: 'blue.300'},
+  };
-          };
-        },
-      },
-    },
-  });
 
   return (
-    <NativeBaseProvider theme={theme}>
+    <Text style={styles.baseText}>
-      <Box>
+      <Text style={styles.titleText} onPress={onPressTitle}>
-        <Text>ma boy :-)</Text>
+        {titleText}
-      </Box>
+        {'\n'}
-      <Box alignItems="center">
+        {'\n'}
-        <Button onPress={() => console.log('hello world')}>Click Me</Button>
+      </Text>
-      </Box>
+      <Text numberOfLines={5}>{bodyText}</Text>
-    </NativeBaseProvider>
+      <Image source={imgSrc} style={styles.image} />
+    </Text>
   );
 };
+
+const styles = StyleSheet.create({
+  baseText: {
+    fontFamily: 'Cochin',
+  },
+  titleText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  image: {
+    width: 500,
+    height: 500,
+    borderWidth: 1,
+  },
+});
+
 export default App;

src/caj/configs/colors.ts

@@ -0,0 +1,27 @@
+import { extendTheme } from 'native-base';
+
+export const theme = extendTheme({
+    colors: {
+      // Add new color
+      primary: {
+        50: '#E3F2F9',
+        100: '#C5E4F3',
+        200: '#A2D4EC',
+        300: '#7AC1E4',
+        400: '#47A9DA',
+        500: '#0088CC',
+        600: '#007AB8',
+        700: '#006BA1',
+        800: '#005885',
+        900: '#003F5E',
+      },
+      // Redefining only one shade, rest of the color will remain same.
+      amber: {
+        400: '#d97706',
+      },
+    },
+    config: {
+      // Changing initialColorMode to 'dark'
+      initialColorMode: 'dark',
+    },
+  });

src/caj/configs/test.android.ts

@@ -0,0 +1,3 @@
+
+
+export const testt = { data: "hellow :33 liebe diese Android"};

src/caj/configs/test.ts

@@ -0,0 +1,3 @@
+
+
+export const testt = { data: "hellow :33 liebe diese"};

src/caj/configs/test.web.ts

@@ -0,0 +1,3 @@
+
+
+export const testt = { data: "hellow :33 liebe diese WEB"};

src/index.web.ts

@@ -1,10 +0,0 @@
-import {AppRegistry} from 'react-native'
-
-import App from './App'
-
-AppRegistry.registerComponent("App", () => App)
-
-AppRegistry.runApplication("App", {
-  initialProps: {},
-  rootTag: document.getElementById('root'),
-})

tsconfig.json

@@ -1,65 +1,8 @@
-
+{
-      {
+  "compilerOptions": {
-        "compilerOptions": {
+    "baseUrl": ".",
-          /* Basic Options */
+    "paths" : {
-          "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+      "@caj/*": ["src/caj/*"]
-          "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    }
-          "lib": [
+  }
-            "dom",
+}
-            "dom.iterable",
-            "esnext"],                           /* Specify library files to be included in the compilation. */
-          "allowJs": true,                          /* Allow javascript files to be compiled. */
-          // "checkJs": true,                       /* Report errors in .js files. */
-          "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-          // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-          // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-          // "outFile": "./",                       /* Concatenate and emit output to single file. */
-          // "outDir": "./",                        /* Redirect output structure to the directory. */
-          // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-          // "removeComments": true,                /* Do not emit comments to output. */
-          "noEmit": true,                           /* Do not emit outputs. */
-          // "incremental": true,                   /* Enable incremental compilation */
-          // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-          // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-          "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-      
-          /* Strict Type-Checking Options */
-          "strict": true,                           /* Enable all strict type-checking options. */
-          // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-          // "strictNullChecks": true,              /* Enable strict null checks. */
-          // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-          // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-          // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-          // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-      
-          /* Additional Checks */
-          // "noUnusedLocals": true,                /* Report errors on unused locals. */
-          // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-          // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-          // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-      
-          /* Module Resolution Options */
-          "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-          "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
-          // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-          // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-          // "typeRoots": [],                       /* List of folders to include type definitions from. */
-          // "types": [],                           /* Type declaration files to be included in compilation. */
-          "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-          "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-          // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-      
-          /* Source Map Options */
-          // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-          // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
-          // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-          // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-      
-          /* Experimental Options */
-          // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-          // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-        },
-        "exclude": [
-          "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
-        ]
-      }

tslint.json

@@ -1,34 +0,0 @@
-{
-    "extends": ["tslint-react-recommended"],
-    "rules": {
-      "ordered-imports": [true],
-      "quotemark": [true, "single", "jsx-single", "avoid-escape"],
-      "semicolon": [true, "never"],
-      "member-access": [false],
-      "member-ordering": [false],
-      "trailing-comma": [
-        true,
-        {
-          "singleline": "never",
-          "multiline": "always"
-        }
-      ],
-      "no-empty": false,
-      "no-submodule-imports": false,
-      "no-implicit-dependencies": false,
-      "no-constant-condition": false,
-      "triple-equals": [true, "allow-undefined-check"],
-      "ter-indent": [
-        true,
-        2,
-        {
-          "SwitchCase": 1
-        }
-      ],
-      "no-duplicate-imports": false,
-      "jsx-alignment": true,
-      "jsx-no-bind": true,
-      "jsx-no-lambda": true,
-      "max-classes-per-file": [false]
-    }
-  }

web/public/index.html

@@ -2,19 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Web site created using create-react-app" />
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -28,6 +26,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script src="bundle.web.js"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -37,4 +36,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-</html>
+</html>

web/webpack.config.js

@@ -0,0 +1,89 @@
+// web/webpack.config.js
+
+const path = require('path');
+const webpack = require('webpack');
+
+const appDirectory = path.resolve(__dirname, '../');
+
+// This is needed for webpack to compile JavaScript.
+// Many OSS React Native packages are not compiled to ES5 before being
+// published. If you depend on uncompiled packages they may cause webpack build
+// errors. To fix this webpack can be configured to compile to the necessary
+// `node_module`.
+const babelLoaderConfiguration = {
+  test: /\.(ts|tsx|js)?$/,
+  // Add every directory that needs to be compiled by Babel during the build.
+  include: [
+    path.resolve(appDirectory, 'index.web.tsx'),
+    path.resolve(appDirectory, 'src'),
+    path.resolve(appDirectory, 'node_modules'),
+    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
+    path.resolve(appDirectory, 'node_modules/react-native-sdk'),
+  ],
+  use: {
+    loader: 'babel-loader',
+    options: {
+      cacheDirectory: true,
+      // The 'react-native' preset is recommended to match React Native's packager
+      // presets: ['module:metro-react-native-babel-preset'],
+      // presets: ['react-native'],
+      presets: [require.resolve('babel-preset-react-native')],
+      // Re-write paths to import only the modules needed by the app
+      plugins: ['react-native-web',],
+      presets: ['react-native'],
+      presets: ['module:metro-react-native-babel-preset'],
+      // plugins: [
+      //   // needed to support async/await
+      //   '@babel/plugin-transform-runtime'
+      // ]
+    },
+  }
+};
+
+// This is needed for webpack to import static images in JavaScript files.
+const imageLoaderConfiguration = {
+  test: /\.(gif|jpe?g|png|svg)$/,
+  use: {
+    loader: 'url-loader',
+    options: {
+      name: '[name].[ext]'
+    }
+  }
+};
+
+module.exports = {
+  mode: 'development',
+  entry: [
+    // load any web API polyfills
+    // path.resolve(appDirectory, 'polyfills-web.js'),
+    // your web-specific entry file
+    path.resolve(appDirectory, 'index.web.tsx')
+  ],
+
+  // configures where the build ends up
+  output: {
+    filename: 'bundle.web.js',
+    path: path.resolve(appDirectory, 'dist')
+  },
+
+  // ...the rest of your config
+
+  module: {
+    rules: [
+      babelLoaderConfiguration,
+      imageLoaderConfiguration
+    ]
+  },
+
+  resolve: {
+    // This will only alias the exact import "react-native"
+    alias: {
+      'react-native$': 'react-native-web',
+      '@caj': path.resolve(appDirectory, 'src/caj')
+    },
+    // If you're working on a multi-platform React Native app, web-specific
+    // module implementations should be written in files using the extension
+    // `.web.js`.
+    extensions: ['.web.js', '.js','.web.ts', '.ts','.web.tsx', '.tsx']
+  }
+}