### Setup Development Environment

Source: https://github.com/bluesky-social/social-app/blob/main/bskyweb/README.md

Commands to install Node.js, pnpm, and project dependencies.

```bash
# install nodejs
nvm install
nvm use
npm install --global pnpm

# setup tools and deps (in top level of this repo)
pnpm install --frozen-lockfile

# run pnpm web dev server, if you wanted
pnpm web
```

--------------------------------

### Run Web Application

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Commands to install dependencies and start the web development server.

```bash
pnpm install
pnpm web
```

--------------------------------

### Start the atproto development servers

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Commands to clone, install, and launch the atproto development environment.

```bash
git clone git@github.com:bluesky-social/atproto.git
cd atproto
brew install pnpm
optional: brew install jq
pnpm i
pnpm build
Start the docker daemon (on MacOS this entails starting the Docker Desktop app)
Launch a Postgres database on port 5432
cd packages/dev-env && pnpm start
```

--------------------------------

### Install App on Simulator

Source: https://github.com/bluesky-social/social-app/blob/main/scripts/push-notification/README.md

Boot an iOS simulator and install the application before running tests.

```bash
pnpm ios
```

--------------------------------

### Setup Apple Silicon Native Dependencies

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Install LLVM and FFI gems required for building on Apple Silicon architectures.

```bash
arch -arm64 brew install llvm
sudo gem install ffi
```

--------------------------------

### Install dependencies

Source: https://github.com/bluesky-social/social-app/blob/main/bskyembed/README.md

Navigate to the project directory and install required packages.

```bash
cd bskyembed
pnpm
```

--------------------------------

### Run development server

Source: https://github.com/bluesky-social/social-app/blob/main/bskyembed/README.md

Start the local development server to view the embed homepage.

```bash
pnpm dev
```

--------------------------------

### Build and run the Go web server

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Steps to install dependencies, build the web assets, and compile the Go server for production.

```bash
cd social-app
pnpm install && pnpm build-web
cd bskyweb/
go mod tidy
go build -v -tags timetzdata -o bskyweb ./cmd/bskyweb
./bskyweb serve --appview-host=https://public.api.bsky.app
```

--------------------------------

### Launch the app with proxy DID

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Command to start the application with a specific AppView proxy DID environment variable.

```bash
EXPO_PUBLIC_BLUESKY_PROXY_DID=did:plc:dw4kbjf5mn7nhenabiqpkyh3 pnpm start
```

--------------------------------

### Full Screen Layout Example

Source: https://github.com/bluesky-social/social-app/blob/main/src/components/Layout/README.md

Presents a complete example of a screen layout, combining Layout.Screen, a fully composed Header, and the Content area. This serves as a reference for typical screen construction.

```tsx
<Layout.Screen>
  <Layout.Header.Outer>
    <Layout.Header.BackButton /> {/* or <Layout.Header.MenuButton /> */}

    <Layout.Header.Content>
      <Layout.Header.TitleText>Account</Layout.Header.TitleText>

      {/* Optional subtitle */}
      <Layout.Header.SubtitleText>Settings for @esb.lol</Layout.Header.SubtitleText>
    </Layout.Header.Content>

    <Layout.Header.Slot />
  </Layout.Header.Outer>

  <Layout.Content>
    ...
  </Layout.Content>
</Layout.Screen>
```

--------------------------------

### Install development environment dependencies

Source: https://github.com/bluesky-social/social-app/blob/main/docs/testing.md

Install required dependencies for the development environment.

```bash
cd dev-env && pnpm i
```

--------------------------------

### Install Xcode Command Line Tools

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Ensure necessary command line tools are installed for Xcode.

```bash
xcode-select --install
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Install project-specific dependencies including Cocoapods.

```bash
bundler install
```

--------------------------------

### Basic Storage Operations with Device Store

Source: https://github.com/bluesky-social/social-app/blob/main/src/storage/README.md

Demonstrates basic usage of the device storage, including setting, getting, and removing data. Ensure the `device` store is correctly imported.

```typescript
import { device } from '#/storage';

