Web Vitals

README.md

@@ -63,10 +63,6 @@ Launches the app for IOS in debug mode.
 > If you tried the above and still get the @plaut-ro/luna: Not found error, please try adding the `--ignore-existing` flag to force npx to ignore any locally installed versions of the CLI and use the latest.
 Further information can be found here: https://github.com/react-native-community/cli#about 
 
-## Advanced
-
-For an advanced start, you can head to [react-native-firebase-authentification-example](https://github.com/invertase/react-native-firebase-authentication-example) which is built on top of Luna template
-
 ## 📃 License
 
 > 📃 This project is released under the [MIT License](LICENSE). \

template/package.json

@@ -34,7 +34,8 @@
     "react-native-screens": "^3.9.0",
     "react-native-tab-view": "^3.1.1",
     "react-native-vector-icons": "^9.0.0",
-    "react-native-web": "^0.17.5"
+    "react-native-web": "^0.17.5",
+    "web-vitals": "^2.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

template/src/index.js

@@ -5,6 +5,7 @@
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
+import reportWebVitals from './reportWebVitals';
 
 // RNVI integration for web
 import './icons';
@@ -13,3 +14,8 @@ AppRegistry.registerComponent(appName, () => App);
 AppRegistry.runApplication(appName, {
   rootTag: document.getElementById('root'),
 });
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

template/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import {ReportHandler} from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({getCLS, getFID, getFCP, getLCP, getTTFB}) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;