💄 (expo): UX Enhancements

[Arklaum]

So this is a list of things I aim to put into this PR. I am using this space to track/show my progress. I am currently working on: Done!

Tasks

• 1. Different opacities when tapped (also try out squeeze on tap)
• 2. Squircles (iOS only)
• 3. expo-image + faster-image -> react-native-turbo-image. (The double page reader does work properly too)
• 4. Fix gradients + borders + drop shadows
• 5. Fix "sharp" linear gradient inside reader
• 6. react-native-reanimated-carousel: rounded corners + dark mode doesn't like 0.99
• 7. Browse > Books: The back button is tiny
• 8. Weird corner issues
• 9. Add Android drop shadows
• 10. Use full height for image based reader on iPad + use full height when zoomed in.

Issues / Notes for each task (numbered)

• 2 Important: To use squircles you must add class name squircle whenever using rounded corners. Or add style={{borderCurve: 'continuous', overflow: 'hidden'}}.
• 2 Adding style borderCurve: 'continuous' (or class name squircle) often requires removing borderRadius (rounded-xx), saving then adding it back to see the update.
• 2 There may be a few fixable visual bugs added, since I did a find and replace of rounded- to squircle rounded- where squircle applies the style borderCurve: 'continuous' AND overflow: 'hidden'. I found and fixed only one: where rounded-xl was added for seemingly no use, but the new overflow hidden style caused issues:

Example Bug before and after fixing

Example.Bug.mov

I have since fixed the OPDS corner rounding amount too

• 3 There's a few places, specifically StackedEffectThumbnail.tsx, PublicationFeed.tsx, PublicationGroup.tsx and auth.tsx that I have no idea how to find and test.
• 4 Android dark mode: flickering issues at the edge of images when swiping on carousel due to the gradients (existing issue and I couldn't fix it)
• 4 iOS dark mode (maybe Android too but the gradient issue won't let me check): there is a nearly imperceptible flicker when swiping on carousel due to the thinness of the border. It can only really be seen if you swipe the carousel slowly while looking directly at the edge. Maybe I could boost the thickness up a tiny bit if it's really an issue.

Reasoning / Benefits

I have done the image library change, it took longer than I thought because I decided to play around with various libraries. Using react-native-turbo-image I have turned on downscaling to 1.5x the rendered width for everything except in ImageBasedReader.tsx, where the Downscaling toggle can can enable it. This gives the following benefit:

Example 1: Images from "Continue Reading"

Before	After	(Why I didn't use a perfect 1x: it's a bit blurry)
Note: Some parts of "Before" might look higher res, but since the image is small it was not noticeable. The aliasing was though so obviously I fixed that.

Example 2: Images from "Search"

Before	After

Example 3: The `Downscaling` toggle

Before	After
Can be helpful if images have a lot of aliasing / very large. Maybe it doesn't look like much but those stripey stars flicker when you move the image around if you don't use downscaling. The disadvantage of using it is zooming is not as sharp. I set it as 1.2x because it seems the best at removing weird visual artifacts.

I have also made the image reader span the whole page, meaning zooming in looks better, and also allows an iPad to use the full space. (It works fine on Android too):

Example 1: iPhone zoom

Before	After
Ignore the home bar on the left image, it was a temporary bar. Works just as well on Android too!

Example 2: iPad

Before	After
Similarly for landscape too. This time the bar and multitasking dots were permanent but now I've hidden them.

[aaronleopold]

There's a few places, specifically StackedEffectThumbnail.tsx, PublicationFeed.tsx, PublicationGroup.tsx and auth.tsx that I have no idea how to find and test

The first one was originally used in the Browse tab content, but was removed. I never cleaned up the component in case I decided to bring it back for anything, but you're welcome to just remove it if you'd like. It's in git so that's enough as far as archiving goes.

The others you can see if you enable OPDS for your saved server and browse the catalog/feeds. The image in auth.tsx for OPDS, though, is pulled from whatever the server as its logo (like the favicon, e.g. here).

Also the downscaling examples you gave look great!

[Arklaum]

I think I'm done. I still couldn't find just auth.tsx, and I temporarily replaced the image component with a react-native Image component, but if it is just a URL then I can simply change Image to TurboImage. All related issues are in the previous comment.

There are a few unrelated issues I've documented, and I will maybe look into a few at a later date:

Reader Issues:

• 1. If using double page mode: close the reader then reopen the reader. It will sometimes be a different set.
• 2. Turning on double page mode takes you to twice the page you were just on. (and vice versa)
• 3. Reader>Preferences: Global and Book settings have different heights for the gorhom sheet.
• 4. the book swipe direction for RTL is still LTR and so is the image gallery swipe direction, except: on a double page spread the two pages are in the correct order.
• 5. Using RTL double page, the image gallery page numbers are confusing. e.g. it says 144-143 which is just weird. I think the page numbers should just be under each, or no hyphen and have a bigger space between the two numbers, or say 143-144.
• 6 Switching from LTR to RTL sends you to the other side of the book (and vice versa)
• 7. Zoom in + don't be at the edge then page turn by tapping. Some of the old page will be on the screen.
• 8. Zoom in at e.g. RHS, then move over to the LHS then zoom out w/ double tap. The page will often no longer be centered
• 9. Tap sides to navigate for last page causes crash (requested index is out of range). Similarly for the first page. edit: I have just fixed this, but the "Next Up" should be added for when you tap too.

OPDS Issues:

• 10. OPDS click view all: it doesn't load any images that aren't already cached. It's PublicationGroup.tsx edit: (8 Oct) it seems fine now?

Login Issues:

• 11. Use Login mode, tap OPDS: it won't do anything.
• 12. Can't change from one auth mode to another. Specifically from Basic or Token to anything else.
• 13. Login mode seems to not prompt to log in every time. e.g. close the app and reopen and I can still enter without typing in a username + password. N/A
• 14. Rotate an iPad twice then the server card height is tiny
• 15. Have OPDS disabled, enable it, then the server card height is tiny
• 16. "Failed to connect to server" error message doesn't disappear if you fix the error and click check connection and it passes.
• 17. The url box doesn't handle long URLs well once clicking off the box.

General UX Issues:

• 18. Different file icons when in Files vs Files>Books
• 19. Remove search horizontal scroll padding for edge to edge scrolling
• 20. Remove filter horizontal scroll padding (e.g. in Browse>Books)
• 21. Remove OPDS publication group horizontal scroll padding for edge to edge scrolling (note: maybe the design should also be updated so that edge to edge doesn't look weird)
• 22. In the Browse screen: the vertical location of the "Books" chevron is off.
• 23. Sometimes the status bar is just gone. edit: if you enter a book, force close the app then open the app -> no status bar.
• 24. I'd like to implement a setting for changing thumbnail image ratios. They're 2:3 right now but almost all my books are 1:√2.

[aaronleopold]

@Arklaum Thank you so much! I'll have time to give the changes a review most likely tomorrow, and I'll hold off on replying to your list until then. I really appreciate all your work and the time you've given to record all those bugs! One thing I'll respond to quickly though:

I'd like to implement a setting for changing thumbnail image ratios. They're 2:3 right now but almost all my books are 1:√2.

Totally cool by me, also:

Login mode seems to not prompt to log in every time. e.g. close the app and reopen and I can still enter without typing in a username + password.

This is expected, unless I am misunderstanding the problem. By logging into Stump you still obtain an access and refresh token pair. Stump won't store credentials for the Login configuration but it will securely store those tokens and try and refresh it accordingly. If it can't refresh in time, then you'd have to log in again

[Arklaum]

This is expected, unless I am misunderstanding the problem.

Oh okay, my understanding was from this:

https://www.stumpapp.dev/guides/mobile/servers#authentication

"you will be prompted to log in each time you try to access the server"

Edit: Oh I guess I didn't read it all: "you will only be prompted to log in when the token expires"

Also by close I mean like force quit the app. But surely the point of prompting login is so that other users on the same device can easily log in? Or to lock off content that other users shouldn't access? Which should even include just swiping back out of the server.

Edit 2: I forgot to

• remove const colors = useColors() from a few files.

I'll do that tomorrow

[aaronleopold]

"you will be prompted to log in each time you try to access the server"

Edit: Oh I guess I didn't read it all: "you will only be prompted to log in when the token expires"

Yeah that is a bit misleading, I'll make a note to rephrase the first part to be more aligned with the second. I think I was probably thinking of OPDS when I wrote that first part

But surely the point of prompting login is so that other users on the same device can easily log in?

I originally added it so that folks who dislike when applications store credentials have an option to use the app without providing any for storage. I can't speak for everyone, but my passwords are LONG so I personally would hate to have to enter it, or even just use my password manager honestly, each time I go into the server. I do think there should be a little menu in the home tab probably to log you out

[aaronleopold]

This looks great!! I had one question but honestly I poked around locally for a good bit and didn't notice any funk at all with scaling so feel free to disregard

[aaronleopold]

I've noticed stretch a few times now. Won't this potentially affect the original aspect ratio and warp the image? Or does the resize below offset that?

[Arklaum]

It does stretch it but you won't notice if the thumbnail aspect ratio matches the set aspect ratio (currently only 2:3). Previously with faster image they were all fill which is turbo image stretch

I could change it, but I think it looks nicer because most of my books are 1:sqrt(2) with some 2:3 and they're close enough that contain looks bad and far enough that cover looks bad.

I was thinking of adding some checks where if the ratio was very different it would use contain. I think Apple Music does something like that.

[aaronleopold]

Thank you for also cleaning up the other image libraries!

[aaronleopold]

I'm going to create a draft issue in that mobile project to note the bugs you've found, but a few notes/questions:

7. Different file icons when in Files vs Files>Books

I'm not sure I understand this one. There are different icons for file types (e.g. epub, pdf, zip) and folder icons, and if a file is registered in the database it pulls the thumbnail. Is this what you mean?

13. OPDS click view all: it doesn't load any images that aren't already cached. It's `PublicationGroup.tsx` (not a new issue)

I observed this as well, but I coincidentally left the app running and came back to them loaded. I checked the server logs and it was making the OPDS thumbs requests, so I think it's just slow? Either way, definitely an issue to look into.

22. Sometimes the status bar is just gone

Is this on Android? iOS? Both? I haven't seen this one, but I'll note it down

---

Also very unrelated to this PR, I was testing on a simulator running iOS 26 and found some interesting UI quirks (read: bugs). Not super important, but figured you'd be interested

Screenshots

[Arklaum]

• 7. I should've said folder not file. Also only on light mode. The folders have different shades of blue.
• 22. iOS only. I couldn't figure out why but I've seen it quite a few times now.

---

Oh I've actually seen those UI bugs when I briefly tried Xcode 26. I'm definitely interested in getting that UI style working.

[aaronleopold]

I didn't have time to create individual items so I just linked back to your list. I'll merge this in now, thanks again!!

[Arklaum]

Final comment for the project board:

These were just fixed:
Mobile App Alpha (view)
Mobile App Alpha (view)

And two more were just fixed on iOS:
Mobile App Alpha (view)
Mobile App Alpha (view)
but will be fixed on Android in my next PR.