Custom Hierarchical Navigation Definitive Back Buttons

How-to Discussions
1

Hi Fuse,

I started creating my app with React Native but after falling in love with Fuse I am trying to recreate my app in Fuse. Below is my current app. (Sorry for the bad gif but I recorded with Simulator).

file
II4yYJr8q19Q-legacy-files-818GqjtTZgQQDgRi--XBC9OvcODmMude0CfeBrnC9.gif396×697

Currently I’m working on the navigation bar. I would like to recreate the same kind of navigation flow as my current app, in Fuse. Where I have:

  • The Parent Navigation Bar View title auto populate as the Back Text Value when Navigated To view overlaps

  • If the Navigated To view Title is too long, the Back Button text value defaults back to Back

  • If the Navigated To view Title gets even longer and offscreen the Back Button only displays an arrow button

file
HghFVJxNiIeg-legacy-files-3SRGIbSjb5AHoZvH-54M5LA1KTStv-FEwClx8bKk-.jpg2100×1800

Is the above natively possible within Fuse? If not, is this native feature accessible through Fuse? If that is not possible either, can I add React Native elements in Fuse?

Thanks in advance,

Elizabeth

2

Hi!

A) The auto-population of the navigation bar title should be fairly easy using page binding

B) As for automatically updating the back button text (based on where you are in the hierarchy) that’s probably simplest to do by binding to an observable string variable in JS and just updating that one based on your navigation.

C) When it comes to presenting different strings on the back button depending on the size of the title text you can simply add some more logic to the code that updates the text. Just check the length (in characters) of the title text and pick the right back-button-text option based on that. I’m not sure if we have any options to easily do measurement based on the actual on-screen size of the title text but hopefully the string length in characters should be a reasonable approximation.

3

Hi Remi,

Thanks for the advice.

I was quite certain that the use of observables and advance logic to the code, would be needed in order to meet my requirements but was wondering if the navigation page binding feature or Fuse native UI access would have such a native functionality out of the box.

Hopefully I would be skilled enough to accomplish all my requirements in Fuse.

Wish me luck!

Cheers.

Elizabeth

4

Good luck, and let us know if you run into any problems. :slight_smile: