[v4] | BottomSheetModalProvider conflicting with SafeAreaProvider

[lcglucas]

Bug

When I use BottomSheetModalProvider along with SafeAreaProvider, the navigation header gets hidden behind the StatusBar.

Environment info

Library	Version
@gorhom/bottom-sheet	4.5.1
react-native	0.71.13
react-native-reanimated	2.14.1
react-native-gesture-handler	2.9.0
react-native-safe-area-context	4.5.1

Steps To Reproduce

Add BottomSheetModalProvider along with SafeAreaProvider in the App.js file

Describe what you expected to happen:

This result was achieved when I commented out the BottomSheetModalProvider inside App.js.

Reproducible sample code

Obs

The funny thing is that this problem is happening on only one screen in the Stack. My code:

App.js

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Provider } from 'react-redux';
import { StyleSheet } from 'react-native';
import IdwallSdk from '@idwall/react-native-idwall-sdk';
import Toast, {
  BaseToast,
  ErrorToast,
  InfoToast
} from 'react-native-toast-message';

import { store } from './src/features/store';
import { AuthProvider } from './src/global/AuthContext';
import AppNavigator from './src/routes/AppNavigator';
import theme from './src/global/styles/theme';

const App = () => {
  IdwallSdk.initialize('5b7361da302e972f7b775f37a438a5ce');
  if (IdwallSdk.ios) {
    IdwallSdk.ios.setupPublicKeys([
      'AHYMQP+2/KIo32qYcfqnmSn+N/K3IdSZWlqa2Zan9eY=',
      'tDilFQ4366PMdAmN/kyNiBQy24YHjuDs6Qsa6Oc/4c8='
    ]);
  }

  const toastConfig = {
    success: props => (
      <BaseToast
        {...props}
        style={{ borderLeftColor: theme.colors.success }}
        text2NumberOfLines={2}
      />
    ),

    error: props => (
      <ErrorToast
        {...props}
        style={{ borderLeftColor: theme.colors.error }}
        text2NumberOfLines={2}
      />
    ),

    info: props => (
      <InfoToast
        {...props}
        style={{ borderLeftColor: theme.colors.secondary }}
        text2NumberOfLines={2}
      />
    )
  };

  return (
    <GestureHandlerRootView style={styles.root}>
      <ThemeProvider theme={theme}>
        <BottomSheetModalProvider>
          <Provider store={store}>
            <AuthProvider>
              <SafeAreaProvider>
                <AppNavigator />
              </SafeAreaProvider>
            </AuthProvider>
          </Provider>
          <Toast config={toastConfig} />
        </BottomSheetModalProvider>
      </ThemeProvider>
    </GestureHandlerRootView>
  );
};

export default App;

const styles = StyleSheet.create({
  root: { flex: 1 }
});

Navigation:

import React from 'react';
import { Pressable } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import PaymentMain from '../screens/Bank/PayBill';
import BarcodeCamera from './../screens/Bank/PayBill/BarcodeCamera';
import WriteCode from './../screens/Bank/PayBill/WriteCode';
import ConfirmData from './../screens/Bank/PayBill/ConfirmData';
import Password from './../screens/Bank/PayBill/Password';
import ReviewData from '../screens/Bank/PayBill/DDA/ReviewData';
import DDAList from '../screens/Bank/PayBill/DDA/DDAList';
import DisableDDA from '../screens/Bank/PayBill/DDA/DisableDDA';
import constant from '../constants/navigationStrings';
import Information from 'src/assets/icons/Information.svg';
import theme from 'src/global/styles/theme';

const PayBillStack = createNativeStackNavigator();

