버튼의 bottom 좌표는 iOS냐 안드로이드냐에 따라 다릅니다. 그리고 홈 버튼이 없는 iPhone X 이상 기종인지 아닌지에 따라 또 달라집니다. 안드로이드에서는 bottom 값을 탭 바 높이의 1/2 크기로 지정하고, iOS에서는 useSafeAreaInsets로 하단 여백 크기를 알아낸 뒤 여백 크기만큼 빼주고 여기서 4를 더 빼줍니다. 이렇게 하면 버튼을 탭 바 테두리에 걸칠 수 있습니다.

추가로 가로 위치를 설정하는 과정에서 left: 50%로 중앙에 위치시킨 다음 현재 버튼 크기의 1/2만큼 좌측으로 이동하도록 transform 스타일을 적용해줬습니다. 이 버튼은 하단 탭보다 위 레이어에 보여야 하기 때문에 zIndex 값을 5로 설정했습니다.

컴포넌트를 다 작성했으면 MainTab에서 다음과 같이 사용해보세요.

screens/MainTab.js

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomeStack from './HomeStack';
import MyProfileStack from './MyProfileStack';
import Icon from 'react-native-vector-icons/MaterialIcons';
import CameraButton from '../components/CameraButton';
import {StyleSheet, View} from 'react-native';

const Tab = createBottomTabNavigator();

function MainTab() {
  return (
    <>
      <View style={styles.block}>
        <Tab.Navigator
          screenOptions={{
            headerShown: false,
            tabBarShowLabel: false,
            tabBarActiveTintColor: '#6200ee',
          }}>
          <Tab.Screen
            name="HomeStack"
            component={HomeStack}
            options={{
              tabBarIcon: ({color}) => (
                <Icon name="home" size={24} color={color} />
              ),
            }}
          />
          <Tab.Screen
            name="MyProfileStack"
            component={MyProfileStack}
            options={{
              tabBarIcon: ({color}) => (
                <Icon name="person" size={24} color={color} />
              ),
            }}
          />
        </Tab.Navigator>
      </View>
      <CameraButton />
    </>
  );
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
    zIndex: 0,
  },
});

export default MainTab;

이 코드에서는 CameraButton이 하단 탭보다 더 위 레이어에 보여지게끔 기존 코드를 View로 한번 감싸서 zIndex를 0으로 설정하고, Fragment로 한 번 더 감싸서 View 코드 하단에 CameraButton을 넣었습니다.

앞에서 확인한 그림 9-2처럼 버튼이 탭 바 위에 잘 나타났나요?