Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: [IOAPPFD0-132] Enable react-native-screens in the DS section #4857

Closed
wants to merge 10 commits into from
Closed

chore: [IOAPPFD0-132] Enable react-native-screens in the DS section #4857

wants to merge 10 commits into from

Conversation

dmnplb
Copy link
Contributor

@dmnplb dmnplb commented Jul 31, 2023 •
edited
Loading

Short description

This PR enables a native stack navigation in the Design System section, using the react-native-screens package from Software Mansion (Official Github repo). The native stack navigation could bring some benefits:

  • It should provide better performance, especially with the swipe back gesture
  • It comes with native and OS-specific transitions between screens
    • Custom transitions can be built with Reanimated, using the specific methods exposed by the library
  • It comes with a native search bar option, which could replace the custom one available in the Messages section

List of changes proposed in this pull request

  • Replace createStackNavigator with createNativeStackNavigator
  • Add enableScreens() method to enable the native stack navigation
  • Update the Info.plist and AppDelegate.mm files, according to the official docs

Help wanted

  1. If you follow the official docs, you will get the following error when trying to access a screen that is managed with a NativeStackNavigator:
If you want to change the appearance of status bar, you have to change UIViewControllerBasedStatusBarAppearance
key in the Info.plist to YES
  1. If you change this value to YES, you get another error triggered at first screen of the app:
RCTStatusBarManager module requires that the UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO
  1. Setting the statusBarAnimation to none doesn't help. Neither does deleting every StatusBar component imported from react-native (for debug purposes).

Additional resources

How to test

  1. Launch pod install and yarn run-ios
  2. Try to launch the app with StatusBarAppearance set to true
  3. Change that value to false and repeat the steps above

@dmnplb dmnplb added Help Wanted 🚨 dependencies dont-merge ✋ Design System New visual language and reduction of previous UI clutter labels Jul 31, 2023
@dmnplb dmnplb requested a review from a team as a code owner July 31, 2023 10:10
@dmnplb dmnplb temporarily deployed to dev July 31, 2023 10:10 — with GitHub Actions Inactive
@pagopa-github-bot pagopa-github-bot changed the title [IOAPPFD0-132] Enable react-native-screens in the DS section chore: [IOAPPFD0-132] Enable react-native-screens in the DS section Jul 31, 2023
@pagopa-github-bot
Copy link
Collaborator

pagopa-github-bot commented Jul 31, 2023 •
edited by jira bot
Loading

Affected stories

Generated by 🚫 dangerJS against fb35c2d

@dmnplb dmnplb temporarily deployed to dev July 31, 2023 10:40 — with GitHub Actions Inactive
@dmnplb dmnplb temporarily deployed to dev July 31, 2023 12:09 — with GitHub Actions Inactive
@dmnplb dmnplb temporarily deployed to dev July 31, 2023 14:56 — with GitHub Actions Inactive
@dmnplb dmnplb temporarily deployed to dev July 31, 2023 19:14 — with GitHub Actions Inactive
@dmnplb dmnplb temporarily deployed to dev August 1, 2023 12:22 — with GitHub Actions Inactive
@dmnplb dmnplb temporarily deployed to dev August 1, 2023 12:26 — with GitHub Actions Inactive
@dmnplb dmnplb temporarily deployed to dev August 1, 2023 14:20 — with GitHub Actions Inactive
@dmnplb dmnplb temporarily deployed to dev August 1, 2023 16:26 — with GitHub Actions Inactive
@dmnplb dmnplb temporarily deployed to dev August 2, 2023 09:12 — with GitHub Actions Inactive
@dmnplb dmnplb mentioned this pull request Aug 4, 2023
Merged
@dmnplb
Copy link
Contributor Author

dmnplb commented Aug 4, 2023

We realized that the above mentioned problems are caused by the 5.x version of the react-navigation library. We have already successfully tested the NativeStackNavigator in the example application of the io-app-design-system library.

Therefore, the native navigation will be postponed until we update the react-navigation library to the 6.x version.

@dmnplb dmnplb closed this Aug 4, 2023
CrisTofani pushed a commit to pagopa/io-app-design-system that referenced this pull request Aug 4, 2023
@dmnplb
[IOAPPFD0-132] Example app · Enable iOS/Android native navigation (#42)
29686c4 
## Short description
This PR enables the native navigation in the example app. If you want to
discover more about the change and its implications, read the
description of the [PR
#4857](pagopa/io-app#4857)
([io-app](https://github.com/pagopa/io-app)) for reference.

## List of changes proposed in this pull request
- **[Example app]** Update `react-navigation` and related packages to
`6.x` version
- **[Main package]** Update `reanimated` and
`react-native-safe-area-context` to the last version
- Replace `StackNavigator` with the `NativeStackNavigator`
- Add native fullscreen modal (it seems different from the one available
in the `5.x`)
- Add native iOS search screen with custom color palette
- Add dark mode support to the example app
- Fix `AnimatedTick` rendering error after upgrade of `react-native-svg`

## How to test
Go to the `example` directory and run the app
@dmnplb dmnplb deleted the IOAPPFD0-132-enable-react-native-screens branch September 7, 2023 16:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
dependencies Design System New visual language and reduction of previous UI clutter dont-merge ✋ Help Wanted 🚨
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@dmnplb @pagopa-github-bot