feat: New architecture support #4574

BogiKay · 2024-12-06T14:47:45Z

Motivation

Main motivation is to make Paper great again by supporting new architecture, updating crucial deps and fixing as many as possible issues that occur when new-arch is enabled.

Main changes:

dependencies updated
new architecture enabled in example app
migrated Menu component to functional one
refreshed and slightly simplified Modal component
fixed some issues linked below

Known issues:

There's a problem with overflowing value of TextInput on iOS that should be addressed by [iOS] Fix paragraph styling of TextInput facebook/react-native#48060
CVV TextInput is as wide as container is - I investigated that problem and it's caused by caching some of layout measurements. I created an issue [Android][NewArch] Weird layout styling if multiple instances of the same component with the same props facebook/react-native#48249 to take care of it and in the meantime I've debugging and looking for a fix.

Related issue

#4140
#4544
#4555
#4559
#4520
#4552

Test plan

We need to proceed with general regression testing using new and old architecture for all supported platforms.

Pay extra attention when testing Menu and Modal components.

callstack-bot · 2024-12-08T14:24:18Z

Hey @BogiKay, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

gedu · 2024-12-09T18:33:48Z

Great!!! Is working awesome.
On iOS I saw these 2 things with TextInputs

paper_textInput.mp4

Later I will try to look at Android and Web, If those issues are happening already we can open an issue for tracking

BogiKay · 2024-12-09T20:48:57Z

Great!!! Is working awesome. On iOS I saw these 2 things with TextInputs

paper_textInput.mp4
Later I will try to look at Android and Web, If those issues are happening already we can open an issue for tracking

Thanks for testing my changes 🙂

First issue is mentioned in "known issues" section in PR's description. I described what's the problem. I think we can come back to it later to figure out some kind of workaround after releasing current changes since this regression is not strictly related to the Paper.

When it comes to the second issue, there's an existing PR(#4497) that fixes it, so I decided to leave it as it is and review & test the mentioned PR once we merge this PR.

gedu · 2024-12-10T19:47:07Z

On android I couldn't run it at first because of this error:

on the app.json file changing to this:

"runtimeVersion": "exposdk:52.0.0",

worked

gedu · 2024-12-10T19:51:06Z

I'm seeing an extra ripple effect and it is shown at the wrong place

extra_ripple_wrong_place.mp4

gedu · 2024-12-10T19:53:09Z

On ActivityIndicator custom size I'm seeing a white line

gedu · 2024-12-10T19:58:37Z

Not sure which one is wrong or right but the X Chip is different on iOS vs Android

gedu · 2024-12-10T20:11:51Z

On Android the CVV text input that should be small, they are filling the width and on focus they shrink

textinput_should_be_small.mp4

gedu · 2024-12-12T12:00:42Z

On web the Fab is all the way to the bottom, and it has some visual bugs

paper_web_fab.mp4

gedu · 2024-12-12T12:03:28Z

[Web] I think I didn't see it before, but custom corners on card shows a small white gap

gedu · 2024-12-12T12:07:27Z

[Web] Seems the text is not center align on Chips

gedu · 2024-12-12T12:09:53Z

[Web] On list.section the chip is cutoff

gedu · 2024-12-12T12:11:55Z

[Web] Listitem I can't click checkboxes or switches

paper_web_listItem_noClick.mp4

raajnadar · 2024-12-12T17:07:52Z

Button color on loading state is also not correct please check that issue.

BogiKay · 2024-12-13T10:40:10Z

Little update:

iOS:

Overflowing TextInput's value issue - it's React Native core issue. Created a fix for that -> [iOS] Fix paragraph styling of TextInput facebook/react-native#48060
Multiline TextInput label disappears - There's an existing PR with a fix fix: input label not visible on ios if multiline, fixes #4482 #4497

Android:

runtimeVersion error - I set based on sdk version. It's pity that it needs to be set manually. Once, fingerprint policy goes out of beta, we should think about it.
Ripple effect - Not able to reproduce. Working fine with latest changes.
Activity Indicator - a white line is present on both architectures and it's already existing regression, so it should be tackled as a separate work
Different look of chips - It's not an X chip, it contains a very long text that gets truncated and it looks different on different screens size-wise. Doesn't seem to be connected to new-arch. I'll tackle it separately
CVV TextInput is as wide as container is - I investigated that problem and it's caused by caching some of layout measurements. I created an issue [Android][NewArch] Weird layout styling if multiple instances of the same component with the same props facebook/react-native#48249 to take care of it and in the meantime I've debugging and looking for a fix. Update: implemented temporary workaround for this issue.

Web:

FAB - I've already fixed that in another PR fix(animated-fab): label styling (web) #4567
Card corners - It's not a regression related to new-arch. Most likely it has never been working well on web. The radius is applied to image only, not the card.
Chip text alignment - This issue is present in the last release of the library. It's not something caused by new arch. Will be taken care of individually.
List section chip - This issue is present in the last release of the library. It's not something caused by new arch. Will be taken care of individually.
List item checkboxes are not interactive - It's not intuitive, but it was implemented that way. We can adjust that behavior later on.
Button color when loading - Wasn't able to reproduce. @raajnadar can you provide reproducible example?

Help is more than welcomed, so if someone wants to work on something from the list above feel free to do that so and just leave a comment to let others be on the same page.

raajnadar · 2024-12-14T06:42:41Z

The issue of the disabled button disappeared after using the latest version of the Expo Go & expo router, if the issue reappears I will give more detailed repro

satya164 · 2024-12-16T11:07:48Z

.circleci/config.yml

+            yarn --cwd example --frozen-lockfile
+            yarn --cwd docs --frozen-lockfile
+            yarn --frozen-lockfile


--frozen-lockfile is for yarn 1, --immutable is for berry

Thanks! Missed that due to backward compatibility. Updated

satya164 · 2024-12-16T11:11:08Z

.circleci/config.yml

-            yarn install --cwd docs --frozen-lockfile
-            yarn install --frozen-lockfile
+            sudo corepack enable
+            yarn set version berry


CI shouldn't call set version. It should be already set in the package.json. CI should use the same package manager everyone else would use when they run yarn directly in the project.

It is, but currently circleCI image is used and they provide it with yarn1 only, so I had to do it that way to force usage of newer version. I'm thinking about updating the CI config and getting away from circleCI image that seem a bit deprecated

@BogiKay it will be automatically handled if setup like this https://github.com/callstack/react-native-paper/pull/4574/files#r1886705407

But also enabling corepack should already mean that it would use correct package manager from package.json and install it - so there shouldn't need to be an extra step for setting version.

Extra step setting version explicitly removed. Thanks!

satya164 · 2024-12-16T12:02:33Z

example/src/RootNavigator.tsx

+const styles = StyleSheet.create({
+  stackWrapper: {
+    flex: 1,
+    ...Platform.select({
+      web: {
+        overflow: 'scroll',
+      },
+    }),
+  },
+});


Is React Navigation not working on Web? This shouldn't be needed

Scrolling doesn't work without these changes. If I remember correctly it's caused by react-native-screens changes

It could've something to do with the styles in here that differ from default expo setup

https://github.com/callstack/react-native-paper/blob/main/example/public/index.html

Tried the default ones from expo and it didn't help. I investigated that in the past and the breaking change is somewhere within components provided by navigation stack

satya164 · 2024-12-16T12:03:32Z

src/components/Button/Button.tsx

@@ -331,7 +337,7 @@ const Button = (
          buttonStyle,
          style,
          !isV3 && !disabled && { elevation },
-        ] as ViewStyle
+        ] as StyleProp<ViewStyle>


Suggested change

] as StyleProp<ViewStyle>

] satisfies StyleProp<ViewStyle>

src/components/Typography/AnimatedText.tsx

.yarnrc.yml

Co-authored-by: Satyajit Sahoo <[email protected]>

pmmmwh · 2024-12-30T03:22:50Z

Found an issue with anchorPosition "bottom" with the new Menu implementation while importing this as a patch - on first trigger the anchoring is correct but on subsequent triggers it will revert to anchoring at the top.

BogiKay · 2024-12-31T11:15:56Z

Found an issue with anchorPosition "bottom" with the new Menu implementation while importing this as a patch - on first trigger the anchoring is correct but on subsequent triggers it will revert to anchoring at the top.

Thanks for catching it. Issue solved 👍

gedu · 2025-01-07T11:48:05Z

Gave it another round, and LGTM

JameDodgers · 2025-01-07T20:46:55Z

It seems that changing disabled prop from false to true of AnimatedFAB component puts a weird shadow on the button on Android:

BogiKay added 5 commits November 29, 2024 17:36

feat: update deps & enable new arch

7d84923

chore: migrate Menu to functional component

0af640b

fix: get rid of a few rerenders of Menu

0107899

fix: fix Modal flickering & cleanup

f81eebc

fix: dynamic update of Button styles

9b37692

BogiKay changed the title ~~New architecture support~~ feat: New architecture support Dec 6, 2024

BogiKay marked this pull request as draft December 6, 2024 14:51

BogiKay force-pushed the feat/new-arch branch 7 times, most recently from 7283aab to 07e8796 Compare December 8, 2024 14:18

chore: update yarn

