react-native-dynamic-navbar

A fully configurable navigation bar component for React Native with glassmorphism effects and animated interactions.

Features

• ✨ Fully configurable - Inject any icons, labels, and actions
• 🎨 Glassmorphism theme - Frosted glass effect with optional real blur
• ✨ Animated interactions - Glow effects and smooth transitions
• 📍 Flexible positioning - Top or bottom placement
• 🌍 RTL/LTR support - Right-to-left and left-to-right layouts
• 🖼️ Multiple icon types - Vector icons, images (PNG/JPEG), and SVG
• 📦 TypeScript - Full type safety
• 🌟 Special buttons - Highlight center buttons (create/add actions)

Installation

npm install react-native-dynamic-navbar

or

yarn add react-native-dynamic-navbar

Peer Dependencies

Make sure you have these installed:

npm install react-native-vector-icons

Requirements

• React Native >= 0.72.0
• React >= 18.0.0
• react-native-vector-icons >= 10.0.0

Usage

import React, { useState } from 'react';
import { DynamicNavbar } from 'react-native-dynamic-navbar';

function App() {
  const [activeTab, setActiveTab] = useState('home');

  const navItems = [
    {
      id: 'home',
      label: 'Home',
      icon: { family: 'Ionicons', name: 'home', size: 24 },
      onPress: () => setActiveTab('home'),
    },
    {
      id: 'search',
      label: 'Search',
      icon: { family: 'Ionicons', name: 'search', size: 24 },
      onPress: () => setActiveTab('search'),
    },
    {
      id: 'profile',
      label: 'Profile',
      icon: { family: 'Ionicons', name: 'person-circle', size: 24 },
      onPress: () => setActiveTab('profile'),
    },
  ];

  return (
    <DynamicNavbar
      items={navItems}
      position="bottom"
      activeItemId={activeTab}
      showLabels={true}
      height={70}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | NavItem[] | required | Array of navigation items | | position | 'top' \| 'bottom' | 'bottom' | Position of the navbar | | height | number | 70 | Height in pixels | | activeItemId | string | undefined | Currently active item ID | | showLabels | boolean | true | Show labels below icons | | theme | 'default' \| 'glass' | 'default' | Theme variant | | direction | 'ltr' \| 'rtl' | 'ltr' | Layout direction | | enableGlow | boolean | true (glass) | Enable glow effect on press | | BlurComponent | Component | undefined | Optional blur component | | backgroundColor | string | undefined | Override background colour | | borderColor | string | undefined | Override border colour |

NavItem

| Property | Type | Required | Description | |----------|------|----------|-------------| | id | string | ✅ | Unique identifier | | label | string | ❌ | Text label | | icon | NavItemIcon | ✅ | Icon configuration | | onPress | () => void | ✅ | Callback function | | isSpecial | boolean | ❌ | Highlight as special button |

NavItemIcon

Supports three icon types:

Vector Icons:

icon: { type: 'vector', family: 'Ionicons', name: 'home', size: 24 }

Image Icons:

icon: { type: 'image', source: require('./icon.png'), width: 24, height: 24 }

SVG Icons:

import HomeIcon from './icons/home.svg';
icon: { type: 'svg', component: HomeIcon, width: 24, height: 24, color: '#fff' }

Examples

Glassmorphism Theme

import { BlurView } from '@react-native-community/blur';

<DynamicNavbar
  items={navItems}
  theme="glass"
  BlurComponent={BlurView}  // Optional for real blur
  blurIntensity={25}
  activeItemId={activeTab}
/>

RTL Support

<DynamicNavbar
  items={navItems}
  direction="rtl"  // Right-to-left layout
  activeItemId={activeTab}
/>

With Special Create Button

const navItems = [
  { id: 'home', label: 'Home', icon: { family: 'Ionicons', name: 'home' }, onPress: () => {} },
  { id: 'search', label: 'Search', icon: { family: 'Ionicons', name: 'search' }, onPress: () => {} },
  { 
    id: 'create', 
    label: 'Create', 
    icon: { family: 'Ionicons', name: 'add', size: 28 }, 
    onPress: () => {},
    isSpecial: true // Highlighted with gold background
  },
  { id: 'notifications', label: 'Alerts', icon: { family: 'Ionicons', name: 'notifications' }, onPress: () => {} },
  { id: 'profile', label: 'Profile', icon: { family: 'Ionicons', name: 'person' }, onPress: () => {} },
];

Top Navigation

<DynamicNavbar
  items={navItems}
  position="top"
  activeItemId={activeTab}
  showLabels={false}
  height={60}
/>

With React Navigation

import { useNavigation } from '@react-navigation/native';

function MyScreen() {
  const navigation = useNavigation();
  const [activeTab, setActiveTab] = useState('home');

  const navItems = [
    {
      id: 'home',
      label: 'Home',
      icon: { family: 'Ionicons', name: 'home', size: 20 },
      onPress: () => {
        setActiveTab('home');
        navigation.navigate('Home');
      },
    },
    // ... more items
  ];

  return <DynamicNavbar items={navItems} activeItemId={activeTab} />;
}

Themes

Default: Dark translucent design with gold accents

Glass: Glassmorphism/frosted effect with:

• Darker tinted glass background for better contrast
• Animated glow effects on press
• Smooth active state transitions
• Optional real blur with BlurComponent

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Shariq Ayaz

Author

Shariq Ayaz

• Email: [email protected]
• GitHub: @ShariqAyaz

⚠️ Beta Notice: This package is in active development. The glassmorphism theme and animation features are in beta. APIs may change in minor versions. Please report any issues on GitHub.

Control Item Visibility and State

You can dynamically show/hide or enable/disable items:

const items: NavItem[] = [
  {
    id: 'home',
    label: 'Home',
    icon: { type: 'vector', family: 'Ionicons', name: 'home' },
    onPress: () => {},
  },
  {
    id: 'premium',
    label: 'Premium',
    icon: { type: 'vector', family: 'Ionicons', name: 'star' },
    onPress: () => {},
    disabled: true, // Shown but not clickable (40% opacity)
  },
  {
    id: 'admin',
    label: 'Admin',
    icon: { type: 'vector', family: 'Ionicons', name: 'settings' },
    onPress: () => {},
    visible: false, // Completely hidden
  },
];

Use Cases

Conditional visibility:

{
  id: 'admin',
  visible: user.isAdmin, // Only show for admins
  // ...
}

Disabled state:

{
  id: 'premium',
  disabled: !user.isPremium, // Show but disable for free users
  // ...
}