export const PayBillNavigation = () => {
  return (
    <PayBillStack.Navigator
      screenOptions={{
        headerShadowVisible: false,
        headerTitleAlign: 'center',
        headerStyle: {
          backgroundColor: theme.colors.secondary
        },
        headerTintColor: theme.colors.white,
        headerTitleStyle: {
          fontSize: theme.fontSize.medium,
          fontFamily: theme.fonts.bold
        }
      }}
      initialRouteName={constant.PAY_BILL_HOME}>
      <PayBillStack.Screen
        name={constant.PAY_BILL_HOME}
        component={PaymentMain}
        options={{ title: 'PAGAMENTOS' }}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_CAMERA}
        component={BarcodeCamera}
        options={{ orientation: 'landscape', headerShown: false }}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_WRITE_CODE}
        component={WriteCode}
        options={{
          title: 'LINHA DIGITÁVEL',
          headerStyle: { backgroundColor: theme.colors.white },
          headerTintColor: theme.colors.black
        }}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_CONFIRM_DATA}
        component={ConfirmData}
        options={{
          title: 'CONFIRMAR PAGAMENTO',
          headerStyle: { backgroundColor: theme.colors.white },
          headerTintColor: theme.colors.black
        }}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_PASSWORD}
        component={Password}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_REVIEW_DATA}
        component={ReviewData}
        options={{
          title: 'AUTORIZAR DDA',
          headerStyle: { backgroundColor: theme.colors.white },
          headerTintColor: theme.colors.black
        }}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_DDA_LIST}
        component={DDAList}
        options={({ navigation }) => ({
          title: 'PAGAR CONTA',
          headerRight: () => (
            <Pressable
              onPress={() =>
                navigation.navigate(constant.PAY_BILL_DISABLE_DDA)
              }>
              <Information
                width={24}
                height={24}
                style={{ color: `${theme.colors.white}` }}
              />
            </Pressable>
          )
        })}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_DISABLE_DDA}
        component={DisableDDA}
        options={{
          title: 'DÉBITO DIRETO AUTORIZADO',
          headerStyle: {
            backgroundColor: theme.colors.white
          },
          headerTintColor: theme.colors.black
        }}
      />
    </PayBillStack.Navigator>
  );
};

WriteCode Screen:

import React from 'react';
import { Pressable } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import PaymentMain from '../screens/Bank/PayBill';
import BarcodeCamera from './../screens/Bank/PayBill/BarcodeCamera';
import WriteCode from './../screens/Bank/PayBill/WriteCode';
import ConfirmData from './../screens/Bank/PayBill/ConfirmData';
import Password from './../screens/Bank/PayBill/Password';
import ReviewData from '../screens/Bank/PayBill/DDA/ReviewData';
import DDAList from '../screens/Bank/PayBill/DDA/DDAList';
import DisableDDA from '../screens/Bank/PayBill/DDA/DisableDDA';
import constant from '../constants/navigationStrings';
import Information from 'src/assets/icons/Information.svg';
import theme from 'src/global/styles/theme';

const PayBillStack = createNativeStackNavigator();

export const PayBillNavigation = () => {
  return (
    <PayBillStack.Navigator
      screenOptions={{
        headerShadowVisible: false,
        headerTitleAlign: 'center',
        headerStyle: {
          backgroundColor: theme.colors.secondary
        },
        headerTintColor: theme.colors.white,
        headerTitleStyle: {
          fontSize: theme.fontSize.medium,
          fontFamily: theme.fonts.bold
        }
      }}
      initialRouteName={constant.PAY_BILL_HOME}>
      <PayBillStack.Screen
        name={constant.PAY_BILL_HOME}
        component={PaymentMain}
        options={{ title: 'PAGAMENTOS' }}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_CAMERA}
        component={BarcodeCamera}
        options={{ orientation: 'landscape', headerShown: false }}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_WRITE_CODE}
        component={WriteCode}
        options={{
          title: 'LINHA DIGITÁVEL',
          headerStyle: { backgroundColor: theme.colors.white },
          headerTintColor: theme.colors.black
        }}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_CONFIRM_DATA}
        component={ConfirmData}
        options={{
          title: 'CONFIRMAR PAGAMENTO',
          headerStyle: { backgroundColor: theme.colors.white },
          headerTintColor: theme.colors.black
        }}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_PASSWORD}
        component={Password}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_REVIEW_DATA}
        component={ReviewData}
        options={{
          title: 'AUTORIZAR DDA',
          headerStyle: { backgroundColor: theme.colors.white },
          headerTintColor: theme.colors.black
        }}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_DDA_LIST}
        component={DDAList}
        options={({ navigation }) => ({
          title: 'PAGAR CONTA',
          headerRight: () => (
            <Pressable
              onPress={() =>
                navigation.navigate(constant.PAY_BILL_DISABLE_DDA)
              }>
              <Information
                width={24}
                height={24}
                style={{ color: `${theme.colors.white}` }}
              />
            </Pressable>
          )
        })}
      />
      <PayBillStack.Screen
        name={constant.PAY_BILL_DISABLE_DDA}
        component={DisableDDA}
        options={{
          title: 'DÉBITO DIRETO AUTORIZADO',
          headerStyle: {
            backgroundColor: theme.colors.white
          },
          headerTintColor: theme.colors.black
        }}
      />
    </PayBillStack.Navigator>
  );
};

