feat(app): migrate to app config

app.config.ts

@@ -0,0 +1,79 @@
+import { ExpoConfig, ConfigContext } from '@expo/config';
+import { version } from './package.json';
+
+const BUILD_NUMBER = 1;
+
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name: 'Foam',
+  slug: 'Foam',
+  scheme: 'foam',
+  version,
+  userInterfaceStyle: 'automatic',
+  newArchEnabled: true,
+  jsEngine: 'hermes',
+  assetBundlePatterns: ['**/*'],
+
+  // ios
+  ios: {
+    buildNumber: String(BUILD_NUMBER),
+    supportsTablet: false,
+    // googleServicesFile: `./GoogleService-Info.plist`,
+    bundleIdentifier: 'com.foam',
+    config: {
+      // needed for expo-secure-store
+      usesNonExemptEncryption: false,
+    },
+  },
+
+  // android
+  android: {
+    package: 'com.foam',
+    // needed for haptic feedback UI
+    permissions: ['VIBRATE'],
+    versionCode: BUILD_NUMBER,
+    // googleServicesFile: './google-services.json',
+    adaptiveIcon: {
+      foregroundImage: './assets/adaptive-icon.png',
+      backgroundColor: '#ffffff',
+    },
+  },
+
+  // web
+  web: {
+    favicon: './assets/favicon.png',
+  },
+  extra: {
+    eas: {
+      projectId: '950a1e2f-6b25-4be7-adb2-3c16287a2b5e',
+    },
+  },
+  runtimeVersion: {
+    policy: 'appVersion',
+  },
+  updates: {
+    fallbackToCacheTimeout: 0,
+  },
+  experiments: {
+    tsconfigPaths: true,
+  },
+  plugins: [
+    ['expo-font', 'expo-secure-store'],
+    [
+      'expo-build-properties',
+      {
+        ios: {
+          flipper: true,
+        },
+        android: {
+          enableProguardInReleaseBuilds: true,
+          enableShrinkResourcesInReleaseBuilds: true,
+        },
+      },
+    ],
+    ['newrelic-react-native-agent'],
+    ['./src/plugins/withAnimatedWebPSupport.js'],
+    ['./src/plugins/withFastImageWebPSupportIOS.js'],
+    ['./src/plugins/withFastImageWebPSupportAndroid.js'],
+  ],
+});

package.json

@@ -62,6 +62,7 @@
     "expo": "~52.0.7",
     "expo-auth-session": "~6.0.0",
     "expo-av": "~15.0.1",
+    "expo-build-properties": "^0.13.1",
     "expo-clipboard": "~7.0.0",
     "expo-constants": "~17.0.3",
     "expo-dev-client": "~5.0.4",

src/components/LiveStreamCard.tsx

@@ -54,7 +54,7 @@ export default function LiveStreamCard({ stream }: Props) {
           </View>
         </View>
         <View style={$streamDetail}>
-          <Text preset="streamTitle">{stream.title}</Text>
+          <Text preset="formLabel">{stream.title}</Text>
           <View style={$streamMetadata}>
             <View style={$userInfo}>
               <Image

src/components/__tests__/__snapshots__/LiveStreamCard.test.tsx.snap

@@ -167,7 +167,7 @@ exports[`LiveStreamCard renders correctly 1`] = `
         }
       >
         <Text
-          preset="streamTitle"
+          preset="formLabel"
           style={
             [
               [
@@ -177,18 +177,15 @@ exports[`LiveStreamCard renders correctly 1`] = `
                     "lineHeight": 17.6,
                   },
                   {
-                    "fontFamily": "gothamRoundedBook",
+                    "fontFamily": "gothamSsmBook",
                   },
                   {
                     "color": "#F8F7F7",
+                    "lineHeight": 22,
                   },
                 ],
                 {
-                  "fontSize": 12,
-                  "lineHeight": 13.2,
-                },
-                {
-                  "fontFamily": "gothamRoundedMedium",
+                  "fontFamily": "gothamSsmMedium",
                 },
               ],
               undefined,

src/plugins/withFastImageWebPSupportIOS.js

