chore(example): update the web build to work with the upgraded exampl…

…e code
doublesymmetry · Oct 11, 2023 · 7c6997d · 7c6997d
1 parent 4e0e1f0
commit 7c6997d
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 28 deletions.
diff --git a/example/craco.config.js b/example/craco.config.js
@@ -2,6 +2,8 @@ const path = require('path');
 const {CracoAliasPlugin} = require('react-app-alias-ex');
 const babelInclude = require('@dealmore/craco-plugin-babel-include');
 const webpack = require('webpack');
+const { loaderByName, addBeforeLoader } = require('@craco/craco');
+
 
 module.exports = {
   webpack: {
@@ -12,20 +14,40 @@ module.exports = {
       'react': path.resolve(__dirname, './node_modules/react'),
     },
     plugins: {
-        add: [
-          new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }),
-          new webpack.DefinePlugin({
-            process: { env: {} },
-            __DEV__: true,
-          })
-        ],
-      },
+      add: [
+        new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }),
+        new webpack.DefinePlugin({
+          process: { env: {} },
+          __DEV__: true,
+        })
+      ],
+    },
+    configure: (config) => {
+      // BEGIN: resolve react-native-vector-icons font files
+      config.resolve.extensions.push('.ttf');
+      addBeforeLoader(
+        config,
+        loaderByName('url-loader'),
+        {
+          test: /\.ttf$/,
+          loader: 'url-loader', // or directly file-loader
+          include: path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
+        },
+      );
+      // END: resolve react-native-vector-icons font files
+
+      return config;
+    },
   },
   babel: {
     presets: [
       '@babel/preset-react',
       '@babel/preset-typescript',
     ],
+    plugins: [
+      '@babel/plugin-proposal-export-namespace-from',
+      'react-native-reanimated/plugin',
+    ],
   },
   plugins: [
     {

diff --git a/example/package.json b/example/package.json
@@ -28,19 +28,20 @@
     "@react-native-community/slider": "^4.4.2",
     "@react-native-segmented-control/segmented-control": "^2.4.2",
     "mux.js": "^6.2.0",
+    "react": "18.2.0",
     "react-dom": "^18.0.2",
-    "react-native-gesture-handler": "^2.12.1",
-    "react-native-reanimated": "^3.4.1",
+    "react-native": "0.71.12",
+    "react-native-gesture-handler": "2.12.1",
+    "react-native-reanimated": "3.3.0",
     "react-native-track-player": "link:../",
     "react-native-vector-icons": "^10.0.0",
     "react-native-web": "^0.18.10",
     "react-native-windows": "^0.65.0-0",
-    "react-native": "0.71.12",
-    "react-scripts": "5.0.1",
-    "react": "18.2.0"
+    "react-scripts": "5.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@craco/craco": "^7.0.0",
@@ -51,6 +52,7 @@
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.2.0",
     "@types/react-native": "^0.64.5",
+    "@types/react-native-vector-icons": "^6.4.14",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.36.0",
     "@typescript-eslint/parser": "^5.36.0",
@@ -61,8 +63,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.2.1",
     "metro-react-native-babel-preset": "0.73.9",
-    "react-app-alias-ex": "^2.1.0",
     "prettier": "^2.4.1",
+    "react-app-alias-ex": "^2.1.0",
     "react-native-clean-project": "^4.0.1",
     "react-test-renderer": "18.2.0",
     "rimraf": "^3.0.2",

diff --git a/example/src/components/ActionSheet.tsx b/example/src/components/ActionSheet.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ScrollView } from 'react-native';
 import { Spacer } from './Spacer';
 import { Button } from './Button';
 import TrackPlayer from 'react-native-track-player';
@@ -31,7 +30,7 @@ const onReset = async () => {
 
 export const ActionSheet: React.FC = () => {
   return (
-    <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
+    <ScrollView>
       <Spacer />
       <Button
         title={'Update Notification Metadata Randomly'}
@@ -44,7 +43,7 @@ export const ActionSheet: React.FC = () => {
         type={'primary'}
       />
       <Button title={'Reset'} onPress={onReset} type={'primary'} />
-    </BottomSheetScrollView>
+    </ScrollView>
   );
 };
 

diff --git a/example/src/components/OptionSheet.tsx b/example/src/components/OptionSheet.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
-import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import { Platform, StyleSheet, ScrollView, Text, View } from 'react-native';
 import SegmentedControl from '@react-native-segmented-control/segmented-control';
 import TrackPlayer, {
   AppKilledPlaybackBehavior,
@@ -34,7 +33,7 @@ export const OptionSheet: React.FC = () => {
     useState(audioServiceBehaviourToIndex(DefaultAudioServiceBehaviour));
 
   return (
-    <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
+    <ScrollView>
       <OptionStack vertical={true}>
         <Text style={styles.optionRowLabel}>Repeat Mode</Text>
         <Spacer />
@@ -94,7 +93,7 @@ export const OptionSheet: React.FC = () => {
           />
         </OptionStack>
       )}
-    </BottomSheetScrollView>
+    </ScrollView>
   );
 };
 

diff --git a/example/src/index.ts b/example/src/index.ts
@@ -7,6 +7,32 @@ import TrackPlayer from 'react-native-track-player';
 import {PlaybackService} from './services';
 import 'mux.js';
 
+/******************************************
+ * BEGIN: react-native-vector-icons import
+ ******************************************/
+// Generate required css
+// @ts-expect-error: ts doesn't like this for some reason
+import iconFont from 'react-native-vector-icons/Fonts/FontAwesome6_Solid.ttf';
+const iconFontStyles = `@font-face {
+  src: url(${iconFont});
+  font-family: FontAwesome6_Solid;
+}`;
+
+// Create stylesheet
+const style: any = document.createElement('style');
+style.type = 'text/css';
+if (style.styleSheet) {
+  style.styleSheet.cssText = iconFontStyles;
+} else {
+  style.appendChild(document.createTextNode(iconFontStyles));
+}
+
+// Inject stylesheet
+document.head.appendChild(style);
+/******************************************
+ * END: react-native-vector-icons import
+ ******************************************/
+
 const appName = 'Your app name';
 
 AppRegistry.registerComponent(appName, () => App);

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -194,7 +194,7 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
   integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
@@ -338,6 +338,14 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-export-default-from" "^7.22.5"
 
+"@babel/plugin-proposal-export-namespace-from@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
+  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8", "@babel/plugin-proposal-nullish-coalescing-operator@^7.16.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
@@ -2889,13 +2897,28 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-native-vector-icons@^6.4.14":
+  version "6.4.14"
+  resolved "https://registry.yarnpkg.com/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.14.tgz#085868a3d73a1db4bd49d6ce308c88b3a39cd96c"
+  integrity sha512-3RaEadfUUImrDed03hwRnYp5QFevcWkWgPUHxj9U9lB6G5uPEGaxXoLWdjgioQ46CvADXUzrDOEYLSVcAn1GQw==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "^0.70"
+
 "@types/react-native@^0.64.5":
   version "0.64.33"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.33.tgz#9947bf56cd52a11f8a95af9523d7840f281f6702"
   integrity sha512-oHpz3R0XJKxkiUJkmFvS2FZ14me91FQ2ptz0xursn4sX47GGtaHuUPLwBHXyMRZCQHixhgKV1NMk/RuCwZCrlw==
   dependencies:
     "@types/react" "^17"
 
+"@types/react-native@^0.70":
+  version "0.70.14"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.70.14.tgz#8619b8c94296f6456c5362d74a3d1b4fad3f54ab"
+  integrity sha512-Kwc+BYBrnDqvacNxKp1UtcZJnJJnTih2NYmi/ieAKlHdxEPN6sYMwmIwgHdoLHggvml6bf3DYRaH2jt+gzaLjw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-test-renderer@^18.0.0":
   version "18.0.1"
   resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.1.tgz#d3f308912fcc4491e4fbc134b906bb65bdee73f6"
@@ -5422,6 +5445,11 @@ electron-to-chromium@^1.4.477:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.523.tgz#f82f99243c827df05c26776d49712cb284972df6"
   integrity sha512-9AreocSUWnzNtvLcbpng6N+GkXnCcBR80IQkxRC9Dfdyg4gaWNUPBujAHUpKkiUkoSoR9UlhA4zD/IgBklmhzg==
 
+eme-encryption-scheme-polyfill@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.1.1.tgz#91c823ed584e8ec5a9f03a6a676def8f80c57a4c"
+  integrity sha512-njD17wcUrbqCj0ArpLu5zWXtaiupHb/2fIUQGdInf83GlI+Q6mmqaPGLdrke4savKAu15J/z1Tg/ivDgl14g0g==
+
 emitter-listener@^1.0.1, emitter-listener@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/emitter-listener/-/emitter-listener-1.1.2.tgz#56b140e8f6992375b3d7cb2cab1cc7432d9632e8"
@@ -11486,7 +11514,7 @@ react-native-codegen@^0.71.5:
     jscodeshift "^0.13.1"
     nullthrows "^1.1.1"
 
-react-native-gesture-handler@^2.12.1:
+[email protected]:
   version "2.12.1"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz#f11a99fb95169810c6886fad5efa01a17fd81660"
   integrity sha512-deqh36bw82CFUV9EC4tTo2PP1i9HfCOORGS3Zmv71UYhEZEHkzZv18IZNPB+2Awzj45vLIidZxGYGFxHlDSQ5A==
@@ -11502,10 +11530,10 @@ react-native-gradle-plugin@^0.71.19:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz#3379e28341fcd189bc1f4691cefc84c1a4d7d232"
   integrity sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ==
 
-react-native-reanimated@^3.4.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.5.2.tgz#c7b4e70ee3210e26e6326d3e43f9299590898c5d"
-  integrity sha512-Uv9imJ6ZC7F/tTSpjjfo/0AZlw19Lag63+MUqF6p483LOoRkYtYP3JmtVV402mQWfhL1LPMeyAu/1spRjPKCCQ==
+react-native-reanimated@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz#80f9d58e28fddf62fe4c1bc792337b8ab57936ab"
+  integrity sha512-LzfpPZ1qXBGy5BcUHqw3pBC0qSd22qXS3t8hWSbozXNrBkzMhhOrcILE/nEg/PHpNNp1xvGOW8NwpAMF006roQ==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"
@@ -12344,6 +12372,13 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
+shaka-player@^4.3.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-4.4.2.tgz#df5e49a698d6bb85e0c9bf7d729563d31a79ff24"
+  integrity sha512-sDw4wmRIw920f/JzA4XHGzEBq/ywYqgeEeSbUJIgJS8xNPcwWbaUuXJXFbPAVMLJoj9co2PrX20qTWTUSpDADg==
+  dependencies:
+    eme-encryption-scheme-polyfill "^2.1.1"
+
 shallow-clone@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"