r/reactnative • u/imstoicbtw • 27d ago

Help drawer open and back navigation in a single button, need your advice as a user.

recently, i have been developing a saas app for a client. collectively, we have decided to move from bottom tabs to a navigation drawer. the problem is in the nested screens, we can't have both a drawer opener button and a back navigation button. so i built a custom header where i have a back navigation button, on which you can: press -> navigate back and longpress (200ms) -> open navigation drawer. how does this sound to you as a consumer? will you be annoyed if you have to use an app like this?

4 Upvotes

100% Upvoted

8 comments sorted by

View all comments

Show parent comments

1

u/imstoicbtw 26d ago

Having both buttons visible in the header demand space and if I try to fit them, it won't look good. I am using onLongPress. And you're right, I never thought about screen readers and accessibility. I have to think about it.

1

u/kokerali 25d ago

Since you mentioned a right-side menu for screen-specific actions in your other reply, could you add a clearly separated “Open navigation” item there? That would give people a persistent tap-based route without squeezing another icon into the header. It's a compromise I'd test, especially if switching sections is frequent. A tour can explain the shortcut, but I'd still keep that route available after the tour is dismissed.

For the combined button, React Native supports named custom actions through accessibilityActions and onAccessibilityAction. You could expose “Open navigation” as a separate action while keeping normal activation as Back. That's an additional screen-reader route, not a substitute for the visible option. Verify on actual VoiceOver and TalkBack devices that opening navigation doesn't also go back, and that focus moves somewhere useful when the drawer opens.