Skip to content

Conversation

codelove77
Copy link
Contributor

Closes #597

Description

This PR adds comprehensive PDF support to the Karakeep mobile app, addressing the user's request for better PDF accessibility on mobile devices. Users can now view PDFs directly within the app and open them in their preferred external PDF reader.

Changes

🎯 Core Features

  • In-app PDF viewing: PDFs now render directly within the bookmark detail view using react-native-pdf
  • External PDF opening: Added a globe button to open PDFs in the system's default PDF viewer
  • Authentication support: PDF viewer properly handles authentication headers for secure assets
  • Platform-specific handling: Optimized for both iOS (openDocument) and Android (actionViewIntent)

🎨 User Experience

  • Loading indicators while PDFs download
  • User-friendly error messages for network issues or authentication failures
  • Automatic cleanup of temporary files after 60 seconds
  • Proper filename preservation when opening externally
  • Dark mode header styling fixed for better visibility

🔧 Technical Implementation

  • Added react-native-pdf dependency for PDF rendering
  • Created dedicated PDFViewer component with proper error handling and memory management
  • Integrated seamlessly with existing asset display logic
  • Follows established codebase patterns for resource management

Screenshots

Screenshots will be added after PR creation

Testing

  • Tested PDF viewing on iOS simulator
  • Tested PDF viewing on Android emulator
  • Verified external opening works on both platforms
  • Tested error handling (network failures, auth issues)
  • Verified temporary file cleanup
  • Tested with various PDF sizes and types
  • Dark mode functionality verified

Implementation Notes

  • The implementation follows existing patterns in the codebase for asset handling
  • Memory management is handled through proper cleanup in useEffect
  • The feature gracefully degrades if PDF viewer is not available on the device
  • External opening respects the original filename when available

Checklist

  • Code follows project style guidelines
  • Self-review completed
  • No console.log statements left in code
  • TypeScript types are properly defined
  • Changes work on both iOS and Android
  • No breaking changes to existing functionality

codelove77 and others added 3 commits June 2, 2025 14:02
Add react-native-pdf package to enable PDF viewing functionality
in the mobile app. This will be used to display PDF bookmarks
directly within the app.

Part of karakeep-app#597

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Add a dedicated PDFViewer component that handles downloading and
displaying PDF assets with proper authentication headers. Features
include:

- Download progress indication
- Error handling with user-friendly messages
- Automatic cleanup of temporary files
- Proper memory management to prevent leaks
- Content type validation for PDF files

Part of karakeep-app#597

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Integrate the PDFViewer component to display PDF bookmarks inline.
When a bookmark is a PDF asset, it now renders using the dedicated
PDF viewer instead of treating it as an image.

Also adds external PDF opening functionality with platform-specific
handling for iOS and Android, proper filename handling, and temporary
file cleanup.

Additionally fixes dark mode styling for the navigation header to ensure
proper contrast in both light and dark themes.

Part of karakeep-app#597

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@codelove77
Copy link
Contributor Author

codelove77 commented Jun 2, 2025

iOS:

Inline View
IMG_3849 2

Native "Intent" View (on globe pressed)
IMG_3850

@codelove77
Copy link
Contributor Author

codelove77 commented Jun 2, 2025

Android

Inline detail view
android-pdf-current

After Globe (uses intent)
android-pdf-intent

@MohamedBassem MohamedBassem merged commit 0fde108 into karakeep-app:main Jun 8, 2025
5 checks passed
@MohamedBassem
Copy link
Collaborator

Thanks for the PR! I reverted the opening externally part because I'm planning to implement it more generically later.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request] Download for PDF and images on Android app
2 participants