@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

package/dist/module/lib/Components/TabBar/TabBar.js

@@ -0,0 +1,397 @@
+"use strict";
+
+import { BlurView } from '@sbaiahmed1/react-native-blur';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming } from 'react-native-reanimated';
+import { useStyleSheet, useTheme } from "../../../styles/index.js";
+import { useTimingConfig } from "../../Animations/useTimingConfig.js";
+import { Placeholder } from "../../Symbols/index.js";
+import { Box, Pressable } from "../Utility/index.js";
+import { TabBarContextProvider, useTabBarContext } from "./TabBarContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TAB_BAR_HEIGHT = 60;
+const PILL_INSET = 4;
+const _worklet_12151274743312_init_data = {
+  code: "function TabBarTsx1(){const{pressProgress}=this.__closure;return{transform:[{scale:pressProgress.value}]};}",
+  location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/TabBar/TabBar.tsx",
+  sourceMap: "{\"version\":3,\"names\":[\"TabBarTsx1\",\"pressProgress\",\"__closure\",\"transform\",\"scale\",\"value\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/TabBar/TabBar.tsx\"],\"mappings\":\"AAkEI,SAAAA,WAAA,QAAAC,aAAA,OAAAC,SAAA,OAAO,CACLC,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAEH,aAAa,CAACI,KAAM,CAAC,CAC5C,CAAC\",\"ignoreList\":[]}"
+};
+const _worklet_7396791557540_init_data = {
+  code: "function TabBarTsx2(){const{activeProgress}=this.__closure;return{opacity:activeProgress.value};}",
+  location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/TabBar/TabBar.tsx",
+  sourceMap: "{\"version\":3,\"names\":[\"TabBarTsx2\",\"activeProgress\",\"__closure\",\"opacity\",\"value\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/TabBar/TabBar.tsx\"],\"mappings\":\"AAyEI,SAAAA,WAAA,QAAAC,cAAA,OAAAC,SAAA,OAAO,CACLC,OAAO,CAAEF,cAAc,CAACG,KAC1B,CAAC\",\"ignoreList\":[]}"
+};
+const _worklet_11977595001241_init_data = {
+  code: "function TabBarTsx3(){const{activeProgress}=this.__closure;return{opacity:1-activeProgress.value};}",
+  location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/TabBar/TabBar.tsx",
+  sourceMap: "{\"version\":3,\"names\":[\"TabBarTsx3\",\"activeProgress\",\"__closure\",\"opacity\",\"value\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/TabBar/TabBar.tsx\"],\"mappings\":\"AAgFI,SAAAA,WAAA,QAAAC,cAAA,OAAAC,SAAA,OAAO,CACLC,OAAO,CAAE,CAAC,CAAGF,cAAc,CAACG,KAC9B,CAAC\",\"ignoreList\":[]}"
+};
+const useTabBarItemAnimations = ({
+  isActive
+}) => {
+  const activeProgress = useSharedValue(isActive ? 1 : 0);
+  const pressProgress = useSharedValue(1);
+  const activeTimingConfig = useTimingConfig({
+    duration: 200,
+    easing: 'easeInOut'
+  });
+  const pressInTimingConfig = useTimingConfig({
+    duration: 100,
+    easing: 'easeOut'
+  });
+  const pressOutTimingConfig = useTimingConfig({
+    duration: 100,
+    easing: 'easeOut'
+  });
+  useEffect(() => {
+    activeProgress.value = withDelay(50, withTiming(isActive ? 1 : 0, activeTimingConfig));
+    return () => cancelAnimation(activeProgress);
+  }, [isActive, activeProgress, activeTimingConfig]);
+  const onPressIn = () => {
+    pressProgress.value = withTiming(0.9, pressInTimingConfig);
+  };
+  const onPressOut = () => {
+    pressProgress.value = withSequence(withTiming(0.95, {
+      duration: 0
+    }), withTiming(1, pressOutTimingConfig));
+  };
+  const scaleStyle = useAnimatedStyle(function TabBarTsx1Factory({
+    _worklet_12151274743312_init_data,
+    pressProgress
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const TabBarTsx1 = () => ({
+      transform: [{
+        scale: pressProgress.value
+      }]
+    });
+    TabBarTsx1.__closure = {
+      pressProgress
+    };
+    TabBarTsx1.__workletHash = 12151274743312;
+    TabBarTsx1.__pluginVersion = "0.6.1";
+    TabBarTsx1.__initData = _worklet_12151274743312_init_data;
+    TabBarTsx1.__stackDetails = _e;
+    return TabBarTsx1;
+  }({
+    _worklet_12151274743312_init_data,
+    pressProgress
+  }), [pressProgress]);
+  const activeIconStyle = useAnimatedStyle(function TabBarTsx2Factory({
+    _worklet_7396791557540_init_data,
+    activeProgress
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const TabBarTsx2 = () => ({
+      opacity: activeProgress.value
+    });
+    TabBarTsx2.__closure = {
+      activeProgress
+    };
+    TabBarTsx2.__workletHash = 7396791557540;
+    TabBarTsx2.__pluginVersion = "0.6.1";
+    TabBarTsx2.__initData = _worklet_7396791557540_init_data;
+    TabBarTsx2.__stackDetails = _e;
+    return TabBarTsx2;
+  }({
+    _worklet_7396791557540_init_data,
+    activeProgress
+  }), [activeProgress]);
+  const inactiveIconStyle = useAnimatedStyle(function TabBarTsx3Factory({
+    _worklet_11977595001241_init_data,
+    activeProgress
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const TabBarTsx3 = () => ({
+      opacity: 1 - activeProgress.value
+    });
+    TabBarTsx3.__closure = {
+      activeProgress
+    };
+    TabBarTsx3.__workletHash = 11977595001241;
+    TabBarTsx3.__pluginVersion = "0.6.1";
+    TabBarTsx3.__initData = _worklet_11977595001241_init_data;
+    TabBarTsx3.__stackDetails = _e;
+    return TabBarTsx3;
+  }({
+    _worklet_11977595001241_init_data,
+    activeProgress
+  }), [activeProgress]);
+  return {
+    onPressIn,
+    onPressOut,
+    scaleStyle,
+    activeIconStyle,
+    inactiveIconStyle
+  };
+};
+const _worklet_12147453282099_init_data = {
+  code: "function TabBarTsx4(){const{pillProgress,itemWidth,itemHeight,PILL_INSET}=this.__closure;return{transform:[{translateX:pillProgress.value}],width:itemWidth.value,height:itemHeight.value-PILL_INSET*2};}",
+  location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/TabBar/TabBar.tsx",
+  sourceMap: "{\"version\":3,\"names\":[\"TabBarTsx4\",\"pillProgress\",\"itemWidth\",\"itemHeight\",\"PILL_INSET\",\"__closure\",\"transform\",\"translateX\",\"value\",\"width\",\"height\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/TabBar/TabBar.tsx\"],\"mappings\":\"AAsJI,SAAAA,WAAA,QAAAC,YAAA,CAAAC,SAAA,CAAAC,UAAA,CAAAC,UAAA,OAAAC,SAAA,OAAO,CACLC,SAAS,CAAE,CAAC,CAAEC,UAAU,CAAEN,YAAY,CAACO,KAAM,CAAC,CAAC,CAC/CC,KAAK,CAAEP,SAAS,CAACM,KAAK,CACtBE,MAAM,CAAEP,UAAU,CAACK,KAAK,CAAGJ,UAAU,CAAG,CAC1C,CAAC\",\"ignoreList\":[]}"
+};
+const useTabBarPillLayout = ({
+  active,
+  children
+}) => {
+  const pillProgress = useSharedValue(0);
+  const itemWidth = useSharedValue(0);
+  const itemHeight = useSharedValue(0);
+  const hasLayoutRef = useRef(false);
+  const timingConfig = useTimingConfig({
+    duration: 300,
+    easing: 'easeInOut'
+  });
+  const getActiveIndex = useCallback(() => {
+    return React.Children.toArray(children).findIndex(child => {
+      if (/*#__PURE__*/React.isValidElement(child)) {
+        return child.props.value === active;
+      }
+      return false;
+    });
+  }, [active, children]);
+  const onLayout = e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    const count = React.Children.count(children);
+    const slotWidth = (width - PILL_INSET * 2) / count;
+    itemWidth.value = slotWidth;
+    itemHeight.value = height;
+    if (!hasLayoutRef.current) {
+      hasLayoutRef.current = true;
+      const index = getActiveIndex();
+      if (index >= 0) {
+        pillProgress.value = index * slotWidth;
+      }
+    }
+  };
+  useEffect(() => {
+    if (!hasLayoutRef.current) return;
+    const index = getActiveIndex();
+    if (index >= 0 && itemWidth.value > 0) {
+      pillProgress.value = withTiming(index * itemWidth.value, timingConfig);
+    }
+    return () => cancelAnimation(pillProgress);
+  }, [itemWidth, pillProgress, getActiveIndex, timingConfig]);
+  const animatedPillStyle = useAnimatedStyle(function TabBarTsx4Factory({
+    _worklet_12147453282099_init_data,
+    pillProgress,
+    itemWidth,
+    itemHeight,
+    PILL_INSET
+  }) {
+    const _e = [new global.Error(), -5, -27];
+    const TabBarTsx4 = () => ({
+      transform: [{
+        translateX: pillProgress.value
+      }],
+      width: itemWidth.value,
+      height: itemHeight.value - PILL_INSET * 2
+    });
+    TabBarTsx4.__closure = {
+      pillProgress,
+      itemWidth,
+      itemHeight,
+      PILL_INSET
+    };
+    TabBarTsx4.__workletHash = 12147453282099;
+    TabBarTsx4.__pluginVersion = "0.6.1";
+    TabBarTsx4.__initData = _worklet_12147453282099_init_data;
+    TabBarTsx4.__stackDetails = _e;
+    return TabBarTsx4;
+  }({
+    _worklet_12147453282099_init_data,
+    pillProgress,
+    itemWidth,
+    itemHeight,
+    PILL_INSET
+  }), [pillProgress, itemWidth, itemHeight]);
+  return {
+    onLayout,
+    animatedPillStyle
+  };
+};
+export function TabBarItem({
+  value,
+  label,
+  icon,
+  activeIcon,
+  style,
+  ...props
+}) {
+  const styles = useStyles();
+  const {
+    active,
+    onTabPress
+  } = useTabBarContext();
+  const isActive = active === value;
+  const Icon = icon ?? Placeholder;
+  const ActiveIcon = activeIcon ?? Icon;
+  const {
+    onPressIn,
+    onPressOut,
+    scaleStyle,
+    activeIconStyle,
+    inactiveIconStyle
+  } = useTabBarItemAnimations({
+    isActive
+  });
+  function onPress() {
+    onTabPress(value);
+  }
+  return /*#__PURE__*/_jsxs(Pressable, {
+    style: StyleSheet.flatten([styles.item, style]),
+    onPress: onPress,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    accessibilityRole: "tab",
+    accessibilityLabel: label ?? value,
+    accessibilityState: {
+      selected: isActive
+    },
+    ...props,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: scaleStyle,
+      children: /*#__PURE__*/_jsxs(Box, {
+        style: styles.itemIconContainer,
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.itemIcon, inactiveIconStyle],
+          children: /*#__PURE__*/_jsx(Icon, {
+            size: 20
+          })
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.itemIcon, activeIconStyle],
+          children: /*#__PURE__*/_jsx(ActiveIcon, {
+            size: 20
+          })
+        })]
+      })
+    }), label && /*#__PURE__*/_jsx(Text, {
+      style: [styles.itemText, isActive && styles.activeItemText],
+      numberOfLines: 1,
+      children: label
+    })]
+  });
+}
+TabBarItem.displayName = 'TabBarItem';
+
+/**
+ * A horizontal tab bar with animated pill background and icon transitions.
+ * Provides smooth animations for active state changes and press interactions.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_navigation-tabbar--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_navigation-tabbar--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ *
+ * @example
+ * import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative';
+ * import { HomeFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * const [activeTab, setActiveTab] = useState('home');
+ * <TabBar active={activeTab} onTabPress={setActiveTab}>
+ *   <TabBarItem value="home" label="Home" icon={HomeFill} />
+ *   <TabBarItem value="settings" label="Settings" icon={Settings} />
+ * </TabBar>
+ */
+export function TabBar({
+  active,
+  onTabPress,
+  children,
+  ...props
+}) {
+  const styles = useStyles();
+  const {
+    theme,
+    colorScheme
+  } = useTheme();
+  const {
+    onLayout,
+    animatedPillStyle
+  } = useTabBarPillLayout({
+    active,
+    children
+  });
+  function handleTabPress(value) {
+    onTabPress?.(value);
+  }
+  return /*#__PURE__*/_jsx(TabBarContextProvider, {
+    value: {
+      active,
+      onTabPress: handleTabPress
+    },
+    children: /*#__PURE__*/_jsxs(Box, {
+      style: styles.container,
+      onLayout: onLayout,
+      accessibilityRole: "tablist",
+      ...props,
+      children: [children, Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {
+        style: styles.androidBackground
+      }) : /*#__PURE__*/_jsx(BlurView, {
+        style: styles.blur,
+        blurAmount: theme.blur.lg,
+        blurType: colorScheme === 'dark' ? 'dark' : 'light',
+        overlayColor: colorScheme === 'dark' ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.2)'
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.pill, animatedPillStyle]
+      })]
+    })
+  });
+}
+const useStyles = () => useStyleSheet(t => ({
+  container: {
+    height: TAB_BAR_HEIGHT,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: t.spacings.s4,
+    alignItems: 'center',
+    borderRadius: t.borderRadius.full,
+    backgroundColor: t.colors.bg.mutedTransparent,
+    overflow: 'hidden'
+  },
+  blur: {
+    ...StyleSheet.absoluteFillObject,
+    height: TAB_BAR_HEIGHT + t.sizes.s16,
+    zIndex: -1
+  },
+  androidBackground: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: -1,
+    backgroundColor: t.colors.bg.muted
+  },
+  item: {
+    flex: 1,
+    paddingVertical: t.spacings.s4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: t.spacings.s2
+  },
+  itemText: {
+    ...t.typographies.body4,
+    paddingHorizontal: t.spacings.s12,
+    color: t.colors.text.base
+  },
+  itemIcon: {
+    position: 'absolute'
+  },
+  itemIconContainer: {
+    width: 20,
+    height: 20,
+    position: 'relative'
+  },
+  activeItemText: {
+    ...t.typographies.body4SemiBold
+  },
+  pill: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    top: PILL_INSET,
+    left: PILL_INSET,
+    borderRadius: t.borderRadius.full,
+    backgroundColor: t.colors.bg.mutedTransparent
+  }
+}), []);
+//# sourceMappingURL=TabBar.js.map

