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();
};

[MarcosSarges]

Answering me: It turned out I installed "react-native-safe-area-context" and used it to get the navigation bar value. From what I'd noticed, React Native's SafeareaView wasn't behaving well on Android 15.

And in RNN version 7.48.0, there's already a fix applying the bottom padding for the new navigation bar behavior, but only for using the bottom bar.

I opened this QA because I was worried about the wrapper's modal behavior, but applying the padding to the wrapper worked.

[felipe-xavier]

Hi @MarcosSarges , so in your fix you applied the safeAreaInsets.bottom from "react-native-safe-area-context" in all your screens ? Could you share please more details about your approach ?

[MarcosSarges]

PT-BR
Eu tenho aproximadamente 50 telas no app (na sua maioria exibidas como Modal), sendo lançadas de varios locais, então meu maior receio era ter que passar por todos os fluxo para testar de a margem inferior funcionaria.

Minha primeira tentativa foi remover o comportamento de padding bottom da bottom tab, e aplicar o margin bottom manualmente para aplicar em tudo, mas por varias vezes o valor configurado era ignorado.

Então voltei, e testei usar react-native-safe-area-context no wrapper que tenho na exibição das telas.

Uma coisa que percebi foi que ao usar o bottomTab é que a telas só consideram a parte interna. Então os estilos são aplicado dentro do bottomTab e não na tela em volta. Além disso o useInserts retorna 0 dentro do bottomTab. (acho que é isso, sinceramente não tenho certeza porque funcionou LMFAO)

Dai eu usei o useSafeAreaInsets e passei o bottom como padding nas telas. E funcionou corretamente.

EN [Google Translate]
I have approximately 50 screens in my app (mostly displayed as Modals), being launched from various locations, so my biggest concern was having to go through every flow to test whether the bottom margin would work.

My first attempt was to remove the bottom padding behavior from the bottom tab and manually apply the bottom margin to everything, but the configured value was ignored several times.

So I went back and tested using react-native-safe-area-context in the wrapper I have for displaying the screens.

One thing I noticed was that when using the bottomTab, the screens only consider the inner part. So the styles are applied inside the bottomTab and not to the surrounding screen. Furthermore, useInserts returns 0 inside the bottomTab. (I think that's it, honestly, I'm not sure why it worked LMFAO)

Then I used useSafeAreaInsets and passed the bottom as padding to the screens. And it worked correctly.

ScreenWrapper.tsx

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import PropTypes from "prop-types";
import { Navigation } from "react-native-navigation";
//...
import useInsets, { InsetsProvider } from "../../../hooks/useInsets";
//...
interface ScreenWrapperProps {
  children: React.ReactElement<{ componentId: string }>;
}

const ScreenWrapper = ({ children }: ScreenWrapperProps) => {
 //...
  const insets = useInsets();
 //...
  return (
    <ThemeProvider theme={theme}>
      <ScreenContainer insets={insets}>
        <LoadingModal />
        <OfflineFeedback />
        <BannerMaintenance screenName={screenName} />
        {children}
        <Snackbar />
      </ScreenContainer>
    </ThemeProvider>
  );
};

ScreenWrapper.propTypes = {
  children: PropTypes.object.isRequired,
};

export const withProviders = (Component: React.ComponentType<any>) => (props: any) =>
  (
    // @ts-ignore
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <InsetsProvider>
          {/* @ts-ignore */}
          <I18nextProvider i18n={i18n}>
            <ScreenWrapper>
              <Component {...props} />
            </ScreenWrapper>
          </I18nextProvider>
        </InsetsProvider>
      </PersistGate>
    </Provider>
  );

export default ScreenWrapper;

useInsets.tsx

import { useMemo } from "react";
import { SafeAreaProvider, useSafeAreaInsets } from "react-native-safe-area-context";

const useInsets = () => {
  const insets = useSafeAreaInsets();

  return useMemo(() => {
    return insets;
  }, [insets]);
};

export const InsetsProvider = SafeAreaProvider;

export default useInsets;

screenRegister.tsx

  //...
  Navigation.registerComponent(Screens.Initializing, () => withProviders(Initializing));
  Navigation.registerComponent(Screens.Login, () => withProviders(Login));
  Navigation.registerComponent(Screens.RegisterCarousel, () => withProviders(RegisterCarousel));
  //...

use-safe-area-insets