5bbdbbc

BogiKay force-pushed the feat/new-arch branch from 07e8796 to 5bbdbbc Compare December 8, 2024 14:32

fix: fix scrolling on ExampleList screen (web)

4958b86

BogiKay marked this pull request as ready for review December 9, 2024 14:32

Jhonatanmizu approved these changes Dec 10, 2024

View reviewed changes

fix: update runtimeVersion

5d943df

fix: workaround for fixing textinput styling

03bcb3b

satya164 reviewed Dec 16, 2024

View reviewed changes

chore: circleCI config update

6fd04d9

satya164 reviewed Dec 16, 2024

View reviewed changes

.yarnrc.yml Show resolved Hide resolved

chore: Update AnimatedText's props type

035ce56

Co-authored-by: Satyajit Sahoo <[email protected]>

BogiKay force-pushed the feat/new-arch branch 2 times, most recently from fc35c95 to dc6c246 Compare December 16, 2024 16:06

fix: get rid of setting yarn version from circleCI config

601fc70

BogiKay force-pushed the feat/new-arch branch from 7fa22ce to 601fc70 Compare December 16, 2024 16:28

fix: setting top offset of Menu based on anchorPosition

6e606a0

BogiKay requested a review from gedu December 31, 2024 11:24

gedu approved these changes Jan 7, 2025

View reviewed changes

lukewalczak added the New architecture label Jan 9, 2025

lukewalczak merged commit 77d3af7 into callstack:main Jan 9, 2025
3 checks passed

lukewalczak mentioned this pull request Jan 9, 2025

chore: update android app #4597

Merged

lukewalczak added this to the 5.13.0 milestone Jan 9, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: New architecture support #4574

feat: New architecture support #4574

BogiKay commented Dec 6, 2024 •

edited

Loading

callstack-bot commented Dec 8, 2024 •

edited

Loading

gedu commented Dec 9, 2024

BogiKay commented Dec 9, 2024

gedu commented Dec 10, 2024

gedu commented Dec 10, 2024

gedu commented Dec 10, 2024

gedu commented Dec 10, 2024

gedu commented Dec 10, 2024

gedu commented Dec 12, 2024

gedu commented Dec 12, 2024

gedu commented Dec 12, 2024

gedu commented Dec 12, 2024

gedu commented Dec 12, 2024

raajnadar commented Dec 12, 2024

BogiKay commented Dec 13, 2024 •

edited

Loading

raajnadar commented Dec 14, 2024

satya164 Dec 16, 2024

BogiKay Dec 16, 2024

satya164 Dec 16, 2024 •

edited

Loading

BogiKay Dec 16, 2024

satya164 Dec 16, 2024

BogiKay Dec 16, 2024

satya164 Dec 16, 2024

BogiKay Dec 16, 2024 •

edited

Loading

satya164 Dec 16, 2024

BogiKay Dec 16, 2024

satya164 Dec 16, 2024

BogiKay Dec 16, 2024

pmmmwh commented Dec 30, 2024

BogiKay commented Dec 31, 2024

gedu commented Jan 7, 2025

JameDodgers commented Jan 7, 2025 •

edited

Loading

feat: New architecture support #4574

feat: New architecture support #4574

Conversation

BogiKay commented Dec 6, 2024 • edited Loading

Motivation

Main changes:

Known issues:

Related issue

Test plan

callstack-bot commented Dec 8, 2024 • edited Loading

gedu commented Dec 9, 2024

BogiKay commented Dec 9, 2024

gedu commented Dec 10, 2024

gedu commented Dec 10, 2024

gedu commented Dec 10, 2024

gedu commented Dec 10, 2024

gedu commented Dec 10, 2024

gedu commented Dec 12, 2024

gedu commented Dec 12, 2024

gedu commented Dec 12, 2024

gedu commented Dec 12, 2024

gedu commented Dec 12, 2024

raajnadar commented Dec 12, 2024

BogiKay commented Dec 13, 2024 • edited Loading

Little update:

iOS:

Android:

Web:

raajnadar commented Dec 14, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

satya164 Dec 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BogiKay Dec 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pmmmwh commented Dec 30, 2024

BogiKay commented Dec 31, 2024

gedu commented Jan 7, 2025

JameDodgers commented Jan 7, 2025 • edited Loading

BogiKay commented Dec 6, 2024 •

edited

Loading

callstack-bot commented Dec 8, 2024 •

edited

Loading

BogiKay commented Dec 13, 2024 •

edited

Loading

satya164 Dec 16, 2024 •

edited

Loading

BogiKay Dec 16, 2024 •

edited

Loading

JameDodgers commented Jan 7, 2025 •

edited

Loading