device.set(['foobar'], true);
device.get(['foobar']);
device.remove(['foobar']);
device.removeMany([], ['foobar']);
```

--------------------------------

### E2E Test Execution

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Commands to start the mock server, application, and run the end-to-end test suite.

```bash
pnpm e2e:mock-server
```

```bash
pnpm e2e:start
```

```bash
pnpm e2e:build
```

```bash
pnpm e2e:run
```

--------------------------------

### Run snippet testbed

Source: https://github.com/bluesky-social/social-app/blob/main/bskyembed/README.md

Start the snippet development script in a separate terminal to access the testbed page.

```bash
pnpm dev-snippet
```

--------------------------------

### Configure Ruby Environment with rbenv

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Install and set the global Ruby version using rbenv.

```bash
brew install rbenv
rbenv install 2.7.6
rbenv global 2.7.6
eval "$(rbenv init - zsh)"
```

--------------------------------

### Configure iOS Simulator Runtime

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Commands to set the active Xcode path and install a downloaded simulator runtime.

```bash
xcode-select -s /Applications/Xcode.app
xcodebuild -runFirstLaunch
xcrun simctl runtime add "~/Downloads/iOS_17.4_Simulator_Runtime.dmg"
```

--------------------------------

### Install EAS CLI

Source: https://github.com/bluesky-social/social-app/blob/main/docs/deploy-ota.md

Command to install the EAS CLI globally if it is not already present in the environment.

```sh
pnpm add -g eas-cli
```

--------------------------------

### Android Manifest Configuration Example

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-receive-android-intents/README.md

Configure intent filters in your main app's AndroidManifest.xml to declare the MIME types your app accepts. The module itself has an empty manifest.

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.your.app">
    <application ...>
        <activity ...>
            <!-- Intent filters for text, images, and video -->
            <intent-filter>
                <action android:name="android.intent.action.SEND" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:mimeType="text/plain" />
                <data android:mimeType="image/*" />
                <data android:mimeType="video/*" />
            </intent-filter>
            <!-- Intent filter for multiple images -->
            <intent-filter>
                <action android:name="android.intent.action.SEND_MULTIPLE" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:mimeType="image/*" />
            </intent-filter>
        </activity>
    </application>
</manifest>
```

--------------------------------

### Get All Preferences

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-background-notification-handler/README.md

Asynchronously retrieves all currently stored notification preferences. Ensure the module is initialized before calling.

```typescript
getAllPrefsAsync(): Promise<BackgroundNotificationHandlerPreferences>
```

--------------------------------

### Scoped Storage with Account Schema

Source: https://github.com/bluesky-social/social-app/blob/main/src/storage/README.md

Illustrates how to create and use a scoped storage instance for account-specific data. The `Storage` class is parameterized with scope types and data schemas, ensuring type safety for `set` and `get` operations.

```typescript
type AccountSchema = {
  language: `${string}-${string}`;
};

type DID = `did:${string}`;

const account = new Storage<[
  DID
], AccountSchema>({
  id: 'account',
});

account.set(
  ['did:plc:abc', 'language'],
  'en-US',
);

const language = account.get([
  'did:plc:abc',
  'language',
]);
```

--------------------------------

### Usage Example for Expo Scroll Forwarder

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-scroll-forwarder/README.md

Demonstrates how to use the ExpoScrollForwarderView to wrap a header component and link it to a ScrollView using its ref. Ensure the `scrollViewTag` prop is set to the current value of the ScrollView's ref.

```tsx
import {ExpoScrollForwarderView} from 'expo-scroll-forwarder'

function ProfileScreen() {
  const scrollViewTag = useRef(null)
  
  return (
    <View>
      <ExpoScrollForwarderView scrollViewTag={scrollViewTag.current}>
        <ProfileHeader />
      </ExpoScrollForwarderView>
      
      <ScrollView ref={scrollViewTag}>
        {/* Scrollable content */}
      </ScrollView>
    </View>
  )
}
```

