Fix Android API & Image access in localhost + Fixed list margin on na…

…tive + Fixed bun usage in EAS context

apps/expo/babel.config.js

@@ -8,7 +8,7 @@ module.exports = function (api) {
         'module:react-native-dotenv',
         {
           moduleName: '@env',
-          path: '../../.env',
+          path: '../../.env.local',
           allowlist: ['NEXT_PUBLIC_SUPABASE_URL', 'NEXT_PUBLIC_SUPABASE_ANON_KEY', 'NEXT_PUBLIC_APP_URL', 'NEXT_PUBLIC_API_URL', 'NEXT_PUBLIC_SUPPORT_EMAIL'],
           safe: false,
           allowUndefined: true

apps/expo/eas.json

@@ -23,10 +23,10 @@
       "distribution": "store",
       "android": {
         "buildType": "app-bundle",
-        "node": "18.17.0"
+        "bun": "1.0.7"
       },
       "ios": {
-        "node": "18.17.0"
+        "bun": "1.0.7"
       },
       "env": {
         "TAMAGUI_TARGET": "native"

apps/expo/package.json

@@ -4,17 +4,16 @@
   "main": "index.js",
   "private": true,
   "scripts": {
-    "ios": "expo run:ios",
-    "android": "cross-env TAMAGUI_TARGET=native expo run:android",
-    "dev": "cross-env TAMAGUI_TARGET=native expo start --dev-client",
-    "dev:prod": "cross-env TAMAGUI_TARGET=native expo start --no-dev --minify",
-    "prebuild": "cross-env TAMAGUI_TARGET=native expo prebuild",
-    "build:ios:preview": " eas build --platform ios --profile preview --local",
-    "build:android:preview": "eas build --platform android --profile preview --local",
-    "build:ios": " eas build --platform ios --profile production --local",
-    "build:android": "eas build --platform android --profile production --local",
-    "clean": "git clean -xdf .expo node_modules ios android",
-    "eas-build-pre-install": "npm install -g [email protected]"
+    "ios": "cross-env TAMAGUI_TARGET=native bun expo run:ios",
+    "android": "cross-env TAMAGUI_TARGET=native bun expo run:android",
+    "dev": "cross-env TAMAGUI_TARGET=native bun expo start --dev-client",
+    "dev:prod": "cross-env TAMAGUI_TARGET=native bun expo start --no-dev --minify",
+    "prebuild": "cross-env TAMAGUI_TARGET=native bun expo prebuild",
+    "build:ios:preview": "bun eas build --platform ios --profile preview --local",
+    "build:android:preview": "bun eas build --platform android --profile preview --local",
+    "build:ios": "bun eas build --platform ios --profile production --local",
+    "build:android": "bun eas build --platform android --profile production --local",
+    "clean": "git clean -xdf .expo node_modules ios android"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",

packages/app/provider/solito-image/index.tsx

@@ -1,11 +1,19 @@
+import { replaceLocalhost } from 'app/utils/trpc/localhost.native'
 import { SolitoImageProvider as SolitoImageProviderOG } from 'solito/image'
 
-const imageURL = process.env.NEXT_PUBLIC_APP_URL
+export const getImageUrl = () => {
+  const imageUrl = `${process.env.NEXT_PUBLIC_APP_URL}`
+  return replaceLocalhost(imageUrl)
+}
 
 export const SolitoImageProvider = ({
   children,
 }: {
   children: React.ReactNode
 }): React.ReactNode => {
-  return <SolitoImageProviderOG nextJsURL={imageURL as `http:${string}` | `https:${string}`}>{children}</SolitoImageProviderOG>
+  return (
+    <SolitoImageProviderOG nextJsURL={getImageUrl() as `http:${string}` | `https:${string}`}>
+      {children}
+    </SolitoImageProviderOG>
+  )
 }

packages/app/utils/number.ts

@@ -1,11 +1,18 @@
 export function formatNumber(x: number): string {
   return x.toLocaleString('en-US')
-};
+}
 
-export function formatPrice(price: number): string {
-  return price.toLocaleString('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    maximumFractionDigits: 0,
-  })
-};
+const formatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+})
+
+export function formatPrice(number) {
+  if (typeof number !== 'number' || isNaN(number) || !isFinite(number)) {
+    throw new Error('Invalid number value')
+  }
+
+  return formatter.format(number)
+}

packages/app/utils/trpc/index.tsx

@@ -9,14 +9,16 @@ import { httpBatchLink } from '@trpc/client'
 import { supabase } from '../supabase/client'
 import superjson from 'superjson'
 import { useState } from 'react'
+import { replaceLocalhost } from './localhost.native'
 
 /**
  * A set of typesafe hooks for consuming your API.
  */
 export const trpc = createTRPCReact<AppRouter>()
 
-const getBaseUrl = () => {
-  return process.env.NEXT_PUBLIC_API_URL
+const getApiUrl = () => {
+  const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}`
+  return replaceLocalhost(apiUrl)
 }
 
 export const TRPCProvider: React.FC<{
@@ -36,7 +38,7 @@ export const TRPCProvider: React.FC<{
               Authorization: token ? `Bearer ${token}` : undefined,
             }
           },
-          url: `${getBaseUrl()}/trpc`,
+          url: `${getApiUrl()}/trpc`,
         }),
       ],
     })

packages/app/utils/trpc/index.web.ts

@@ -4,10 +4,6 @@ import type { AppRouter } from '@t4/api/src/router'
 import superjson from 'superjson'
 import { getToken } from '../supabase/cookies'
 
-const getBaseUrl = () => {
-  return `${process.env.NEXT_PUBLIC_API_URL}`
-}
-
 export const trpc = createTRPCNext<AppRouter>({
   config() {
     return {
@@ -24,7 +20,7 @@ export const trpc = createTRPCNext<AppRouter>({
               Authorization: `Bearer ${getToken()}`,
             }
           },
-          url: `${getBaseUrl()}/trpc`,
+          url: `${process.env.NEXT_PUBLIC_API_URL}/trpc`,
         }),
       ],
     }

packages/app/utils/trpc/localhost.native.ts

@@ -0,0 +1,18 @@
+import Constants from 'expo-constants'
+
+let localhost: string | undefined
+const PROTOCOL = 'http:'
+const localhostRegex = new RegExp(`${PROTOCOL}\/\/localhost:`, 'g')
+
+export function getLocalhost() {
+  if (localhost !== undefined) {
+    return localhost
+  }
+  const debuggerHost = Constants.expoConfig?.hostUri
+  localhost = debuggerHost?.split(':')[0] ?? 'localhost'
+  return localhost
+}
+
+export function replaceLocalhost(address: string) {
+  return address.replace(localhostRegex, () => `${PROTOCOL}//${getLocalhost()}:`)
+}

packages/ui/src/list/index.tsx

@@ -9,9 +9,8 @@ interface Props {
 }
 
 export function VirtualList<T>({ data, renderItem, itemHeight }: Props): React.ReactNode {
-  const { top, bottom } = useSafeAreaInsets()
+  const { bottom } = useSafeAreaInsets()
 
-  // FlashList's API is awkward.
   const render = useCallback(
     (item) => {
       return renderItem(item.item)
@@ -23,8 +22,7 @@ export function VirtualList<T>({ data, renderItem, itemHeight }: Props): React.R
     <FlashList
       data={data}
       contentContainerStyle={{
-        paddingTop: top,
-        paddingBottom: bottom,
+        paddingBottom: bottom + 8,
       }}
       renderItem={render}
       estimatedItemSize={itemHeight}