blog.unresolved.xyz
Wed Mar 23 2022

NativeBaseのFabがBottomTab(React Navigation)にかぶってしまう

BottomTabのheightは useBottomTabBarHeight で取得できるので、こんな感じで逃げられる。

import { Box, Fab, Icon, Text } from 'native-base';
import { Entypo } from '@expo/vector-icons';
import React from 'react';
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';

export function XxxScreen() {
  const bottomTabBarHeight = useBottomTabBarHeight()

  return (
    <Box>
      <Fab
        colorScheme='green'
        size="sm"
        bottom={bottomTabBarHeight + 20}
        icon={<Icon name="plus" as={Entypo} size={6} />}
      />
    </Box>
  );
}

export default XxxScreen;
Author
Daisuke Tsuji

Daisuke Tsuji

フリーのSoftware Developer。

TypeScriptを触ってる時間が多い。コーディングもマークアップもライティングもデザインもSEOもやるタイプ。

だいたいどれもだめ。業務委託のお仕事募集中。