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

WARN Codegen didn't run for RNCTabView on RN 0.75.4 and RNBT 0.1.2 #87

Closed
shovel-kun opened this issue Oct 29, 2024 · 13 comments · Fixed by #91
Closed

WARN Codegen didn't run for RNCTabView on RN 0.75.4 and RNBT 0.1.2 #87

shovel-kun opened this issue Oct 29, 2024 · 13 comments · Fixed by #91
Labels
Android bug Something isn't working

Comments

@shovel-kun
Copy link
Contributor

shovel-kun commented Oct 29, 2024

Here's the warning:

 (NOBRIDGE) WARN  Codegen didn't run for RNCTabView. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code.

The bottom tab fails to render on Android (have not test on iOS).

Adding module:@react-native/babel-preset to my babel config (after removing babel-preset-expo from presets and rebuilding) has no effect.

Don't have a repro atm. Just reporting in case anyone else also has the same problem.

my babel preset can be seen below:

const ReactCompilerConfig = {
  target: "18", // '17' | '18' | '19'
  runtimeModule: "react-compiler-runtime",
};

/** @type {import('@babel/core').TransformOptions} */
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      // ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      ["module:@react-native/babel-preset"],
      "nativewind/babel",
    ],
    env: {
      production: {},
    },
    plugins: [
      // https://react.dev/learn/react-compiler
      // Should come first
      ["babel-plugin-react-compiler", ReactCompilerConfig],
      ["react-native-reanimated/plugin"],
      [
        "module-resolver",
        {
          root: ["./"],
          alias: {
            "@": "./",
          },
        },
      ],
    ],
  };
};
@Vijayabaskar56
Copy link

I am also Facing the Same Issue
Screenshot_2024-10-29-07-40-24_1920x1080

@douglowder
Copy link
Contributor

Same here. The problem does not occur on iOS or tvOS. This happens when new arch is enabled.

When new arch disabled, I see a different error, this one when updating the "items" property in the module.

@okwasniewski
Copy link
Collaborator

Hey, can you try with version 0.1.4?

@shovel-kun
Copy link
Contributor Author

shovel-kun commented Oct 29, 2024

@okwasniewski

The tab bar renders along with icons!

However, it seems like labels only render for initial frame before disappearing. When labeled={true}, all labels render and then disappear. When undefined, the current active tab renders label for a frame, and then never again. The rest of the (inactive) tabBarLabels do not render any labels, and when they become active they don't render any label, leaving empty space where they should've rendered.

BTW, typehinting for createNativeBottomTabNavigator() is broken on React Navigation v7.

@okwasniewski
Copy link
Collaborator

@okwasniewski

The tab bar renders along with icons!

However, it seems like labels only render for initial frame before disappearing. When labeled={true}, all labels render and then disappear. When undefined, the current active tab renders label for a frame, and then never again. The rest of the (inactive) tabBarLabels do not render any labels, and when they become active they don't render any label, leaving empty space where they should've rendered.

Can you try Changing the styles.xml? You can use this expo config plugin: #75

Or change it in Android Studio, https://okwasniewski.github.io/react-native-bottom-tabs/docs/guides/android-native-styling.html

The Material3 style will be the default once I get expo config plugin working inside of the package.

BTW, typehinting for createNativeBottomTabNavigator() is broken on React Navigation v7.

Thanks for checking it out, this needs a separate issue.

@shovel-kun
Copy link
Contributor Author

shovel-kun commented Oct 29, 2024

While the styles do apply from <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"> and <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">, the label still fails to render.

image

Code

const HomeTabs = createNativeBottomTabNavigator<BottomNavigatorParamList>();

