SafeAreaView on iOS devices

[kangyul]

When using react-native-collapsible-tab-view on iOS devices, the notch and dynamic island (iPhone14 Pro) hide the header and the tab. Is there any way to make it work like SafeAreaView?

[jonathanm-tkf]

Same here, I have the same problem, any steps to solve?

[andreialecu]

I'm not sure I understand how this relates to this library. You could wrap Tabs.Container in a SafeAreaView.

Unless I'm misunderstanding the issue.

[kangyul]

I tried wrapping Tabs.Container in a SafeAreaView but it doesn't work. Instead, the contents in Tabs.Tab disappear. What I did instead as a temporary solution was setting the 'headerShown' to true.

[devoren]

@kangyul when you use SafeAreaView did you set flex 1 ?

[MatLish00010]

i wrapperd my nav tabs in View, and when my tab is screen with this lib, i add padding top for view. Value i get from import {useSafeAreaInsets} from 'react-native-safe-area-context';

[hotaryuzaki]

i wrapperd my nav tabs in View, and when my tab is screen with this lib, i add padding top for view. Value i get from import {useSafeAreaInsets} from 'react-native-safe-area-context';

do you found any solution?? i want add insets from useSafeAreaInsets too

[VictorioMolina]

@hotaryuzaki Setting the minimum tab height to negative does the trick. In my case, since I want to hide the tab bar, I do: minHeaderHeight={-tabBarHeight}.

 /**
 * Home top tab navigator.
 *
 * @memberof module:HomeTabs
 * @type {React.FC}
 * @function TopTabNavigator
 * @returns {React.ReactElement} The top tab navigator.
 * @requires module:Hooks/i18n.useLanguage
 * @requires module:Hooks/Navigation.useStackHeaderHeight
 * @requires module:Tabs/Constants.TOP_TAB_BAR_HEIGHT
 * @requires module:Tabs/Constants.TOP_TAB_PAGER_PROPS
 * @requires module:HomeHeader
 * @requires module:PostsFeed
 * @requires module:ThreadsFeed
 */
function TabNavigator() {
  const { colors } = useTheme();

  const { t } = useLanguage();

  const headerHeight = useStackHeaderHeight();

  const tabBarHeight = TOP_TAB_BAR_HEIGHT;

  const pagerProps = TOP_TAB_PAGER_PROPS;

  /**
   * Renders the tab bar.
   *
   * @param {import("../../../navigation.d").RenderTopTabBarProps} props
   *   The tab bar props.
   * @returns {React.ReactElement} The tab bar.
   */
  const renderTabBar = (props) => (
    <MaterialTabBar
      {...props}
      activeColor={colors.primary}
      labelStyle={styles.label}
      indicatorStyle={globalStyles.hidden}
    />
  );

  return (
    <Tabs.Container
      lazy={false}
      initialTabName="posts"
      pagerProps={pagerProps}
      allowHeaderOverscroll={false}
      revealHeaderOnScroll
      headerHeight={headerHeight}
      minHeaderHeight={-tabBarHeight}
      tabBarHeight={tabBarHeight}
      snapThreshold={0.5}
      renderHeader={Header}
      renderTabBar={renderTabBar}
      headerContainerStyle={styles.headerContainer}
    >
      <Tabs.Tab
        name="posts"
        label={t("home.topTabNavigator.postsTabTitle")}
      >
        <PostsFeed />
      </Tabs.Tab>

      <Tabs.Tab
        name="threads"
        label={t("home.topTabNavigator.threadsTabTitle")}
      >
        <ThreadsFeed />
      </Tabs.Tab>
    </Tabs.Container>
  );
}

Also, I have been facing some issues with the Refresh Control, since I don't like it rendering at the top of the header in my use case, I just set allowHeaderOverscroll={false}, combined with const { progressViewOffset } = useCollapsibleStyle();:

 const { progressViewOffset } = useCollapsibleStyle();

    /**
     * `RefreshControl` component, used to provide *pull-to-refresh*
     * functionality for the `ScrollView`.
     *
     * @type {React.ReactElement}
     */
    const refreshControl = useMemo(
      () => (
        <RefreshControl
          progressViewOffset={progressViewOffset}
          onRefresh={onRefresh}
        />
      ),
      [progressViewOffset, onRefresh]
    );