`expo start --no-dev --minify` mess up render and functionality of App

[adilusman51]

Current behaviour

run expo start --no-dev --minify, select Android or iOS, Theme of the App is messed up switching between dark theme and light theme, Missing Icons (using FeatherIcons), Card inset margins goes to zero, Text theme is inconsistent and Button/FAB onPress does not work properly.

run expo start -c, select Android or iOS, App works fine as expected.

Expected behaviour

App should work in production mode same as in development mode.

Code sample

Screenshots (if applicable)

What have you tried

Your Environment

software	version
android	29
react-native	0.63
react-native-paper	4.9.1
node	12.19.0
npm or yarn	1.22.5
expo sdk	41.0.1

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• yarn (found: 1.22.5, latest: 1.22.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[adilusman51]

This is caused by adding plugins: ['react-native-paper/babel'] in the babel.config.js file as recommended by the getting started documentation React Native Paper - Getting Started

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: {
        plugins: ['react-native-paper/babel'],
      },
    },
  };
};

This is supposed to remove unused code, but it removes a lot of useful code and also code from other modules. Kindly have a look into this.

[raajnadar]

I am using that config for many application but didn’t find any issue can you please elaborate your issue?

[adilusman51]

I am using expo to build react native app. When I test app in dev environment with expo start -c everything works fine, App renders fine and switching theme have effect through out the app. When I test app in prod environment with expo start --no-dev --minify, App renders incorrectly, switch theme does not take effect through out the app.

Removing plugins: ['react-native-paper/babel'] in the babel.config.js, and then running expo start --no-dev --minify, App again works fine and renders same as in the case of running expo start -c

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[tdotdm]

Hi @adilusman51 I am experiencing this problem too although I do not have babel-preset-expo in my config.

Have you found a solution / workaround?

[adilusman51]

@tdotdm I have removed the plugins: ['react-native-paper/babel'] in the babel.config.js file, for both production and development environment. and it is working fine for me

Note: I am using Expo for my projects, and latest version of Expo SDK recommends to use their babel preset in babel.config.js. Following is the state of babel.config.js file in my project (Note that I have commented out the react-native-paper/babel section)

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        // env: {
        //  production: {
        //      plugins: ['react-native-paper/babel'],
        //  },
        // },
        plugins: [ 'react-native-reanimated/plugin'],
    };
};

I hope this is helpful for you

[MOUTAIROU]

I have the same problem, can anyone find a solution?

[seanblonien]

I am still having the same problem w/ latest react-native-paper, react-native, and expo, but the symptom I am seeing is exactly this issue #1432. commenting out the babel plugin seems to be the only work around for me as well...

anyone know what this file is doing exactly? https://github.com/callstack/react-native-paper/blob/main/src/babel/index.js never worked on a babel plugin, but yea am curious to know how to look into this bug. clearly there is something not behaving as expected within the plugin code given our configuration, but not sure what

[srosato]

Also happened to me once I added react-native-paper-dropdown.

After couple of hours of trying everything, I stumbled on this issue here and it was also the babel plugin added in production environment that was giving the error forgot to wrap your root component with Provider component from react-native-paper.

Not sure about the side effects of removing that plugin though.