Skip to main content
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