[SOLVED] How can I integrate storybook with react-native-cli?

I am having trouble with integrating Storybook with react-native-cli. I followed this tutorial initially but also tried the following solutions:

but they do not work in my case

The tutorials that I've tried let my code to the following state

// package.json

{
  "name": "xyz",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "apk": "cd android; ./gradlew assembleRelease",
    "clean": "cd android && .\\gradlew clean",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "storybook-generate": "sb-rn-get-stories",
    "storybook": "cross-env STORYBOOK_ENABLED=true react-native start",
    "storybook:ios": "cross-env STORYBOOK_ENABLED=true react-native run-ios",
    "storybook:android": "cross-env STORYBOOK_ENABLED=true react-native run-android"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-navigation/drawer": "^6.5.7",
    "@react-navigation/native": "^6.1.1",
    "@react-navigation/native-stack": "^6.9.7",
    "@reduxjs/toolkit": "^1.9.1",
    "@rneui/base": "^4.0.0-rc.7",
    "@rneui/themed": "^4.0.0-rc.7",
    "@shopify/restyle": "^2.4.4",
    "date-fns": "^2.29.3",
    "lodash.isempty": "^4.4.0",
    "numeral": "^2.0.6",
    "papaparse": "^5.4.1",
    "react": "18.1.0",
    "react-native": "0.70.6",
    "react-native-document-picker": "^8.1.3",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-reanimated": "^2.14.4",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-vector-icons": "^9.2.0",
    "react-redux": "^8.0.5",
    "redux": "^4.2.0",
    "redux-persist": "^6.0.0",
    "styled-components": "^5.3.6"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/datetimepicker": "8.0.1",
    "@react-native-community/eslint-config": "^2.0.0",
    "@react-native-community/slider": "4.5.2",
    "@storybook/addon-ondevice-actions": "7.6.19",
    "@storybook/addon-ondevice-controls": "7.6.19",
    "@storybook/react-native": "7.6.19",
    "babel-jest": "^26.6.3",
    "babel-loader": "8.3.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "0.72.3",
    "prop-types": "^15.8.1",
    "react-dom": "18.1.0",
    "react-test-renderer": "18.1.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

// index.js

import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './src/app';

let app = App;
if (__DEV__ && process.env.STORYBOOK_ENABLED === 'true') {
  const StorybookUIRoot = require('./storybook').default;
  app = StorybookUIRoot;
}

AppRegistry.registerComponent(appName, () => app);

// metro.config.js

module.exports = {
  transformer: {
    unstable_allowRequireContext: true,
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

I just want to integrate Storybook in my react-native project. Most of the solutions that I found were involving expo but I don't need that. Can anyone point me to the right direction or if possible highlight my mistakes in the code.

Runing the defined scripts results in the FAILURE: Build failed with an exception. Here is the error message that I get:

$ yarn storybook:android
yarn run v1.22.19
$ cross-env STORYBOOK_ENABLED=true react-native run-android   
info JS server already running.
info Installing the app...

FAILURE: Build failed with an exception.

* Where:
Script 'E:\*\*\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 450

* What went wrong:
A problem occurred evaluating script.
> Calling `[node, E:\*\*\node_modules\@react-native-community\cli\build\bin.js, config]` finished with an exception. Error message: groovy.json.JsonException: Unable to determine the current character, it is not a string, number, array, or object

  The current character read is 'i' with an int value of 105
  Unable to determine the current character, it is not a string, number, array, or object
  line number 1
  index number 0
  info Run CLI with --verbose flag for more details.
  ^. Output: info Run CLI with --verbose flag for more details.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 27s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* Where:
Script 'E:\*\*\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 450

* What went wrong:
A problem occurred evaluating script.
> Calling `[node, E:\*\*\node_modules\@react-native-community\cli\build\bin.js, config]` finished with an exception. Error message: groovy.json.JsonException: Unable to determine the current character, it is not a string, number, array, or object

  The current character read is 'i' with an int value of 105
  Unable to determine the current character, it is not a string, number, array, or object
  line number 1
  index number 0
  info Run CLI with --verbose flag for more details.
  ^. Output: info Run CLI with --verbose flag for more details.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 27s