@@ -1,10 +1,11 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 /* eslint-disable no-shadow */
 /* eslint-disable no-param-reassign */
-import {
+const {
   WarningAggregator,
   withAppDelegate,
   createRunOncePlugin,
-} from '@expo/config-plugins';
+} = require('@expo/config-plugins');
 
 const RNFI_EXPO_WEBP_IMPORT = `#import "AppDelegate.h"
 // expo-config-plugin fast-image webp animated support
@@ -68,7 +69,7 @@ const withFastImageWebPSupportIOS = config => {
   });
 };
 
-export default createRunOncePlugin(
+module.exports = createRunOncePlugin(
   withFastImageWebPSupportIOS,
   'rnfi-expo-animated-webp-support',
   '1.0.0',

src/screens/ErrorScreen/ErrorDetails.tsx

@@ -1,11 +1,11 @@
 import Button from '@app/components/ui/Button';
-import Icon from '@app/components/ui/Icon';
 import Screen from '@app/components/ui/Screen';
 import { Text } from '@app/components/ui/Text';
 import { colors, spacing } from '@app/styles';
 import { openLinkInBrowser } from '@app/utils/openLinkInBrowser';
 import React, { ErrorInfo } from 'react';
 import { ScrollView, TextStyle, View, ViewStyle } from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 export interface ErrorDetailsProps {
   error: Error | null;
@@ -35,7 +35,7 @@ export default function ErrorDetails(props: ErrorDetailsProps) {
       contentContainerStyle={$contentContainer}
     >
       <View style={$topSection}>
-        <Icon icon="ladybug" size={64} />
+        <MaterialIcons name="error" />
         <Text
           style={$heading}
           preset="subheading"

src/screens/SettingsScreen.tsx

@@ -44,7 +44,6 @@ export default function SettingsScreen() {
             />
           ),
           showRightArrow: true,
-          iconRight: <Icon icon="icon-right" />,
           showSeperator: true,
           onPress: () => {
             bottomSheetModalRef.current?.present();
@@ -168,6 +167,54 @@ export default function SettingsScreen() {
             }}
           />
         </BottomSheetView>
+        <BottomSheetView style={$container}>
+          <Icon icon="arrow-right" />
+          <Button
+            title="My stream"
+            onPress={async () => {
+              bottomSheetModalRef.current?.dismiss();
+              await logout();
+              navigation.navigate('Streams', {
+                screen: 'LiveStream',
+                params: {
+                  id: user?.login as string,
+                },
+              });
+            }}
+          />
+        </BottomSheetView>
+        <BottomSheetView style={$container}>
+          <Icon icon="arrow-right" />
+          <Button
+            title="My Profile"
+            onPress={async () => {
+              bottomSheetModalRef.current?.dismiss();
+              await logout();
+              navigation.navigate('Streams', {
+                screen: 'StreamerProfile',
+                params: {
+                  id: user?.login as string,
+                },
+              });
+            }}
+          />
+        </BottomSheetView>
+        <BottomSheetView style={$container}>
+          <Icon icon="arrow-right" />
+          <Button
+            title="Blocked"
+            onPress={async () => {
+              bottomSheetModalRef.current?.dismiss();
+              await logout();
+              navigation.navigate('Streams', {
+                screen: 'StreamerProfile',
+                params: {
+                  id: user?.login as string,
+                },
+              });
+            }}
+          />
+        </BottomSheetView>
       </BottomSheetModal>
       <Modal
         visible={isModalVisible}
@@ -198,7 +245,7 @@ const $container: ViewStyle = {
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  padding: 8,
+  padding: 4,
 };
 
 const $modalContainer: ViewStyle = {

src/screens/Stream/LiveStreamScreen.tsx

@@ -100,7 +100,7 @@ const LiveStreamScreen: FC<StreamStackScreenProps<'LiveStream'>> = ({
             <Text style={$videoViews}>
               {new Intl.NumberFormat('en-US').format(
                 stream?.viewer_count as number,
-              )}
+              )}{' '}
               viewers
             </Text>
           </View>