Timeline to official New Architecture support?

[micahlt]

Is there any sort of timeline towards official New Architecture support (including bridgeless mode and the Fabric renderer)? The React Native team has been pushing hard for packages adjacent to the RN ecosystem to start building in support for the New Architecture, especially with the release of 0.74.x. Apps built with Paper will run in New Architecture projects without any changes, but there are a significant number of small bugs caused by the upgrade (for example: #4445, #4399, #4127). Most of these changes seem to be related to how Paper handles user input. I plan on doing some investigating on my own, but considering the fact that the New Architecture is where the RN ecosystem is moving and that it offers significant performance improvements it would be great to know where the Callstack team stands.

[gedu]

Hey, Thanks a lot for bringing this up and for your interest in the New Architecture. Right now, we're in the process of upgrading react-native-paper to version 0.73. Once that's done, our next step is to work on full compatibility with the New Architecture. We know it's important and are on it. Appreciate your patience and support!

[RohovDmytro]

We desperately need button to be pressable on a new arch! 😄 I think react-native-paper is my last dependency that lack support, so I hope for the best. 🤞🏻

[iM-GeeKy]

@gedu @lukewalczak Is there any update on this? https://github.com/callstack/react-native-paper/issues/4517 is affected by new arch support.

[gedu]

Hey, I'm pushing forward this PR to move to 0.73. As soon as that's merged, we will try to provide support, but we are discussing internally when exactly that will happen.

[iM-GeeKy]

@gedu Have you all decided how you're planning to move forward with new arch support? Myself along with others would be excited to hear since RN 76 and Expo 52 are right around the corner!

[hakonk]

Given that RN 0.76 is out, I'd love to hear more about your future plans for supporting the new architecture. Also, Expo 52 is now in a two week beta phase.

[iM-GeeKy]

@gedu For convenience, here is a running list of open issues potentially blocking teams from migrating to the new arch. Any update for new arch support would be greatly appreciated since the library hasn't been updated in 4 months and is a critical part to many projects.

• [ ] https://github.com/callstack/react-native-paper/issues/4445
• [ ] https://github.com/callstack/react-native-paper/issues/4399
• [ ] https://github.com/callstack/react-native-paper/issues/4127
• [ ] https://github.com/callstack/react-native-paper/issues/4140
• [ ] https://github.com/callstack/react-native-paper/issues/4482
• [ ] https://github.com/callstack/react-native-paper/issues/4544
• [ ] https://github.com/callstack/react-native-paper/issues/4545
• [ ] https://github.com/callstack/react-native-paper/issues/4546
• [ ] https://github.com/callstack/react-native-paper/issues/4552
• [ ] https://github.com/callstack/react-native-paper/issues/4555
• [ ] https://github.com/callstack/react-native-paper/issues/4559
• [ ] https://github.com/callstack/react-native-paper/issues/4520
• [ ] https://github.com/callstack/react-native-paper/issues/4561
• [ ] https://github.com/callstack/react-native-paper/issues/4570

[RohovDmytro]

Having react-native-paper support the latest default architecture including the ability to handle onPress, which is quite crucial, would be amazing.

[shoffing]

Now that Expo 52 is out, it's not possible to install Expo Go 51 on devices that can't directly install APKs (i.e. my phone with a work profile enabled). I'd really like to upgrade to Expo 52 for my project, but this package is holding me back!

[RohovDmytro]

I've read somewhere one of the maintainers left. Is this package still under active maintenance?

[iM-GeeKy]

Just for everyone's visibility. I reached out on Discord and received the following response.

[ericpoulinnz]

Awesome you managed to find them on Discord @iM-GeeKy. Are you able to press for a rough time estimate on when they will unpause work on this repo?

Already 4 months with no changes (including crucial patches) on a repo that's relied upon by so many projects. It is concerning and has caused a rethink on how much my team relies on this library.

[micahlt]

This is pretty concerning -- Paper is a core component of three of my apps. Looks like I may be working at a full rebuild using my own components.

[VimukthiShohan]

@iM-GeeKy Is there any patches we could use until these bugs are fixed?

[iM-GeeKy]

@VimukthiShohan I'm not a maintainer of the repository, but here is the patch file i'm currently using in my app. It addresses some, but not all of the issues noted above. Hope this helps.

patches/react-native-paper+5.12.5.patch

diff --git a/node_modules/react-native-paper/lib/commonjs/components/TextInput/Label/InputLabel.js b/node_modules/react-native-paper/lib/commonjs/components/TextInput/Label/InputLabel.js
index 08d084a..bb975f6 100644
--- a/node_modules/react-native-paper/lib/commonjs/components/TextInput/Label/InputLabel.js
+++ b/node_modules/react-native-paper/lib/commonjs/components/TextInput/Label/InputLabel.js
@@ -110,7 +110,7 @@ const InputLabel = props => {
     // This gives the effect of animating the color, but allows us to use native driver
     _react.default.createElement(_reactNative.View, {
       pointerEvents: "none",
-      style: [_reactNative.StyleSheet.absoluteFill, styles.overflow]
+      style: [_reactNative.StyleSheet.absoluteFill, styles.overflow, , styles.labelContainer]
     }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
       pointerEvents: "none",
       style: [_reactNative.StyleSheet.absoluteFill, styles.labelContainer, _reactNative.Platform.OS !== 'web' && {
diff --git a/node_modules/react-native-paper/lib/module/components/TextInput/Label/InputLabel.js b/node_modules/react-native-paper/lib/module/components/TextInput/Label/InputLabel.js
index 04fc70d..ba46119 100644
--- a/node_modules/react-native-paper/lib/module/components/TextInput/Label/InputLabel.js
+++ b/node_modules/react-native-paper/lib/module/components/TextInput/Label/InputLabel.js
@@ -103,7 +103,7 @@ const InputLabel = props => {
     // This gives the effect of animating the color, but allows us to use native driver
     React.createElement(View, {
       pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, styles.overflow]
+      style: [StyleSheet.absoluteFill, styles.overflow, , styles.labelContainer]
     }, /*#__PURE__*/React.createElement(Animated.View, {
       pointerEvents: "none",
       style: [StyleSheet.absoluteFill, styles.labelContainer, Platform.OS !== 'web' && {
diff --git a/node_modules/react-native-paper/src/components/BottomNavigation/BottomNavigationBar.tsx b/node_modules/react-native-paper/src/components/BottomNavigation/BottomNavigationBar.tsx
index 0bfe303..789c388 100644
--- a/node_modules/react-native-paper/src/components/BottomNavigation/BottomNavigationBar.tsx
+++ b/node_modules/react-native-paper/src/components/BottomNavigation/BottomNavigationBar.tsx
@@ -360,7 +360,9 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   navigationState,
   renderIcon,
   renderLabel,
-  renderTouchable = (props: TouchableProps<Route>) => <Touchable {...props} />,
+  renderTouchable = ({ key, ...props }: TouchableProps<Route>) => (
+    <Touchable key={key} {...props} />
+  ),
   getLabelText = ({ route }: { route: Route }) => route.title,
   getBadge = ({ route }: { route: Route }) => route.badge,
   getColor = ({ route }: { route: Route }) => route.color,
diff --git a/node_modules/react-native-paper/src/components/Button/Button.tsx b/node_modules/react-native-paper/src/components/Button/Button.tsx
index 64a049a..0dfb9a9 100644
--- a/node_modules/react-native-paper/src/components/Button/Button.tsx
+++ b/node_modules/react-native-paper/src/components/Button/Button.tsx
@@ -324,6 +324,7 @@ const Button = (
       {...rest}
       ref={ref}
       testID={`${testID}-container`}
+      key={disabled ? 'disabled' : 'enabled'}
       style={
         [
           styles.button,
diff --git a/node_modules/react-native-paper/src/components/Modal.tsx b/node_modules/react-native-paper/src/components/Modal.tsx
index 313ecee..8cc7d0f 100644
--- a/node_modules/react-native-paper/src/components/Modal.tsx
+++ b/node_modules/react-native-paper/src/components/Modal.tsx
@@ -141,6 +141,8 @@ function Modal({
     }).start();
   }, [opacity, scale]);
 
+  const shouldModalDisappearRef = React.useRef(true);
+
   const hideModal = React.useCallback(() => {
     Animated.timing(opacity, {
       toValue: 0,
@@ -152,15 +154,17 @@ function Modal({
         return;
       }
 
-      if (visible) {
+      if (visible && shouldModalDisappearRef?.current) {
         onDismissCallback();
       }
 
-      if (visibleRef.current) {
+      if (visibleRef.current && !shouldModalDisappearRef?.current) {
         showModal();
       } else {
         setRendered(false);
       }
+
+      shouldModalDisappearRef.current = true;
     });
   }, [onDismissCallback, opacity, scale, showModal, visible]);
 
@@ -171,6 +175,7 @@ function Modal({
 
     const onHardwareBackPress = () => {
       if (dismissable || dismissableBackButton) {
+        shouldModalDisappearRef.current = false;
         hideModal();
       }
 
diff --git a/node_modules/react-native-paper/src/components/TextInput/Label/InputLabel.tsx b/node_modules/react-native-paper/src/components/TextInput/Label/InputLabel.tsx
index 45d524e..575afbb 100644
--- a/node_modules/react-native-paper/src/components/TextInput/Label/InputLabel.tsx
+++ b/node_modules/react-native-paper/src/components/TextInput/Label/InputLabel.tsx
@@ -138,7 +138,7 @@ const InputLabel = (props: InputLabelProps) => {
     // This gives the effect of animating the color, but allows us to use native driver
     <View
       pointerEvents="none"
-      style={[StyleSheet.absoluteFill, styles.overflow]}
+      style={[StyleSheet.absoluteFill, styles.overflow, styles.labelContainer]}
     >
       <Animated.View
         pointerEvents="none"
diff --git a/node_modules/react-native-paper/src/components/TextInput/TextInputFlat.tsx b/node_modules/react-native-paper/src/components/TextInput/TextInputFlat.tsx
index 8a0dcb1..fce1334 100644
--- a/node_modules/react-native-paper/src/components/TextInput/TextInputFlat.tsx
+++ b/node_modules/react-native-paper/src/components/TextInput/TextInputFlat.tsx
@@ -363,8 +363,8 @@ const TextInputFlat = ({
               StyleSheet.absoluteFill,
               dense ? styles.densePatchContainer : styles.patchContainer,
               {
-                backgroundColor:
-                  viewStyle.backgroundColor || containerStyle.backgroundColor,
+                // backgroundColor:
+                  // viewStyle.backgroundColor || containerStyle.backgroundColor,
                 left: paddingLeft,
                 right: paddingRight,
               },

[VimukthiShohan]

@iM-GeeKy Thanks 🎉

[RohovDmytro]

@VimukthiShohan I'm not a maintainer of the repository, but here is the patch file i'm currently using in my app. It addresses some, but not all of the issues noted above. Hope this helps.

patches/react-native-paper+5.12.5.patch

Can you please estimate how production-ready this patch is in your case?

I had to start creating wrapper-components around react-native-paper components to gradually migrate away from broken components. That's 100% production-proof but more tedious.

[gedu]

Hey, we just merged this ongoing PR that we had: https://github.com/callstack/react-native-paper/pull/4477 Now the idea is to work on supporting the new architecture

[VimukthiShohan]

@gedu Good to hear. When can we expect a new release with these fixes?

[naveendharni]

Which is the latest react-native-paper version supported for react-native 0.76.3?

Hey, we just merged this ongoing PR that we had: #4477 Now the idea is to work on supporting the new architecture

[salememd]

Hopefully the new version will be available soon. Thanks for the good work!

[raajnadar]

https://reactnative.directory/?search=react-native-paper says new architecture is supported

[salememd]

Should we expect a new version before end of year? or disable newArc and release?

[deeeed]

Would love an update on this, just to manage expectation and plan accordingly. Especially if the project become maintenance mode.

[RohovDmytro]

Want to note that it's possible to use expo@52 in an old arch and workaround react-native-paper using that. Was not obvious for me.

Especially if the project become maintenance mode.

Is there any announcement or are you talking de-facto?

[deeeed]

@RohovDmytro , no I shouldn't have said that. I have no information.

[salememd]

New version available now 🎉

[RohovDmytro]

Oh, yeah!

I've just tried it. 50+ screens, 15 minutes of swiping, 0 bugs found yet. Impressive! Thanks! 🤝

[RohovDmytro]

Found one.

List.Item and Button can fail handling the onPress event. Can't find a stable reproduction yet, it happens rarely and randomly.

The ripple animation does appear, but onPress callback is not running. That might be related to https://github.com/software-mansion/react-native-screens/issues/2219

[salememd]

Found one.

List.Item and Button can fail handling the onPress event. Can't find a stable reproduction yet, it happens rarely and randomly.

The ripple animation does appear, but onPress callback is not running. That might be related to software-mansion/react-native-screens#2219

Same issue, we switched from onPress to onTouchEnd to solve it