EvanBacon

Architecture

• Website: Expo Router website with Tailwind.
• Native app: Expo Router app with CNG.
• Backend: Expo API routes WinterTC-compliant. Routes are in src/app/api/ directory. API routes use +api.ts suffix (chat+api.ts).
• Secrets: Use .env files and API routes for secret management. Never use EXPO_PUBLIC_ prefix for sensitive data.

Code Style

• Use TypeScript whenever possible.

EvanBacon

import { SplashScreen } from "expo-router";

import React, { Suspense, useEffect } from "react";
import { Text, View } from "react-native";

import * as Font from "expo-font";

SplashScreen.preventAutoHideAsync();

function SplashFallback() {

EvanBacon

import { Storage } from "expo-sqlite/kv-store";

// localStorage polyfill. Life's too short to not have some storage API.
if (typeof localStorage === "undefined") {
  class StoragePolyfill {
    /**
     * Returns the number of key/value pairs.
     *
     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Storage/length)
     */

EvanBacon

"use client";

import React from "react";
import { View, StyleSheet, Animated, Easing, ViewStyle } from "react-native";

const BASE_COLORS = {
  dark: { primary: "rgb(17, 17, 17)", secondary: "rgb(51, 51, 51)" },
  light: {
    primary: "rgb(250, 250, 250)",
    secondary: "rgb(205, 205, 205)",

EvanBacon

[...document.querySelectorAll('.notifications-list-item:has(.octicon-git-merge)'), ...document.querySelectorAll('.notifications-list-item:has(.octicon-skip)'), ...document.querySelectorAll('.notifications-list-item:has(.octicon-issue-closed)'), ...document.querySelectorAll('.notifications-list-item:has(.octicon-discussion-closed)'), ...document.querySelectorAll('.notifications-list-item:has(.octicon-git-pull-request-closed)')].forEach(el => el.querySelector('input').click()); setTimeout(() => document.querySelector('button[type="submit"][role="menuitem"][title="Done"].btn').click(), 200)

EvanBacon

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.js": "${capture}.js.map, ${capture}.d.ts, ${capture}.d.ts.map",
    "*.ts": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(capture).test.web.ts, $(capture).test.web.tsx, $(capture).test.android.ts, $(capture).test.android.tsx, ${capture}.native.tsx, ${capture}.ios.tsx, ${capture}.android.tsx, ${capture}.web.tsx, ${capture}.native.ts, ${capture}.ios.ts, ${capture}.android.ts, ${capture}.web.ts, ${capture}.native.js, ${capture}.ios.js, ${capture}.android.js, ${capture}.web.js, ${capture}.native.jsx, ${capture}.ios.jsx, ${capture}.android.jsx, ${capture}.web.jsx",
    "*.tsx": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(captur

EvanBacon

// https://gist.github.com/EvanBacon/98858a341e2da209587455bbad465931
const includesEverything = {
  CFBundleDocumentTypes: [
    {
      CFBundleTypeExtensions: ["*"],
      CFBundleTypeName: "All files",
      CFBundleTypeOSTypes: ["*"],
    },
    {
      CFBundleTypeExtensions: ["mov"],

EvanBacon

const { createExoticTransformer } = require("@expo/metro-config/transformer");

module.exports = createExoticTransformer({
  // Add realm packages to the list of modules to transpile locally.
  transpileModules: ["@realm/", "realm"],
});

EvanBacon

import * as SystemUI from 'expo-system-ui';
import * as React from 'react';
import { Appearance, AppState, AppStateStatus, ColorSchemeName, ColorValue } from 'react-native';

type ThemedColorValue = { light: ColorValue, dark: ColorValue };

type Props = { backgroundColor: ColorValue | ThemedColorValue }

const propsStack: Props[] = [];

EvanBacon

{
    "CFBundleDocumentTypes": [
      {
        "CFBundleTypeName": "Folder",
        "CFBundleTypeRole": "Viewer",
        "LSItemContentTypes": [
          "public.folder"
        ]
      },
      {