fix: get bottom sheets + icons working

the app is now more functional although still rather borked

index.js

@@ -2,7 +2,7 @@
  * @format
  */
 
-import {AppRegistry, Platform} from 'react-native';
+import {AppRegistry} from 'react-native';
 
 import {App} from './App';
 import './i18n/i18n';
@@ -11,6 +11,3 @@ import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
 
-if (Platform.OS == "web") {
-    AppRegistry.runApplication(appName, {rootTag: document.getElementById('root')});
-}

index.web.js

@@ -0,0 +1,41 @@
+/**
+ * @format
+ */
+
+import {AppRegistry} from 'react-native';
+
+import {App} from './App';
+import './i18n/i18n';
+
+import {name as appName} from './app.json';
+
+import MaterialIconFont from 'react-native-vector-icons/Fonts/MaterialIcons.ttf';
+import MaterialCommunityIconFont from 'react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf';
+
+const iconFontStyles = `@font-face {
+    src: url(${MaterialCommunityIconFont});
+    font-family: MaterialCommunityIcons;
+}
+
+@font-face {
+    src: url(${MaterialIconFont});
+    font-family: MaterialIcons;
+}`;
+
+// Create a stylesheet
+const style = document.createElement('style');
+style.type = 'text/css';
+
+// Append the iconFontStyles to the stylesheet
+if (style.styleSheet) {
+  style.styleSheet.cssText = iconFontStyles;
+} else {
+  style.appendChild(document.createTextNode(iconFontStyles));
+}
+
+// Inject the stylesheet into the document head
+document.head.appendChild(style);
+
+AppRegistry.registerComponent(appName, () => App);
+
+AppRegistry.runApplication(appName, {rootTag: document.getElementById('root')});

package.json

@@ -14,12 +14,13 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@gorhom/bottom-sheet": "^4.5.1",
+    "@gorhom/bottom-sheet": "^5.0.0-alpha.6",
     "@notifee/react-native": "^7.8.2",
     "@react-native-async-storage/async-storage": "^1.21.0",
     "@react-native-clipboard/clipboard": "^1.13.2",
     "@react-native-community/hooks": "^3.0.0",
     "@rexovolt/react-native-side-menu": "^2.0.0",
+    "@svgr/webpack": "^8.1.0",
     "@tradle/react-native-http": "^2.0.1",
     "@traptitech/markdown-it-spoiler": "^1.1.6",
     "assert": "^2.1.0",

src/components/navigation/ChannelList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import {ImageBackground, TouchableOpacity, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -9,7 +9,6 @@ import {Channel, Server} from 'revolt.js';
 import {app, client} from '../../Generic';
 import {currentTheme, styles} from '../../Theme';
 import {ChannelButton, Text} from '../common/atoms';
-import {Image} from '@rvmob/crossplat/Image';
 
 type ChannelListProps = {
   onChannelClick: Function;
@@ -98,7 +97,7 @@ const ServerChannelList = observer((props: ServerChannelListProps) => {
   return (
     <>
       {props.currentServer.banner ? (
-        <Image
+        <ImageBackground
           source={{uri: props.currentServer.generateBannerURL()}}
           style={{width: '100%', height: 110, justifyContent: 'flex-end'}}>
           <TouchableOpacity
@@ -122,7 +121,7 @@ const ServerChannelList = observer((props: ServerChannelListProps) => {
               </View>
             </View>
           </TouchableOpacity>
-        </Image>
+        </ImageBackground>
       ) : (
         <TouchableOpacity
           onPress={() => app.openServerContextMenu(props.currentServer)}

src/crossplat/Image.ts

@@ -1,5 +1,3 @@
-import {Image as CoreImage, Platform} from 'react-native';
-// import FastImage from 'react-native-fast-image';
+import FastImage from 'react-native-fast-image';
 
-// FIXME: this needs to use fastimage on other platforms
-export const Image = Platform.OS !== 'web' ? CoreImage : CoreImage;
+export const Image = FastImage;

src/crossplat/Image.web.ts

@@ -0,0 +1,3 @@
+import {Image as CoreImage} from 'react-native';
+
+export const Image = CoreImage;

web/index.html

@@ -3,8 +3,10 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width">
-        <title>Aberdeen Demo</title>
+        <title>RVMob Beta</title>
         <style>
+            /* don't flashbang the user while loading */
+            html { background-color: #242424; }
             /* These styles make the body full-height */
             html, body { height: 100%; }
             /* These styles disable body scrolling if you are using <ScrollView> */

webpack.config.js

@@ -27,7 +27,7 @@ const babelLoaderConfiguration = {
   test: /\.js$|tsx?$/,
   // Add every directory that needs to be compiled by Babel during the build.
   include: [
-    path.resolve(__dirname, 'index.js'),
+    path.resolve(__dirname, 'index.web.js'),
     path.resolve(__dirname, 'App.tsx'),
     path.resolve(__dirname, 'src'),
     path.resolve(__dirname, 'i18n'),
@@ -46,7 +46,7 @@ const babelLoaderConfiguration = {
 };
 
 const imageLoaderConfiguration = {
-  test: /\.(gif|jpe?g|png|svg)$/,
+  test: /\.(gif|jpe?g|png)$/,
   use: {
     loader: 'url-loader',
     options: {
@@ -55,9 +55,25 @@ const imageLoaderConfiguration = {
   },
 };
 
+const vectorLoaderConfiguration = {
+  test: /\.svg$/,
+  exclude: /node_modules/,
+  use: [
+    {
+      loader: '@svgr/webpack',
+    },
+  ],
+};
+
+const vectorIconLoaderConfiguration = {
+  test: /\.ttf$/,
+  loader: "url-loader",
+  include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
+}
+
 module.exports = {
   entry: {
-    app: path.join(__dirname, 'index.js'),
+    app: path.join(__dirname, 'index.web.js'),
   },
   output: {
     filename: 'bundle.web.js',
@@ -72,7 +88,7 @@ module.exports = {
     fallback: { "crypto": require.resolve("react-native-get-random-values") }
   },
   module: {
-    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
+    rules: [babelLoaderConfiguration, imageLoaderConfiguration, vectorLoaderConfiguration, vectorIconLoaderConfiguration],
   },
   plugins: [
     new HtmlWebpackPlugin({