ScreenContainer

import React from 'react';
import { useNavigation } from '@react-navigation/native';
import {
  StyleSheet,
  View,
  ScrollView,
  KeyboardAvoidingView,
  SafeAreaView,
  Platform
} from 'react-native';

import { floatToBRL } from 'src/helpers/utils/currency';
import ScreenTitle from 'src/components/Bank/ScreenTitle';
import ScreenDescription from 'src/components/Bank/ScreenDescription';
import ButtonBack from 'src/components/UI/ButtonBack';
import MyStatusBar from 'src/components/UI/StatusBar';
import LoadingContainer from 'src/components/UI/LoadingContainer';
import BalanceInfo from 'src/components/Bank/BalanceInfo';
import theme from 'src/global/styles/theme';

const ScreenContainer = ({
  title,
  description,
  onGoBack,
  headerRounded = false,
  children,
  loading,
  showBalance,
  balanceValue,
  balanceLoading,
  bgDark = false
}) => {
  const navigation = useNavigation();
  const descriptionElements = React.Children.toArray(description);

  const goBackHandler = () => {
    navigation.goBack();
  };

  return (
    <>
      <LoadingContainer loading={loading} />
      <KeyboardAvoidingView
        style={styles.root}
        behavior={Platform.OS === 'ios' && 'padding'}>
        <SafeAreaView style={styles.root}>
          <MyStatusBar
            barStyle={headerRounded ? 'light-content' : 'dark-content'}
            backgroundColor={
              headerRounded ? theme.colors.secondary : theme.colors.white
            }
          />
          <View style={[styles.root, bgDark && styles.rootBgDark]}>
            <ScrollView contentContainerStyle={styles.scrollViewContent}>
              <View
                style={[
                  styles.header,
                  headerRounded && styles.headerRounded,
                  !title && styles.headerWithoutTitle
                ]}>
                {title && (
                  <View style={styles.buttonHeaderContainer}>
                    <ButtonBack
                      white={headerRounded}
                      onPress={onGoBack ? onGoBack : goBackHandler}
                    />
                  </View>
                )}
                <View>
                  {title && (
                    <ScreenTitle dark={!headerRounded}>{title}</ScreenTitle>
                  )}
                  {descriptionElements?.length > 0 && (
                    <ScreenDescription>{descriptionElements}</ScreenDescription>
                  )}
                  {showBalance && (
                    <BalanceInfo
                      currentBalance={floatToBRL(balanceValue)}
                      isLoading={balanceLoading}
                    />
                  )}
                </View>
              </View>
              {children}
            </ScrollView>
          </View>
        </SafeAreaView>
      </KeyboardAvoidingView>
    </>
  );
};

export default ScreenContainer;

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: theme.colors.white
  },
  rootBgDark: {
    backgroundColor: theme.colors.background
  },
  scrollViewContent: {
    flexGrow: 1
  },
  header: {
    paddingTop: 20,
    paddingBottom: 10,
    paddingHorizontal: 20
  },
  headerRounded: {
    backgroundColor: `${theme.colors.secondary}`,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
    paddingBottom: 60
  },
  headerWithoutTitle: {
    paddingTop: 0,
    paddingBottom: 30
  },
  buttonHeaderContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  }
});

[lcglucas]

UPDATE: The problem seems to happen when I have orientation: 'landscape' in the Screen before.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.