--------------------------------

### Run performance tests

Source: https://github.com/bluesky-social/social-app/blob/main/docs/testing.md

Commands for measuring app performance using Flashlight.

```bash
pnpm perf:measure
```

```bash
pnpm perf:test:measure
```

```bash
pnpm perf:results
```

```bash
pnpm perf:test <path_to_test>
```

--------------------------------

### Environment and Build Commands

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Commands for managing environment variables, checking system info, and executing production builds.

```bash
pnpm android --device
```

```bash
pnpm exec react-native info
```

```bash
adb reverse tcp:3001 tcp:3001
```

--------------------------------

### Run Targeted Native Prebuild

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Generate native files for a specific platform.

```bash
pnpm prebuild -p ios
pnpm prebuild -p android
```

--------------------------------

### Build SPA Bundle

Source: https://github.com/bluesky-social/social-app/blob/main/bskyweb/README.md

Command to build the monolithic static JavaScript file.

```bash
# in the top level of this repo
pnpm build-web
```

--------------------------------

### Run Android Emulator

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Launch the Android application in the emulator.

```bash
pnpm android
```

--------------------------------

### Define React components with best practices

Source: https://github.com/bluesky-social/social-app/blob/main/CLAUDE.md

Demonstrates fragment shorthand, function declarations, prop destructuring, and inline types.

```tsx
import {Fragment} from 'react'
import {View} from 'react-native'
import {Trans} from '@lingui/react/macro'

import {Text} from '#/components/Typography'

function MyComponent({items = []}: {items?: string[]}) {
  return (
    <>
      <View>
        <Text>
          <Trans>Example</Trans>
        </Text>
      </View>
      <View>
        {items.map((item, index) => (
          <Fragment key={item}>
            <Text>{index}</Text>
            <Text>{item}</Text>
          </Fragment>
        ))}
      </View>
    </>
  )
}
```

--------------------------------

### Get Individual Preference Value

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-background-notification-handler/README.md

Asynchronously retrieves the value of a specific preference by its key. Use the appropriate getter based on the expected data type (boolean, string, or string array).

```typescript
getBoolAsync(forKey: string): Promise<boolean>
```

```typescript
getStringAsync(forKey: string): Promise<string>
```

```typescript
getStringArrayAsync(forKey: string): Promise<string[]>
```

--------------------------------

### Run and Build Golang Daemon

Source: https://github.com/bluesky-social/social-app/blob/main/bskyweb/README.md

Commands to execute or compile the bskyweb daemon from the bskyweb directory.

```bash
# re-build and run daemon
go run ./cmd/bskyweb serve

# build and output a binary
go build -o bskyweb ./cmd/bskyweb/
```

--------------------------------

### Execute E2E test suite

Source: https://github.com/bluesky-social/social-app/blob/main/docs/testing.md

Commands to run the mock server, build the app, and execute Maestro tests in separate terminal tabs.

```bash
pnpm e2e:mock-server
```

```bash
pnpm e2e:build
```

```bash
pnpm e2e:run __e2e__
```

--------------------------------

### Platform-specific import patterns

Source: https://github.com/bluesky-social/social-app/blob/main/CLAUDE.md

Demonstrates the correct way to import platform-specific modules versus the discouraged conditional require approach.

```tsx
// CORRECT - bundler picks storage.ts or storage.web.ts automatically
import * as storage from '#/state/drafts/storage'

// WRONG - don't use require() or conditional imports for platform files
const storage = IS_NATIVE
  ? require('#/state/drafts/storage')
  : require('#/state/drafts/storage.web')
```

--------------------------------

### Using Expo Bluesky Swiss Army Utilities

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-bluesky-swiss-army/README.md

Demonstrates accessing platform info, managing audio categories, retrieving referrer data, storing preferences, and tracking component visibility.

