What to do when there's "src" and "lib" directory

[aprilmintacpineda]

There are modules that deliver their libraries already built, but still includes the src. Patching the lib is not going to be easy as it's most likely already transpiled and also patch-package doesn't seem to be able to recognize changes in there...

I'm currently stuck on this problem, I use react-native-paper, it ships with both "lib" and "src":

my patches where applied to src

diff --git a/node_modules/react-native-paper/src/components/Avatar/AvatarImage.tsx b/node_modules/react-native-paper/src/components/Avatar/AvatarImage.tsx
index 3b71389..a874e2b 100644
--- a/node_modules/react-native-paper/src/components/Avatar/AvatarImage.tsx
+++ b/node_modules/react-native-paper/src/components/Avatar/AvatarImage.tsx
@@ -58,6 +58,8 @@ const AvatarImage = ({
   source,
   style,
   theme,
+  onError,
+  onLoad,
   ...rest
 }: Props) => {
   const { colors } = theme;
@@ -82,6 +84,8 @@ const AvatarImage = ({
         <Image
           source={source}
           style={{ width: size, height: size, borderRadius: size / 2 }}
+          onError={onError}
+          onLoad={onLoad}
         />
       )}
     </View>
diff --git a/node_modules/react-native-paper/src/components/Drawer/DrawerItem.tsx b/node_modules/react-native-paper/src/components/Drawer/DrawerItem.tsx
index 503cfab..cd3933d 100644
--- a/node_modules/react-native-paper/src/components/Drawer/DrawerItem.tsx
+++ b/node_modules/react-native-paper/src/components/Drawer/DrawerItem.tsx
@@ -5,6 +5,7 @@ import Text from '../Typography/Text';
 import Icon, { IconSource } from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { withTheme } from '../../core/theming';
+import Badge from '../Badge';
 
 type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
@@ -67,6 +68,7 @@ const DrawerItem = ({
   style,
   onPress,
   accessibilityLabel,
+  badge,
   ...rest
 }: Props) => {
   const { colors, roundness } = theme;
@@ -100,22 +102,25 @@ const DrawerItem = ({
         accessibilityState={{ selected: active }}
         accessibilityLabel={accessibilityLabel}
       >
-        <View style={styles.wrapper}>
-          {icon ? <Icon source={icon} size={24} color={contentColor} /> : null}
-          <Text
-            selectable={false}
-            numberOfLines={1}
-            style={[
-              styles.label,
-              {
-                color: contentColor,
-                ...font,
-                marginLeft: labelMargin,
-              },
-            ]}
-          >
-            {label}
-          </Text>
+        <View style={styles.badgeContainer}>
+          <View style={styles.wrapper}>
+            {icon ? <Icon source={icon} size={24} color={contentColor} /> : null}
+            <Text
+              selectable={false}
+              numberOfLines={1}
+              style={[
+                styles.label,
+                {
+                  color: contentColor,
+                  ...font,
+                  marginLeft: labelMargin,
+                },
+              ]}
+            >
+              I am patch-package
+            </Text>
+          </View>
+          {!isNaN(badge) ? <Badge visible={Boolean(badge)}>{badge}</Badge> : null}
         </View>
       </TouchableRipple>
     </View>
@@ -131,12 +136,17 @@ const styles = StyleSheet.create({
   },
   wrapper: {
     flexDirection: 'row',
-    alignItems: 'center',
-    padding: 8,
+    alignItems: 'center'
   },
   label: {
     marginRight: 32,
   },
+  badgeContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 8,
+  },
 });
 
 export default withTheme(DrawerItem);

When I build my app for production, the patches don't seem to get applied, as you can see above, there's I am patch package, just for me to verify if my patch is getting applied, but I don't see it on the build app. This is currently preventing me from deploying my app as it's a critical bug for me.

IT WORKS IN DEVELOPMENT MODE BUT NOT IN PRODUCTION is what I'm trying to say in this case.

[aprilmintacpineda]

REF: callstack/react-native-paper#2642

[ds300]

Patching the lib is not going to be easy as it's most likely already transpiled and also patch-package doesn't seem to be able to recognize changes in there...

That sounds odd to me. I just tried installing react-native-paper and patching files in the lib dir and it worked as normal. Maybe there's something strange in your setup? Are you on a recent version of patch-package?

When I build my app for production, the patches don't seem to get applied, as you can see above, there's I am patch package, just for me to verify if my patch is getting applied, but I don't see it on the build app. This is currently preventing me from deploying my app as it's a critical bug for me.

as per the "react-native" field in the package.json for react-native-paper, the src/ files should be the ones metro is picking up when bundling. Although given your experience it sounds like that's not happening when you're making a production build 🤔 . Are you creating the production build locally? If you're only doing it on CI then there might be a caching issue with your CI node_modules folder.

Otherwise I suppose it's possible that metro picks up the src files when bundling for development and the lib files when bundling for production, so check for that. I've never heard of that behaviour before though.

[aprilmintacpineda]

I was able to apply my patch-package to the lib folder... but I did it the hard way:

1. Clone react-native-paper
2. Apply my changes
3. Build
4. Copy-paste the result to lib

Otherwise I suppose it's possible that metro picks up the src files when bundling for development and the lib files when bundling for production, so check for that. I've never heard of that behaviour before though.

I think it does, the previous patch worked locally, so I thought it would also work for production, to my surprise, it doesn't...

Are you creating the production build locally? If you're only doing it on CI then there might be a caching issue with your CI node_modules folder.

It happens when I build on CI, I use github actions AND ALSO when I build locally.

[aprilmintacpineda]

Otherwise I suppose it's possible that metro picks up the src files when bundling for development and the lib files when bundling for production, so check for that. I've never heard of that behaviour before though.

I have just verified this, since I changed my patch to be on lib rather than src, when I ran it on development mode, I don't see my patches, although the patch has been applied. I think it has to do with this https://github.com/callstack/react-native-paper/blob/main/package.json#L7 I say this because I changed that line to be lib/module/index.js and that's the only time when I saw my patches on development mode. So yeah, on development mode, it reads the src folder, and on production mode, it reads the lib folder, it referring to react-native.