Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/praveenjuge/teak/llms.txt

Use this file to discover all available pages before exploring further.

The Teak mobile app brings your personal knowledge hub to iOS and Android devices with native performance and mobile-first features.

Overview

Built with Expo 55 and React Native, the mobile app provides a seamless native experience for capturing and accessing your ideas on the go.

Technology Stack

  • Expo 55 with EAS
  • React Native 0.83
  • Expo Router for navigation
  • Convex for real-time sync

Native Features

  • Audio recording
  • Camera & photo picker
  • File uploads
  • Haptic feedback

Key Features

Native Capture Methods

The mobile app offers multiple native ways to capture content:
Quick text notes with a native keyboard experience
  • Rich text support
  • Auto-save drafts
  • Offline support
Record voice memos and ideas with high-quality audio
  • High-quality audio recording (expo-audio)
  • Real-time duration display
  • Automatic transcription via AI
  • Background recording support
import { useAudioRecorder, RecordingPresets } from "expo-audio";

const audioRecorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
Capture or select media from your device
  • Camera integration (expo-image-picker)
  • Photo library access
  • Video uploads
  • EXIF data preservation
Upload PDFs and other documents
  • File picker integration (expo-document-picker)
  • Multiple file types supported
  • Automatic metadata extraction

Share Extension

Share content to Teak from any iOS/Android app:
// app/incoming-share.tsx
// Handles shared content from other apps

Share Extension Support

Share links, text, images, and files directly to Teak from:
  • Safari/Chrome
  • Social media apps
  • Notes apps
  • Photo gallery
  • Any app with share functionality

Real-Time Sync

All cards sync in real-time with the Convex backend:
  • Instant updates across devices
  • Offline support with local caching
  • Automatic conflict resolution

Installation & Setup

Prerequisites

  • Node.js 18+ or Bun
  • Expo CLI
  • iOS Simulator (for iOS development)
  • Android Studio (for Android development)
  • EAS CLI (for building)

Development

# Install dependencies
bun install

# Start Expo development server
bun run dev

# Or start mobile + Convex
bun run dev:mobile

Building for Production

1

Configure EAS

Set up your EAS Build credentials:
eas build:configure
2

Build iOS

Build for iOS (local or cloud):
# Cloud build
eas build --platform ios

# Local build
bun run build:local
3

Submit to App Store

Submit your build to the App Store:
bun run build:submit

App Store Metadata

Manage App Store metadata directly from the CLI:
# Pull current metadata
bun run metadata:pull

# Push updated metadata
bun run metadata:push

Platform-Specific Features

iOS

Apple Authentication

Native Sign in with Apple integration via expo-apple-authentication

Haptic Feedback

Native haptic feedback for interactions using expo-haptics

Share Sheet

Native iOS share sheet integration via expo-sharing

Secure Storage

Keychain integration via expo-secure-store for sensitive data

Android

Share Intent

Native Android share intent handling

File Access

Native file system access via expo-file-system

Network Detection

Network status monitoring via expo-network

Clipboard

System clipboard integration via expo-clipboard

Architecture

app/
├── (auth)/              # Authentication flow
│   ├── welcome.tsx      # Welcome screen
│   ├── sign-in.tsx      # Sign in
│   └── sign-up.tsx      # Sign up
├── (tabs)/              # Main tab navigation
│   ├── (home)/          # Home feed
│   │   ├── index.tsx    # Cards grid
│   │   └── card/[id].tsx # Card detail
│   ├── add/             # Add content
│   │   ├── index.tsx    # Add options
│   │   ├── text.tsx     # Text input
│   │   ├── record.tsx   # Audio recording
│   │   └── upload.tsx   # File upload
│   └── settings/        # Settings
│       └── index.tsx    # Settings screen
├── incoming-share.tsx   # Share extension handler
└── _layout.tsx          # Root layout

Component Structure

  • Expo UI Components: Native Swift UI components via @expo/ui
  • Icons: SF Symbols via expo-symbols for iOS, Material Icons for Android
  • Cards Grid: Virtualized list for performance
  • Native Modals: Platform-specific modal presentations

State Management

  • Convex queries for server state
  • React hooks for local state
  • AsyncStorage for persistent local data
  • Secure Store for sensitive data

Native Modules

Audio Recording

import { 
  useAudioRecorder, 
  RecordingPresets,
  requestRecordingPermissionsAsync 
} from "expo-audio";

// Request permissions
const { granted } = await requestRecordingPermissionsAsync();

// Start recording
const recorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
await recorder.prepareToRecordAsync();
recorder.record();

Image & Video

import * as ImagePicker from "expo-image-picker";

// Pick from camera roll
const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.All,
  allowsEditing: true,
  quality: 1,
});

// Take photo
const photo = await ImagePicker.launchCameraAsync({
  allowsEditing: true,
  quality: 1,
});

File Upload

import * as DocumentPicker from "expo-document-picker";

const result = await DocumentPicker.getDocumentAsync({
  type: "*/*",
  copyToCacheDirectory: true,
});

Haptic Feedback

import * as Haptics from "expo-haptics";

// Success feedback
await Haptics.notificationAsync(
  Haptics.NotificationFeedbackType.Success
);

// Impact feedback
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

Performance Optimization

Virtualized Lists

Use @react-native/virtualized-lists for efficient rendering:
import { FlashList } from "@shopify/flash-list";

// Efficient card list rendering
<FlashList
  data={cards}
  renderItem={renderCard}
  estimatedItemSize={200}
/>

Image Optimization

  • Automatic image resizing before upload
  • Cached image loading
  • Progressive image loading

Offline Support

  • Local data caching with AsyncStorage
  • Optimistic updates for better UX
  • Background sync when online

Deployment

EAS Build

The mobile app uses EAS Build for cloud builds:
{
  "build": {
    "production": {
      "ios": {
        "buildConfiguration": "Release"
      },
      "android": {
        "buildType": "apk"
      }
    }
  }
}

App Store Submission

# Submit iOS build
eas submit --platform ios

# Submit Android build
eas submit --platform android

Testing

Unit Tests

bun run test

E2E Testing

Use Expo’s testing tools for end-to-end testing:
import { render, fireEvent } from "@testing-library/react-native";

Learn More

Backend

Learn about the Convex backend

File Operations

Configure file upload handling

Expo

Official Expo documentation

React Native

Official React Native docs

Build docs developers (and LLMs) love