```typescript
import {
  PlatformInfo,
  AudioCategory,
  Referrer,
  SharedPrefs,
  VisibilityView
} from 'expo-bluesky-swiss-army'

// Check for reduced motion
const isReducedMotion = PlatformInfo.getIsReducedMotionEnabled()

// Set audio category for video playback (iOS)
PlatformInfo.setAudioCategory(AudioCategory.Playback)
PlatformInfo.setAudioActive(true)

// Check how user arrived at the app
const referrer = Referrer.getReferrerInfo()
if (referrer) {
  console.log('User came from:', referrer.hostname)
}

// Store a preference
SharedPrefs.setValue('lastOpenedAt', Date.now())
SharedPrefs.setValue('hasSeenOnboarding', true)

// Track visible view
<VisibilityView
  enabled={true}
  onChangeStatus={(isActive) => {
    if (isActive) {
      // This view is now the primary visible view
      video.play()
    } else {
      video.pause()
    }
  }}
>
  <VideoPlayer />
</VisibilityView>
```

--------------------------------

### Configure Java Home Environment

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Set the JAVA_HOME variable to the required Zulu 17 JDK path in your shell configuration file.

```bash
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home
```

--------------------------------

### Gradle Build Configuration

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-receive-android-intents/README.md

This snippet shows the Gradle build configuration for the module, including version, dependencies, and SDK targets.

```gradle
android {
  compileSdk 33
  defaultConfig {
    minSdk 21
    targetSdk 34
  }
  // ... other configurations
}

dependencies {
  implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.20"
  implementation project(":expo-modules-core")
}
```

--------------------------------

### Initialize Theme from LocalStorage

Source: https://github.com/bluesky-social/social-app/blob/main/bskyweb/templates/base.html

Retrieves the user's preferred theme from localStorage and applies the corresponding CSS class to the document root.

```javascript
const theme = localStorage.getItem('ALF_THEME') if (theme) { document.documentElement.classList.add(`theme--${theme}`) }
```

--------------------------------

### Essential Development and Build Commands

Source: https://github.com/bluesky-social/social-app/blob/main/CLAUDE.md

Use these pnpm scripts for development, testing, and building. Avoid calling underlying tools directly to ensure consistency.

```bash
# Development
pnpm start              # Start Expo dev server
pnpm web                # Start web version
pnpm android            # Run on Android
pnpm ios                # Run on iOS

# Testing & Quality
# IMPORTANT: Always use these pnpm scripts, never call the underlying tools directly
pnpm test               # Run Jest tests
pnpm lint               # Run Oxlint
pnpm typecheck          # Run TypeScript type checking
pnpm prettier           # Run Prettier for code formatting

# Internationalization
# DO NOT run these commands - extraction and compilation are handled by CI
pnpm intl:extract       # Extract translation strings (nightly CI job)
pnpm intl:compile       # Compile translations for runtime (nightly CI job)

# Build
pnpm build-web          # Build web version
pnpm prebuild           # Generate native projects
```

--------------------------------

### Prebuild Native Project

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Generate native project files; required after changes to app.json or native package dependencies.

```bash
pnpm prebuild
```

--------------------------------

### GifView Instance Methods

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-bluesky-gif-view/README.md

Methods available on a GifView instance for controlling playback programmatically.

```APIDOC
## GifView Instance Methods

### Description
Methods available on a GifView instance for controlling playback programmatically. All methods are async and return a Promise.

### Methods
- **playAsync()**: Starts playback of the GIF.
- **pauseAsync()**: Pauses playback of the GIF.
- **toggleAsync()**: Toggles between playing and paused states.
```

--------------------------------

### Open Developer Menu via ADB

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Use this command to trigger the developer menu on Android devices or emulators connected via USB.

```bash
adb shell input keyevent 82
```

--------------------------------

### Basic Screen Layout

Source: https://github.com/bluesky-social/social-app/blob/main/src/components/Layout/README.md

