blog.unresolved.xyz

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

Wed Mar 23 2022
  • React Native
  • TIL

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

1import { Box, Fab, Icon, Text } from 'native-base'; 2import { Entypo } from '@expo/vector-icons'; 3import React from 'react'; 4import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'; 5 6export function XxxScreen() { 7 const bottomTabBarHeight = useBottomTabBarHeight() 8 9 return ( 10 <Box> 11 <Fab 12 colorScheme='green' 13 size="sm" 14 bottom={bottomTabBarHeight + 20} 15 icon={<Icon name="plus" as={Entypo} size={6} />} 16 /> 17 </Box> 18 ); 19} 20 21export default XxxScreen;