Skip to content

README.md

Latest commit

 

History

History
69 lines (51 loc) · 1.35 KB

README.md

File metadata and controls

69 lines (51 loc) · 1.35 KB

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