Demonstrates the fundamental structure of a screen using Outer, Header, and Content components. This is the standard approach for new screens.

```tsx
<Outer>
  <Header>...</Header>
  <Content>...</Content>
</Outer>
```

--------------------------------

### Configure Android Home Environment

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Set the ANDROID_HOME variable to the location of your Android SDK.

```bash
export ANDROID_HOME=/Users/<your_username>/Library/Android/sdk
```

--------------------------------

### Project Directory Structure

Source: https://github.com/bluesky-social/social-app/blob/main/CLAUDE.md

Visual representation of the source directory layout for the application.

```text
src/
├── alf/                    # Design system (ALF) - themes, atoms, tokens
├── components/             # Shared UI components (Button, Dialog, Menu, etc.)
├── screens/                # Full-page screen components (newer pattern)
├── features/               # Macro-features that bridge components/screens
├── view/
│   ├── screens/            # Full-page screens (legacy location)
│   ├── com/                # Reusable view components
│   └── shell/              # App shell (navigation bars, tabs)
├── state/
│   ├── queries/            # TanStack Query hooks
│   ├── preferences/        # User preferences (React Context)
│   ├── session/            # Authentication state
│   └── persisted/          # Persistent storage layer
├── lib/                    # Utilities, constants, helpers
├── locale/                 # i18n configuration and language files
└── Navigation.tsx          # Main navigation configuration
```

--------------------------------

### PlatformInfo

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-bluesky-swiss-army/README.md

Functions for accessing platform-specific accessibility settings and audio session management.

```APIDOC
## PlatformInfo

### getIsReducedMotionEnabled()
Returns whether the user has enabled reduced motion in system settings.

### setAudioActive(active: boolean)
(iOS only) Controls whether the app's audio session is active.

### setAudioCategory(category: AudioCategory)
(iOS only) Sets the AVAudioSession category (Playback or Ambient).
```

--------------------------------

### Compose Basic Header

Source: https://github.com/bluesky-social/social-app/blob/main/src/components/Layout/README.md

Illustrates how to construct a standard header with a back button, title, optional subtitle, and a slot for additional elements. Ensure the Slot component is used for balance and correct spacing.

```tsx
<Layout.Header.Outer>
  <Layout.Header.BackButton /> {/* or <Layout.Header.MenuButton /> */}

  <Layout.Header.Content>
    <Layout.Header.TitleText>Account</Layout.Header.TitleText>

    {/* Optional subtitle */}
    <Layout.Header.SubtitleText>Settings for @esb.lol</Layout.Header.SubtitleText>
  </Layout.Header.Content>

  <Layout.Header.Slot />
</Layout.Header.Outer>
```

--------------------------------

### Configure Android port forwarding

Source: https://github.com/bluesky-social/social-app/blob/main/docs/testing.md

Allow the device to access the mock server running on port 3000.

```bash
adb reverse tcp:3000 tcp:3000
```

--------------------------------

### Platform-specific file extension patterns

Source: https://github.com/bluesky-social/social-app/blob/main/CLAUDE.md

File naming conventions for platform-specific implementations that the bundler resolves automatically.

```text
Component.tsx          # Shared/default
Component.web.tsx      # Web-only
Component.native.tsx   # iOS + Android
Component.ios.tsx      # iOS-only
Component.android.tsx  # Android-only
```

--------------------------------

### Prefetching GIFs with GifView

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-bluesky-gif-view/README.md

Demonstrates how to prefetch multiple GIFs into the cache using the static prefetchAsync method. Note that this is not supported on the web platform.

```typescript
// Prefetch GIFs into the cache (not supported on web)
await GifView.prefetchAsync([
  'https://example.com/gif1.gif',
  'https://example.com/gif2.gif'
])
```

--------------------------------

### Use Import Aliases

Source: https://github.com/bluesky-social/social-app/blob/main/CLAUDE.md

Use the #/ alias for absolute imports to maintain consistent path resolution.

```tsx
// Good
import {useSession} from '#/state/session'
import {atoms as a, useTheme} from '#/alf'
import {Button} from '#/components/Button'

// Avoid
import {useSession} from '../../../state/session'
```

--------------------------------

### Apply ALF atoms and theme styles

Source: https://github.com/bluesky-social/social-app/blob/main/CLAUDE.md

Demonstrates the standard pattern for applying static atoms and theme-aware styles to a View component.

```tsx
import {atoms as a, useTheme} from '#/alf'

const t = useTheme()
<View style={[a.flex_row, a.gap_md, a.p_lg, t.atoms.bg]} />
```

--------------------------------

### Core Methods

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-background-notification-handler/README.md

These methods allow you to retrieve and set notification preferences. They are asynchronous and return Promises.

```APIDOC
## Core Methods

### Description
Provides methods to interact with stored notification preferences, including retrieving all preferences, getting individual values, and setting individual values.

### Methods

#### Get All Preferences

- **`getAllPrefsAsync(): Promise<BackgroundNotificationHandlerPreferences>`**
  Retrieves all currently stored notification preferences.

#### Get Individual Values

- **`getBoolAsync(forKey: string): Promise<boolean>`**
  Retrieves a boolean preference by its key.
- **`getStringAsync(forKey: string): Promise<string>`**
  Retrieves a string preference by its key.
- **`getStringArrayAsync(forKey: string): Promise<string[]>`**
  Retrieves a string array preference by its key.

#### Set Individual Values

- **`setBoolAsync(forKey: string, value: boolean): Promise<void>`**
  Sets a boolean preference by its key.
- **`setStringAsync(forKey: string, value: string): Promise<void>`**
  Sets a string preference by its key.
- **`setStringArrayAsync(forKey: string, value: string[]): Promise<void>`**
  Sets a string array preference by its key.

#### Array Manipulation

- **`addToStringArrayAsync(forKey: string, value: string): Promise<void>`**
  Adds a single string to a string array preference.
- **`removeFromStringArrayAsync(forKey: string, value: string): Promise<void>`**
  Removes a single string from a string array preference.
- **`addManyToStringArrayAsync(forKey: string, value: string[]): Promise<void>`**
  Adds multiple strings to a string array preference.
- **`removeManyFromStringArrayAsync(forKey: string, value: string[]): Promise<void>`**
  Removes multiple strings from a string array preference.

#### Badge Count (iOS Only)

- **`setBadgeCountAsync(count: number): Promise<void>`**
  Sets the application badge count on iOS.
```

--------------------------------

### Docblock Usage for Components

Source: https://github.com/bluesky-social/social-app/blob/main/CLAUDE.md

Use docblock syntax for documenting types and functions to ensure they surface correctly in editor tooltips.

```tsx
type DateFieldProps = {
  /**
   * An empty string renders the placeholder and opens the picker at today (or
   * maximumDate, if earlier).
   */
  value: string | Date
}

/**
 * Date-only input. Accepts a string in the format YYYY-MM-DD, or a Date object.
 */
export function DateField() {}
```

--------------------------------

### Basic Usage of GifView Component

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-bluesky-gif-view/README.md

Demonstrates how to use the GifView component in a React Native component. Includes setting the source, placeholder, autoplay, and handling player state changes.

```tsx
import {GifView} from 'expo-bluesky-gif-view'

function MyComponent() {
  const gifRef = React.useRef<GifView>(null)

  return (
    <GifView
      source="https://example.com/animated.gif"
      placeholderSource="https://example.com/thumbnail.jpg"
      autoplay={true}
      onPlayerStateChange={(event) => {
        console.log('Playing:', event.nativeEvent.isPlaying)
        console.log('Loaded:', event.nativeEvent.isLoaded)
      }}
      ref={gifRef}
    />
  )
}
```

--------------------------------

### Basic Bottom Sheet Usage

Source: https://github.com/bluesky-social/social-app/blob/main/modules/bottom-sheet/README.md

