reactnatively

BottomNavigation

A bottom tab bar for primary app navigation. Supports custom active icons, notification badges per tab, glass surface rendering, and label toggling.

Import

typescript

import { BottomNavigation } from 'reactnatively';

Interactive preview

Home Screen

AppNavigator.tsx

1import { useState } from 'react';2import { View, Text, StyleSheet } from 'react-native';3import { BottomNavigation } from 'reactnatively';4import { Ionicons } from '@expo/vector-icons';56const tabs = [7  { value: 'home', label: 'Home', icon: <Ionicons name="home" size={22} /> },8  { value: 'search', label: 'Search', icon: <Ionicons name="search" size={22} /> },9  { value: 'saved', label: 'Saved', icon: <Ionicons name="heart" size={22} /> },10  { value: 'profile', label: 'Profile', icon: <Ionicons name="person" size={22} /> },11];1213export function AppNavigator() {14  const [active, setActive] = useState('home');1516  return (17    <View style={styles.root}>18      <View style={styles.content}>19        <Text>{active}</Text>20      </View>21      <BottomNavigation22        items={tabs}23        value={active}24        onChange={setActive}25        glass26      />27    </View>28  );29}3031const styles = StyleSheet.create({32  root: { flex: 1 },33  content: { flex: 1 },34});

App shell

AppShell.tsx

1import { useState } from 'react';2import { View, Text, StyleSheet, SafeAreaView } from 'react-native';3import { Ionicons } from '@expo/vector-icons';4import { BottomNavigation } from 'reactnatively';56const tabs = [7  {8    value: 'home',9    label: 'Home',10    icon: <Ionicons name="home-outline" size={24} color="currentColor" />,11    activeIcon: <Ionicons name="home" size={24} color="currentColor" />,12  },13  {14    value: 'search',15    label: 'Search',16    icon: <Ionicons name="search-outline" size={24} color="currentColor" />,17    activeIcon: <Ionicons name="search" size={24} color="currentColor" />,18  },19  {20    value: 'inbox',21    label: 'Inbox',22    icon: <Ionicons name="mail-outline" size={24} color="currentColor" />,23    activeIcon: <Ionicons name="mail" size={24} color="currentColor" />,24    badge: 5,25  },26  {27    value: 'profile',28    label: 'Profile',29    icon: <Ionicons name="person-outline" size={24} color="currentColor" />,30    activeIcon: <Ionicons name="person" size={24} color="currentColor" />,31  },32];3334export function AppShell() {35  const [active, setActive] = useState('home');3637  const screens: Record<string, string> = {38    home: 'Home',39    search: 'Search',40    inbox: 'Inbox',41    profile: 'Profile',42  };4344  return (45    <SafeAreaView style={styles.root}>46      <View style={styles.content}>47        <Text>{screens[active]}</Text>48      </View>49      <BottomNavigation50        items={tabs}51        value={active}52        onChange={setActive}53        glass54      />55    </SafeAreaView>56  );57}5859const styles = StyleSheet.create({60  root: { flex: 1 },61  content: { flex: 1 },62});

Icon-only mode

CompactNav.tsx

1import { useState } from 'react';2import { Ionicons } from '@expo/vector-icons';3import { BottomNavigation } from 'reactnatively';45const items = [6  { value: 'feed', label: 'Feed', icon: <Ionicons name="layers-outline" size={24} color="currentColor" /> },7  { value: 'explore', label: 'Explore', icon: <Ionicons name="compass-outline" size={24} color="currentColor" /> },8  { value: 'create', label: 'Create', icon: <Ionicons name="add-circle-outline" size={26} color="currentColor" /> },9  { value: 'alerts', label: 'Alerts', icon: <Ionicons name="notifications-outline" size={24} color="currentColor" />, badge: 12 },10  { value: 'me', label: 'Me', icon: <Ionicons name="person-circle-outline" size={24} color="currentColor" /> },11];1213export function CompactNav() {14  const [tab, setTab] = useState('feed');15  return (16    <BottomNavigation17      items={items}18      value={tab}19      onChange={setTab}20      showLabel={false}21      glass22    />23  );24}

Props

Prop	Type	Default	Description
items	Array<{ label, icon, activeIcon?, value, badge? }>	—	Tab definitions. Each item requires label, icon, and value.
value	string	undefined	Controlled active tab value.
defaultValue	string	undefined	Initial active tab for uncontrolled usage.
onChange	(value: string) => void	undefined	Called when a tab is pressed.
glass	boolean	false	Renders the bar on a Liquid Glass surface.
showLabel	boolean	true	Toggles visibility of tab labels.
style	StyleProp<ViewStyle>	undefined	Style applied to the bar container.