Help with Android versions 35 and 36

[MarcosSarges]

Help with Android versions 35 and 36

I need help. I have many flows in my app. It's not worth adjusting them one by one, as it could cause other issues. So, I decided to manually add the bottom insets in Android versions >= 35.

I couldn't adjust them so that the bottom tab matches other screens, in this case, modals and stacks.

I also couldn't adjust them to handle them natively. Adjusting one point would break another (ok, legacy, I know, but I'm looking for a workaround).

If I could even adjust it in native Android with a patch, I could do it, but the lib is quite complex, and I'm lost.

[I'm using Google Translate to send this message]

"react": "18.2.0",
"react-native": "0.74.3",
"react-native-navigation": "7.48.0",
"react-native-navigation-hooks": "6.3.0",

 ext {
        buildToolsVersion = "36.0.0"
        minSdkVersion = 26
        compileSdkVersion = 36
        targetSdkVersion = 36
        ndkVersion = "26.1.10909125"
        kotlinVersion = "1.9.22"
        RNNKotlinVersion = kotlinVersion
        supportLibVersion = "28.0.0"
        androidXAnnotation = "1.1.0"
        androidXBrowser = "1.0.0"
 }

Insets come from the react-native-safe-area-context lib.
I adjusted the logic to register the other screens after my bootstrap screen loads the insets.

const initNavigationConfig = (insets: EdgeInsets) => {
  Promise.all([
    getAppTheme(),
    Ionicons.getImageSource("ios-arrow-back", 25, defaultTheme.colors.white),
  ]).then(([theme, backIcon]) => {
    


    let bottom = insets.bottom;
    if (Platform.OS === "ios" || Number(Platform.Version || 0) <= 34) {
      bottom = 0;
    }

    Navigation.setDefaultOptions({
      statusBar: {
        drawBehind: false,
        translucent: false,
        backgroundColor: theme.colors.bodyBg,
      },
      layout: {
        backgroundColor: theme.colors.background,
        orientation: ["portrait"],
        insets: { bottom },
      },
      topBar: {
        visible: true,
        animate: true,
        hideOnScroll: false,
        drawBehind: false,
        noBorder: true,
        elevation: 0,
        borderHeight: 0,
        title: {
          fontSize: 20,
          // @ts-ignore
          alignment: "left",
          color: theme.colors.gray900,
          fontFamily: theme.fontStack.semiBold,
        },
        background: {
          color: theme.colors.background,
        },
        backButton: {
          showTitle: false,
          icon: backIcon,
          visible: Platform.OS === "ios",
          color: theme.colors.gray900,
        },
      },
      bottomTabs: {
        visible: true,
        animate: true,
        backgroundColor: theme.colors.background,
      },
      bottomTab: {
        iconColor: theme.colors.gray500,
        selectedIconColor: theme.colors.primary500,
        textColor: theme.colors.gray500,
        selectedTextColor: theme.colors.primary500,
        fontFamily: theme.fontStack.semiBold,
        fontSize: 10,
      },
      animations: {
        push: {
          content: {
            enabled: true,
            x: {
              from: ScreenDimensions.SCREEN_WIDTH,
              to: 0,
              duration: 250,
            },
          },
        },
        pop: {
          content: {
            enabled: true,
            x: {
              from: 0,
              to: ScreenDimensions.SCREEN_WIDTH,
              duration: 200,
            },
          },
        },
        showModal: {
          waitForRender: true,
        },
      },
    });
  });
};

const registerScreens = (insets: EdgeInsets) => {
  initNavigationConfig(insets);

  Navigation.registerComponent(Screens.Login, () => withProviders(Login));
  Navigation.registerComponent(Screens.RegisterCarousel, () => withProviders(RegisterCarousel));
  //... recording other screens  
}

One thing I tried was setting the root of the bottom tab and passing layout.insets.bottom = 0 in the options, but it didn't work. I didn't quite understand the hierarchy.

I'm more familiar with ReactNavigation.

export const goToApp = async ({ index = 1, filterTab, componentId }: GoToAppProps = {}) => {
  await loadIcons(navigationIcons);
  const themeName = await getStoredAppThemeName();
  const iconColor = isDarkMode(themeName) ? darkTheme.colors.gray900 : theme.colors.gray900;
  const stack: LayoutRoot = {
    root: {
      bottomTabs: {
        id: "BOTTOM_TABS_LAYOUT",
        children: [
          // ....
        ],
        options: {
          topBar: {
            rightButtonColor: iconColor,
            leftButtonColor: theme.colors.gray900,
          },
          bottomTabs: {
            currentTabIndex: index,
          },
          layout: {
            insets: {
              bottom: 0,
            },
          },
        },
      },
    },
  };
  Navigation.pop(componentId!);
  await Navigation.setRoot(stack);
  await handleOpenNotificationWhenAppClosed();
};