package/dist/module/lib/Components/TabBar/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BlurView","React","useCallback","useEffect","useRef","Platform","StyleSheet","Text","View","Animated","cancelAnimation","useAnimatedStyle","useSharedValue","withDelay","withSequence","withTiming","useStyleSheet","useTheme","useTimingConfig","Placeholder","Box","Pressable","TabBarContextProvider","useTabBarContext","jsx","_jsx","jsxs","_jsxs","TAB_BAR_HEIGHT","PILL_INSET","_worklet_12151274743312_init_data","code","location","sourceMap","_worklet_7396791557540_init_data","_worklet_11977595001241_init_data","useTabBarItemAnimations","isActive","activeProgress","pressProgress","activeTimingConfig","duration","easing","pressInTimingConfig","pressOutTimingConfig","value","onPressIn","onPressOut","scaleStyle","TabBarTsx1Factory","_e","global","Error","TabBarTsx1","transform","scale","__closure","__workletHash","__pluginVersion","__initData","__stackDetails","activeIconStyle","TabBarTsx2Factory","TabBarTsx2","opacity","inactiveIconStyle","TabBarTsx3Factory","TabBarTsx3","_worklet_12147453282099_init_data","useTabBarPillLayout","active","children","pillProgress","itemWidth","itemHeight","hasLayoutRef","timingConfig","getActiveIndex","Children","toArray","findIndex","child","isValidElement","props","onLayout","e","width","height","nativeEvent","layout","count","slotWidth","current","index","animatedPillStyle","TabBarTsx4Factory","TabBarTsx4","translateX","TabBarItem","label","icon","activeIcon","style","styles","useStyles","onTabPress","Icon","ActiveIcon","onPress","flatten","item","accessibilityRole","accessibilityLabel","accessibilityState","selected","itemIconContainer","itemIcon","size","itemText","activeItemText","numberOfLines","displayName","TabBar","theme","colorScheme","handleTabPress","container","OS","androidBackground","blur","blurAmount","lg","blurType","overlayColor","pill","t","flexDirection","justifyContent","padding","spacings","s4","alignItems","borderRadius","full","backgroundColor","colors","bg","mutedTransparent","overflow","absoluteFillObject","sizes","s16","zIndex","muted","flex","paddingVertical","gap","s2","typographies","body4","paddingHorizontal","s12","color","text","base","position","body4SemiBold","pointerEvents","top","left"],"sourceRoot":"../../../../../src","sources":["lib/Components/TabBar/TabBar.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/TabBar/TabBar.mdx

