import React from 'react'; import { View, TouchableOpacity, StyleSheet, Platform } from 'react-native'; import Svg, { Path } from 'react-native-svg'; import { Ionicons, Feather, MaterialCommunityIcons } from '@expo/vector-icons'; const TAB_BAR_HEIGHT = 80; const FAB_SIZE = 60; const FAB_RADIUS = FAB_SIZE / 2; const NOTCH_WIDTH = 90; const NOTCH_DEPTH = 38; const ICON_COLOR = 'rgba(47, 84, 235, 0.4)'; const ICON_ACTIVE_BG = '#2F54EB'; const ICON_ACTIVE_COLOR = '#fff'; const ICON_INACTIVE_COLOR = ICON_COLOR; const BottomTabBar = ({ state, descriptors, navigation, onFabPress, fabFocused = false, }) => { // Notification dot for the chart icon (example: always true) const showChartNotification = true; return ( {/* SVG Background with Notch */} {/* Tab Icons */} {/* Home */} } onPress={() => navigation.navigate('Home')} accessibilityLabel="Home" /> {/* Search */} } onPress={() => navigation.navigate('Search')} accessibilityLabel="Search" /> {/* Spacer for FAB */} {/* Chart/Stats */} {showChartNotification && ( )} } onPress={() => navigation.navigate('Stats')} accessibilityLabel="Stats" /> {/* Profile */} } onPress={() => navigation.navigate('Profile')} accessibilityLabel="Profile" /> {/* Floating Action Button */} ); }; const TabIcon = ({ icon, onPress, accessibilityLabel }) => ( {icon} ); const styles = StyleSheet.create({ container: { position: 'absolute', left: 0, right: 0, bottom: 0, height: TAB_BAR_HEIGHT, backgroundColor: 'transparent', zIndex: 10, alignItems: 'center', justifyContent: 'flex-end', }, svg: { position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 1, }, tabRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%', paddingHorizontal: 28, height: TAB_BAR_HEIGHT, zIndex: 2, }, tabIcon: { flex: 1, alignItems: 'center', justifyContent: 'center', height: 48, }, fab: { position: 'absolute', left: '50%', bottom: TAB_BAR_HEIGHT - NOTCH_DEPTH - FAB_RADIUS + 6, transform: [{ translateX: -FAB_RADIUS }], zIndex: 20, elevation: 8, shadowColor: '#2F54EB', shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.18, shadowRadius: 8, }, fabInner: { width: FAB_SIZE, height: FAB_SIZE, borderRadius: FAB_RADIUS, backgroundColor: '#2F54EB', alignItems: 'center', justifyContent: 'center', elevation: 8, shadowColor: '#2F54EB', shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.18, shadowRadius: 8, }, chartIconBg: { width: 38, height: 38, borderRadius: 10, backgroundColor: ICON_ACTIVE_BG, alignItems: 'center', justifyContent: 'center', position: 'relative', }, notificationDot: { position: 'absolute', top: 7, right: 7, width: 8, height: 8, borderRadius: 4, backgroundColor: '#FF3B30', borderWidth: 1.5, borderColor: '#fff', }, }); export default BottomTabBar; import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import BottomTabBar from './src/components/BottomTabBar'; const Tab = createBottomTabNavigator(); const DummyScreen = ({ label }) => ( {label} ); export default function App() { return ( ( alert('FAB Pressed!')} /> )} screenOptions={{ headerShown: false, }} > {() => } {() => } {() => } {() => } ); } const styles = StyleSheet.create({ screen: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#F7F9FC', }, screenText: { fontSize: 28, color: '#2F54EB', fontWeight: 'bold', }, }); { "name": "custom-bottom-nav-fab", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/vector-icons": "^13.0.0", "@react-navigation/bottom-tabs": "^6.5.7", "@react-navigation/native": "^6.1.6", "react": "18.2.0", "react-native": "0.71.8", "react-native-svg": "13.4.0" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true } module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], }; }; { "expo": { "name": "Custom Bottom Nav FAB", "slug": "custom-bottom-nav-fab", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" } }, "web": { "favicon": "./assets/favicon.png" } } }