function HomeTabsNavigator() {
  const { t } = useTranslation();
  return (
    <HomeTabs.Navigator
      tabBarInactiveTintColor="#C57B57"
      tabBarActiveTintColor="#F7DBA7"
      barTintColor="#1E2D2F"
      rippleColor="#F7DBA7"
      activeIndicatorColor="#041F1E"
    >
      <HomeTabs.Screen
        name="Library"
        component={LibraryTopTabNavigator}
        options={{
          title: t("label.library"),
          tabBarLabel: "Library",
          tabBarIcon: () => require("../../assets/images/react-logo.png"),
        }}
      />
      <HomeTabs.Screen
        name="General"
        component={GeneralScreen}
        options={{
          title: t("label.general"),
          tabBarLabel: "Library",
          tabBarIcon: () => require("../../assets/images/react-logo.png"),
        }}
      />
      <HomeTabs.Screen
        name="Updates"
        component={UpdatesScreen}
        options={{
          title: t("label.updates"),
          tabBarLabel: "Library",
          tabBarIcon: () => require("../../assets/images/react-logo.png"),
        }}
      />
      <HomeTabs.Screen
        name="Browse"
        component={BrowseTopTabNavigator}
        options={{
          title: t("label.browse"),
          tabBarIcon: () => require("../../assets/images/react-logo.png"),
        }}
      />
      <HomeTabs.Screen
        name="More"
        // On iOS, we put the MoreStack in the Bottom Tabs navigator
        component={Platform.OS === "ios" ? MoreStackNavigator : MoreScreen}
        options={{
          title: t("label.more"),
          tabBarIcon: () => require("../../assets/images/react-logo.png"),
        }}
      />
    </HomeTabs.Navigator>
  );
}

Are you able to repro?

Thanks for checking it out, this needs a separate issue.

I'll open a new one.

@okwasniewski
Copy link
Collaborator

@shovel-kun Interesting.. I couldn't repro this. Can you create a minimal example app where this occurs? Would be really helpful 🙏

@okwasniewski okwasniewski changed the title WARN Codegen didn't run for RNCTabView on RN 0.75.4 and RNBT 0.1.2 [New Arch] Tab item fails to render on Android Oct 29, 2024
@okwasniewski okwasniewski changed the title [New Arch] Tab item fails to render on Android WARN Codegen didn't run for RNCTabView on RN 0.75.4 and RNBT 0.1.2 Oct 29, 2024
@okwasniewski
Copy link
Collaborator

For people that encounter this issue in the future, can we move the rendering issue to a separate one? This will make it easier to search among issues.

The issue with "Codegen didn't run.." is fixed, I'll close this one. Can you please open a new issue with a repro @shovel-kun for the issue you are having?

@shovel-kun
Copy link
Contributor Author

@okwasniewski

Found the issue. It was actually related to react-native-edge-to-edge. It seems that even if I had <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar"> set in styles.xml and didn't set an expo-plugin for react-native-edge-to-edge, it will still force edge-to-edge, causing navigation bar to overlay the native bottom tabs and thus causing some miscalculations in the code, I presume. Had to completely uninstall it to stop edge-to-edge behaviour.

Not sure if this is something that can be resolved on react-native-bottom-tabs end.

@okwasniewski
Copy link
Collaborator

ations in the code, I presu

I'm happy that you found the root cause @shovel-kun, I'm not sure if this can be handled on bottom-tabs side, technically native views should adapt automatically.. I've created a feature request in the edge-to-edge repo to add additional styles: zoontek/react-native-edge-to-edge#38

@zoontek do you know if there is anything special I should do to handle edge-to-edge?

@shovel-kun
Copy link
Contributor Author

Btw to replicate go to example, yarn add react-native-edge-to-edge, and then build and run.

Result:
image

@zoontek
Copy link

zoontek commented Oct 30, 2024

@okwasniewski I will have a look, but I think there's no need for an adaptation of react-native-bottom-tabs. react-native-edge-to-edge use textbook implementation, so this is probably just a question of additional themes.

@zoontek
Copy link

zoontek commented Oct 30, 2024

@shovel-kun Following this: #97

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Android bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants