feat(suite-native): offline header shows that app is offline

[vytick]

Shows offline header stripe on top of app (after onboarding).

Related Issue

Resolve #13597

Screenshots:

[socket-security]

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert	Package	Note	Source	CI
Network access	npm/@react-native-community/[email protected]	Module: globalThis["fetch"] Location: Package overview	suite-native/app/package.json	🚫

View full report↗︎

Next steps

What is network access?

This module accesses the network.

Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore npm/@react-native-community/[email protected]

[matejkriz]

Code looks good, I'll test it. Message-system banners should stay visible even during onboarding, I believe. At least we should discuss that separately from offline banner.

I would like to double check if reachabilityUrl is ever used. In that case we should define our own, I guess.

[matejkriz]

Note for QA @STew790 : let's retest #10640 together with this?

[vytick]

/rebase

[github-actions]

Start rebasing: https://github.com/trezor/trezor-suite/actions/runs/10205343182

[PeKne]

On Android the status bar has unmatching color (it shoud be yellow, not white). Please change it via the https://reactnative.dev/docs/statusbar API.

[PeKne]

I'm just wondering why this is needed. The MessageSystemBannerRenderer works the same way as the OfflineHeader component but a special "topAreInsetHook" is not required.

How is it different here? I would prefer not to override the default useSafeAreaInsets if possible for better DX.

[PeKne]

What also bugs me is that now all the packages imported to the suite-native/connection-status are now imported to all the places where are top area insets used. That could be quite troublesome in the future if this package will grow. Can imagine some nasty cyclical dependencies.

[vytick]

this conditional inset is needed otherwise if the offlineheader is visible everything with usesafeareainset has odd big offset from the top.

Any idea how to do it differently is welcomed. 🙏

[PeKne]

note: out of the scope of this PR

new issue created: #13659

[PeKne]

Otherwise, it looks very good. Good job ✌️. Looking forward merging this.

[vytick]

On Android the status bar has unmatching color (it shoud be yellow, not white). Please change it via the https://reactnative.dev/docs/statusbar API.

<Screen> resets any background color change, so we agreed with matej to keep it this way for now

[vytick]

/rebase

[github-actions]

Start rebasing: https://github.com/trezor/trezor-suite/actions/runs/10265051845

[vytick]

@SocketSecurity ignore npm/@react-native-community/[email protected].

[vytick]

/rebase

[github-actions]

Start rebasing: https://github.com/trezor/trezor-suite/actions/runs/10266449394

[vytick]

/rebase

[github-actions]

Start rebasing: https://github.com/trezor/trezor-suite/actions/runs/10267976740