RNNv2 CustomBackButton leaves a gap on the Nav Bar

Question

I have made a custom back button component simply to pop up an alert to the user on certain screens where they may be changing data for an entity and will lose those changes if they do not hit Save before navigating away from the screen.

Link to snack for full CustomBackButton component code

(the snack won't run, I'm just using it to provide the full code I am using)

This logic/implementation works as intended, however the appearance is grossly different from the native back button appearance on iOS. I am wondering how best to emulate this as close as possible so the user can feel that the button is the same as the native experience everywhere throughout the application.

What would you advise? I am open to any and all suggestions such as flexbox improvements, hacky RNN mods, etc. etc.

custom back button:

native back button:

Answer 1

for now i am using a marginLeft: -20 on the button container (styles.button)