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.

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

Timeline to official New Architecture support? #4454

Open
micahlt opened this issue Jul 14, 2024 · 28 comments
Open

Timeline to official New Architecture support? #4454

micahlt opened this issue Jul 14, 2024 · 28 comments
Labels
question Question related to the library, not an issue

Comments

@micahlt
Copy link

micahlt commented Jul 14, 2024

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.

@micahlt micahlt added the question Question related to the library, not an issue label Jul 14, 2024
@gedu
Copy link
Contributor

gedu commented Jul 16, 2024

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
Copy link

RohovDmytro commented Aug 30, 2024

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
Copy link

iM-GeeKy commented Sep 23, 2024

@gedu @lukewalczak Is there any update on this? #4517 is affected by new arch support.

@gedu
Copy link
Contributor

gedu commented Oct 7, 2024

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
Copy link

@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
Copy link

hakonk commented Oct 25, 2024

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.

@RohovDmytro
Copy link

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

@shoffing
Copy link

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
Copy link

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

@iM-GeeKy
Copy link

iM-GeeKy commented Nov 26, 2024

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

Image

@ericpoulinnz
Copy link

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
Copy link
Author

micahlt commented Nov 26, 2024

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
Copy link

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

@iM-GeeKy
Copy link

@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
Copy link

@iM-GeeKy Thanks 🎉

@RohovDmytro
Copy link

RohovDmytro commented Nov 28, 2024

@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
Copy link
Contributor

gedu commented Nov 28, 2024

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

@VimukthiShohan
Copy link

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

@naveendharni
Copy link

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
Copy link

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

@raajnadar
Copy link
Collaborator

Image

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

@salememd
Copy link

salememd commented Dec 9, 2024

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

@deeeed
Copy link

deeeed commented Dec 31, 2024

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

@RohovDmytro
Copy link

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
Copy link

deeeed commented Jan 2, 2025

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

@salememd
Copy link

salememd commented Jan 9, 2025

New version available now 🎉

@RohovDmytro
Copy link

Oh, yeah!

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Question related to the library, not an issue
Projects
None yet
Development

No branches or pull requests