Demonstrates how to set up and use a basic bottom sheet in your application. Requires `BottomSheetProvider` at the app root and `BottomSheetOutlet` to render sheets.

```tsx
import {BottomSheet, BottomSheetProvider, BottomSheetOutlet} from '@modules/bottom-sheet'

// In your app root:
function App() {
  return (
    <BottomSheetProvider>
      <YourApp />
      <BottomSheetOutlet />
    </BottomSheetProvider>
  )
}

// In a component:
function MyComponent() {
  const sheetRef = useRef<BottomSheet>(null)
  
  const openSheet = () => {
    sheetRef.current?.present()
  }
  
  const closeSheet = () => {
    sheetRef.current?.dismiss()
  }
  
  return (
    <>
      <Button onPress={openSheet} title="Open Sheet" />
      
      <BottomSheet
        ref={sheetRef}
        cornerRadius={16}
        backgroundColor="white"
        onStateChange={(e) => console.log(e.nativeEvent.state)}
      >
        <View style={{padding: 20}}>
          <Text>Sheet content</Text>
          <Button onPress={closeSheet} title="Close" />
        </View>
      </BottomSheet>
    </>
  )
}
```

--------------------------------

### GifView Static Methods

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-bluesky-gif-view/README.md

Static methods available on the GifView class for prefetching content.

```APIDOC
## GifView Static Methods

### Description
Static methods available on the GifView class for prefetching content.

### Method
- **prefetchAsync(urls: string[])**: Prefetches GIFs into the cache (not supported on web).
```

--------------------------------

### Include Template Blocks

Source: https://github.com/bluesky-social/social-app/blob/main/bskyweb/templates/base.html

Includes external scripts and defines optional blocks for head and body content.

```html
{% include "scripts.html" %}        {% if noindex %}{% endif %}     {% block html_head_extra -%}{%- endblock %} {%- block body_all %}
```

```html
{% block noscript_extra %}{% endblock %} {% endblock -%}
```

--------------------------------

### Localization Build

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Command to rebuild localization files after modifying message translation files.

```bash
pnpm intl:build
```

--------------------------------

### Run i18n extraction and compilation commands

Source: https://github.com/bluesky-social/social-app/blob/main/CLAUDE.md

Use these commands to manage locale files. These are handled automatically by the CI job.

```bash
# DO NOT run these commands - extraction and compilation are handled by a nightly CI job
pnpm intl:extract    # Extract new strings to locale files
pnpm intl:compile    # Compile translations for runtime
```

--------------------------------

### Full Page Layout Styling

Source: https://github.com/bluesky-social/social-app/blob/main/web/index.html

Ensures the html, body, and root element take up the full viewport height and width, using flexbox for layout.

```css
html, body, #root {
  display: flex;
  flex: 1 0 auto;
  min-height: 100%;
  width: 100%;
}
```

--------------------------------

### iOS Dependencies for expo-bluesky-gif-view

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-bluesky-gif-view/README.md

Specifies the required SDWebImage and SDWebImageWebPCoder dependencies for the iOS implementation of the module.

```ruby
# ios/ExpoBlueskyGifView.podspec
s.dependency 'SDWebImage', '~> 5.21.0'
s.dependency 'SDWebImageWebPCoder', '~> 0.14.6'
```

--------------------------------

### Configure Splash Screen Styles

Source: https://github.com/bluesky-social/social-app/blob/main/bskyweb/templates/base.html

Defines font faces and layout styles required for the initial splash screen rendering.