@@ -0,0 +1,185 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TabBarStories from './TabBar.stories';
+import { TabBar } from './TabBar';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility';
+
+<Meta title='Navigation/TabBar' of={TabBarStories} />
+
+# 🔘 TabBar
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+TabBar is an animated navigation component that allows users to switch between different pages, views and sections. It features smooth transitions, blur effects, and customizable icons for each tab. Designed specifically for React Native applications, it seamlessly integrates with React Navigation and Expo Router.
+
+> **Note:** This component uses `react-native-reanimated` for animations and `@sbaiahmed1/react-native-blur` for visual effects. These native libraries have limited support in web-based Storybook environments and may not render with full fidelity. For the complete experience with all animations and blur effects, please test the component in the native sandbox app on iOS or Android.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10804-1045&m=dev).
+
+
+## Anatomy
+
+<Canvas of={TabBarStories.Base} />
+
+- **Tab Items**: Individual interactive elements representing different views.
+- **Active Indicator (Pill)**: Animated background highlighting the active tab
+- **Icons**: Visual indicators for each tab (with active and inactive states)
+- **Labels**: Text descriptions for each tab
+
+## Properties
+
+### Overview
+
+<Canvas of={TabBarStories.Base} />
+<Controls of={TabBarStories.Base} />
+
+### Complex Example
+
+Tab bar with five items, demonstrating scalability with multiple tabs:
+
+<Canvas of={TabBarStories.Complex} />
+
+### Fallback Behavior
+
+When icons are not provided, the component gracefully falls back to placeholder icons. If a label isn't provided, the icon is vertically centered.
+
+<Canvas of={TabBarStories.MissingLabel} />
+
+## Responsive Layout
+
+The TabBar automatically adjusts to accommodate different numbers of tabs while maintaining equal spacing and proper alignment. The animated pill indicator smoothly transitions between tabs as users switch views.
+
+## Accessibility
+
+- Proper accessibility roles (`tablist` and `tab`) with labels for screen readers
+- Active state communicated through `accessibilityState` and visual indicators (bold text, icon changes)
+- Fully pressable items with appropriate touch targets and smooth animation feedback
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+```tsx
+import { useState } from 'react';
+import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative';
+import { Home, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  const [active, setActive] = useState('home');
+
+  return (
+    <TabBar active={active} onTabPress={setActive}>
+      <TabBarItem value='home' label='Home' icon={Home} />
+      <TabBarItem value='settings' label='Settings' icon={Settings} />
+    </TabBar>
+  );
+}
+```
+
+### With Active Icons
+
+Provide different icons for active and inactive states:
+
+```tsx
+import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative';
+import { Home, HomeFill, Settings, SettingsFill } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  const [active, setActive] = useState('home');
+
+  return (
+    <TabBar active={active} onTabPress={setActive}>
+      <TabBarItem 
+        value='home' 
+        label='Home' 
+        icon={Home} 
+        activeIcon={HomeFill} 
+      />
+      <TabBarItem 
+        value='settings' 
+        label='Settings' 
+        icon={Settings}
+        activeIcon={SettingsFill}
+      />
+    </TabBar>
+  );
+}
+```
+
+### Integration with React Navigation
+
+Use TabBar as a custom tab bar for React Navigation's bottom tab navigator:
+
+```tsx
+import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Home, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+const Tab = createBottomTabNavigator();
+
+function MyTabs() {
+  return (
+    <Tab.Navigator
+      tabBar={({ state, navigation }) => (
+        <TabBar
+          active={state.routes[state.index].name}
+          onTabPress={(routeName) => navigation.navigate(routeName)}
+        >
+          <TabBarItem value='Home' label='Home' icon={Home} />
+          <TabBarItem value='Settings' label='Settings' icon={Settings} />
+        </TabBar>
+      )}
+    >
+      <Tab.Screen name='Home' component={HomeScreen} />
+      <Tab.Screen name='Settings' component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}
+```
+
+### Integration with Expo Router
+
+TabBar works seamlessly with Expo Router's tab layout:
+
+```tsx
+// app/(tabs)/_layout.tsx
+import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative';
+import { Tabs } from 'expo-router';
+import { Home, Profile } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      tabBar={({ state, navigation }) => (
+        <TabBar
+          active={state.routes[state.index].name}
+          onTabPress={(routeName) => navigation.navigate(routeName)}
+        >
+          <TabBarItem value='index' label='Home' icon={Home} />
+          <TabBarItem value='profile' label='Profile' icon={Profile} />
+        </TabBar>
+      )}
+    >
+      <Tabs.Screen name='index' />
+      <Tabs.Screen name='profile' />
+    </Tabs>
+  );
+}
+```
+
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
+  <CommonRulesDoAndDont />
+</Box>
+
+</Tab>
+</CustomTabs>