LesionAnnotation

React Native app for annotating a photo by tapping on it to place markers and comments.

Features

• Full-screen photo display
• Tap to place a marker (rounded white square)
• Floating input panel with blur effect for entering comments
• Validate or cancel annotations
• Label displayed below the marker with blur background
• Keyboard-aware layout (KeyboardAvoidingView)
• SF Pro Display font

Tech stack

• React Native 0.84
• TypeScript
• react-native-safe-area-context
• @danielsaraldi/react-native-blur-view

Project structure

src/
  AnnotationScreen.tsx          # Main screen
  components/
    Marker.tsx                  # Marker + label
    AnnotationInput.tsx         # Input panel with blur
assets/
  bgImage.jpg                  # Background image
  fonts/                        # SF Pro Display (Thin, Light, Regular, Medium, Semibold, Bold)

Build and run

Prerequisites

• Node.js >= 22.11
• React Native CLI
• Android Studio / Xcode

Install dependencies

npm install

Android

npm run android

iOS

cd ios && pod install && cd ..
npm run ios

Usage

1. Launch the app
2. Tap on the photo to place a marker
3. Enter a comment in the text field
4. Press Ok to confirm (disabled when the field is empty)
5. Press Cancel to dismiss
6. Repeat to add more annotations