```css
/** * Minimum styles required to render splash. * * ALL OTHER STYLES BELONG IN `src/style.css` * * THIS NEEDS TO BE DUPLICATED IN `bskyweb/templates/base.html` */ @font-face { font-family: 'InterVariable'; src: url("{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2") format('woff2'); font-weight: 300 1000; font-style: normal; font-display: swap; } @font-face { font-family: 'InterVariableItalic'; src: url("{{ staticCDNHost }}/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2") format('woff2'); font-weight: 300 1000; font-style: italic; font-display: swap; } html, body { margin: 0px; padding: 0px; font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; /* Platform-specific reset */ -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-overflow-style: scrollbar; font-synthesis-weight: none; } :root { --text: black; --background: white; --backgroundLight: #e2e7ee; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --text: white; --background: black; --backgroundLight: #232e3e; } } html, body, #root { display: flex; flex: 1 0 auto; min-height: 100%; width: 100%; } html.theme--light, html.theme--light body, html.theme--light #root { background-color: white; --text: black; --background: white; --backgroundLight: #DCE2EA; } html.theme--dark, html.theme--dark body, html.theme--dark #root { color-scheme: dark; background-color: black; --text: white; --background: black; --backgroundLight: #232E3E; } html.theme--dim, html.theme--dim body, html.theme--dim #root { color-scheme: dark; background-color: #151D28; --text: white; --background: #151D28; --backgroundLight: #2C3A4E; } #splash { display: flex; position: fixed; top: 0; bottom: 0; left: 0; right: 0; align-items: center; justify-content: center; } #splash svg { position: relative; top: -50px; width: 100px; } /** * We need these styles to prevent shifting due to scrollbar show/hide on * OSs that have them enabled by default. This also handles cases where the * screen wouldn't otherwise scroll, and therefore hide the scrollbar and * shift the content, by forcing the page to show a scrollbar. */ body { width: 100%; overflow-y: scroll; }
```

--------------------------------

### Apply Theme Colors with Atoms

Source: https://github.com/bluesky-social/social-app/blob/main/src/alf/README.md

Combine `atoms` with theme-aware styles using `useTheme`. The `t.atoms.bg` applies a background color from the theme.

```tsx
const t = useTheme()

<View style={[atoms.flex_row, t.atoms.bg]} />
```

--------------------------------

### Configure Test DID Environment Variable

Source: https://github.com/bluesky-social/social-app/blob/main/scripts/push-notification/README.md

Set the DID environment variable to avoid passing it repeatedly to the send script.

```bash
export BLUESKY_TEST_DID=did:plc:yourdidhere

./send.sh like
./send.sh chat-message
./send.sh follow
```

--------------------------------

### Referrer

Source: https://github.com/bluesky-social/social-app/blob/main/modules/expo-bluesky-swiss-army/README.md

Functions for tracking how users arrive at the app from external sources.

```APIDOC
## Referrer

### getReferrerInfo()
Returns information about the source that launched the app, returning an object with {referrer, hostname} or null.

### getGooglePlayReferrerInfoAsync()
(Android only) Retrieves Google Play install referrer information including timestamps.
```

--------------------------------

### Conditional Rendering with Breakpoints

Source: https://github.com/bluesky-social/social-app/blob/main/src/alf/README.md

Utilize `useBreakpoints` to conditionally render UI elements based on screen size. `b.gtMobile` checks if the screen is larger than mobile.

```tsx
const b = useBreakpoints()

if (b.gtMobile) {
  // render tablet or desktop UI
}
```

--------------------------------

### Upload Android Sourcemaps to Sentry

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Uploads JavaScript bundles and source maps to Sentry for Android releases using the Sentry CLI.

```bash
node_modules/@sentry/cli/bin/sentry-cli releases \
files <release name> \
upload-sourcemaps \
--dist <Android Update ID> \
--rewrite \
dist/bundles/index.android.bundle dist/bundles/android-<hash>.map
```

--------------------------------

### Manage Cocoapods via Homebrew

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Check for and remove existing Homebrew-installed Cocoapods to avoid conflicts.

```bash
brew info cocoapods
brew remove cocoapods
```

--------------------------------

### Clean iOS Build Directory

Source: https://github.com/bluesky-social/social-app/blob/main/docs/build.md

Remove the existing iOS directory to resolve build issues.

```bash
rm -rf ios
```