AnimatedTabBar

import { AnimatedTabBar } from '@coldsurfers/surf-ui/native/AnimatedTabBar'
import { TabBar, useTabBarHeight } from '@coldsurfers/surf-ui/native/TabBar'

function Screen() {
  const [visible, setVisible] = useState(true)
  const tabBarHeight = useTabBarHeight()

  return (
    <View style={{ flex: 1 }}>
      <ScrollView contentContainerStyle={{ paddingBottom: tabBarHeight }}>
        {/* ... */}
      </ScrollView>

      <AnimatedTabBar visible={visible}>
        {TABS.map(({ key, label, Icon }) => (
          <TabBar.Item
            key={key}
            label={label}
            active={key === selected}
            onPress={() => setSelected(key)}
            renderIcon={({ color, size, strokeWidth }) => (
              <Icon color={color} size={size} strokeWidth={strokeWidth} />
            )}
          />
        ))}
      </AnimatedTabBar>
    </View>
  )
}