LIVE-1816 - navigation bar new design + animation changes + reborn changes

[ofreyssinet-ledger]

New tab bar / navigation bar with a new animation.

Design ref Animation ref Analytics ref LIVE-1816

READ THIS BEFORE CODE REVIEW PLS 🙏

This includes:

• New design of the list of buttons in the drawer
• "No nano" / "read only" mode in the drawer with a banner for the upsell.
• A reusable "buy nano" banner
• Adaptation of all screens drawn under the tab bar to make sure they have a safe bottom padding (this wasn't necessary before as the old tab bar was not in position: absolute).
• New analytics on all the buttons, including some new functions & hooks in analytics.js to easily track an event with the page property preset following the navigation state.

Android no nano state

https://user-images.githubusercontent.com/91890529/168785372-e61d6e04-dcaf-4a0e-ab2c-e29451d8734b.mp4

Android normal state

sorry, stupid github doesn't let me upload this Video here (GDrive)

iOS normal state

Video here (GDrive)

Type

Feature

Context

LIVE-1816

Parts of the app affected / Test plan

-> Should be careful that the perf is ok on slow phones -> Should be careful that all screens that have the navigation bar visible don't have their bottommost content hidden behind the navigation bar

[github-actions[bot]]

Thanks for your contribution. To be groomed for next release, you need to:

• [ ] pass the CI
• [ ] if needed, run /generate-screenshots
• [ ] have a dev review

• [ ] have a QA review

  Why /generate-screenshots ?

  If your PR contains UI related changes, it might be necessary to regenerate screenshots.