Merge branch 'navigation' into 'main'

Navigation

See merge request react-native/react-native-material-components!19

Author: computools-anastasiia-nahaiska

README.md

@@ -763,6 +763,200 @@ const onSubmitPress = async () => {
 
 ![divider](https://ik.imagekit.io/Computools/rn-material-components/divider.png?updatedAt=1705067870577)
 </details>
+<details><summary>Navigation</summary>
+<br />
+<details><summary>Nav Bar</summary>
+<br />
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ---- |
+| routes | required | NavBarRoute<T, Y>[] | - |
+| activeRouteName | required | T | - |
+| onRoutePress | required | (route: T) => void | - |
+| damping | - | number | 20 |
+| fixedLabelVisibility | - | boolean | false |
+| scrollDirection | 'UP' or 'DOWN'. Use this propert to hide/show NavBar on scroll. | ScrollDirection | - |
+| containerStyle | - | ViewStyle | false |
+
+```
+export interface NavBarRoute<T, Y> {
+  name: T;
+  icon: React.FC<Y>;
+  selectedIcon: React.FC<Y>;
+
+  label?: string;
+  badge?: string;
+  showBadge?: boolean;
+  badgeSize?: BadgeSize;
+  iconProps?: Y;
+}
+```
+
+To enable animation on scroll use ScrollView from Animated, create a shared value with a ScrollDirection value, scrollContext with a number value and manage them onScroll.
+
+See the example:
+```
+export const MyComponent: React.FC = () => {
+  const scrollDirection = useSharedValue(ScrollDirection.UP);
+  const scrollContext = useSharedValue(0);
+
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const currentOffsetY = e.nativeEvent.contentOffset.y;
+
+    if (currentOffsetY <= 0 || currentOffsetY < scrollContext.value) {
+      scrollDirection.value = ScrollDirection.UP;
+    } else if (currentOffsetY >= scrollContext.value) {
+      scrollDirection.value = ScrollDirection.DOWN;
+    }
+
+    scrollContext.value = currentOffsetY;
+  };
+
+  return (
+    <>
+      <Animated.ScrollView onScroll={onScroll}>
+        <!-- scrollview content -->
+      </Animated.ScrollView>
+      <NavBar
+        scrollDirection={scrollDirection}
+        routes={routes}
+        activeRouteName={activeRouteName}
+        onRoutePress={setRoute}
+      />
+    </>
+  )
+}
+
+```
+
+![nav bar](https://ik.imagekit.io/Computools/rn-material-components/nav_bar.gif?updatedAt=1735922886681)
+![anim nav bar](https://ik.imagekit.io/Computools/rn-material-components/anim_nav_bar.gif?updatedAt=1735922886792)
+
+</details>
+<details><summary>Tabs</summary>
+<br />
+
+Each Tabs accepts the required property ```tabs```, an array of the Tab interface.
+
+```
+export interface Tab<T, Y> extends Omit<TouchableOpacityProps, 'onPress'> {
+  routeName: T;
+
+  title?: string;
+  icon?: React.FC<Y>;
+  iconProps?: Y;
+  titleStyle?: TextStyle;
+
+  onPress: (routeName: T) => void;
+}
+```
+
+<br />
+
+To make the indicator responsive to scrolling, handle the scrollAnim state in the parent component and pass it as a prop to the Tabs component. This allows for seamless synchronization between the scrolling behavior and the indicator movement.
+
+See the example:
+
+```
+const ParentComponent = () => {
+  const {width: windowWidth} = useWindowDimensions();
+
+  const acitveViewAnim = useSharedValue(0);
+  const scrollViewRef = React.useRef<AnimatedScrollView>(null);
+
+  const tabs: Tab[] = [<--- your tabs --->]
+  const maxOutput = 1 / tabs.lenght; // The maximum output is calculated as 1 / tabsCount, where tabsCount represents the total number of tabs.
+
+  const handleScrollToScreen1 = () => {
+    acitveViewAnim.value = withTiming(0);
+    scrollViewRef.current?.scrollTo({x: 0});
+  };
+
+  const handleScrollToScreen2 = () => {
+    acitveViewAnim.value = withTiming(maxOutput);
+    scrollViewRef.current?.scrollToEnd();
+  };
+
+
+  const scrollHandler = useAnimatedScrollHandler(
+    {
+      onScroll: (e) => {
+        acitveViewAnim.value = interpolate(e.contentOffset.x, [0, windowWidth], [0, maxOutput]);
+      },
+      onEndDrag: (e) => {
+        if (e.contentOffset.x > maxOutput) {
+          runOnJS(handleScrollToScreen2)();
+        } else {
+          runOnJS(handleScrollToScreen1)();
+        }
+      },
+    },
+    [windowWidth]
+  );
+
+  return (
+    <SecondaryTabs scrollAnim={acitveViewAnim} tabs={tabs}/>
+    <Animated.ScrollView horizontal ref={scrollViewRef} bounces={false} showsHorizontalScrollIndicator={false} onScroll={scrollHandler}>
+      <Text style={{width: windowWidth, paddingStart: 20}}>Screen 1</Text>
+      <Text style={{width: windowWidth, paddingStart: 20}}>Screen 2</Text>
+    </Animated.ScrollView>
+  )
+};
+```
+
+<details><summary>Primary Tabs</summary>
+<br />
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ---- |
+| tabs | required | Tab<T, Y>[] | - |
+| activeTab | The active tab is managed through the state. Pass the activeTab prop to enable the active tab indicator animation when scrollAnim is not provided. | T | - |
+| scrollAnim | The indicator progresses from 0 to 1 / tabs.length. To make the indicator responsive to scrolling, refer to the "Tabs" section above for more details. | SharedValue<number> | - |
+| badgeSize | - | SMALL or BIG | BIG |
+| animConfig | - |  (routeName: T) => void | - |
+| tabIconProps | - | Y | - |
+| tabStyle | - | ViewStyle | - |
+| badgeStyle | - | ViewStyle | - |
+| indicatorStyle | - | ViewStyle | - |
+| indicatorContainerStyle | - | ViewStyle | - |
+| tabsContainerStyle | - | ViewStyle | - |
+| tabInnerContentStyle | - | ViewStyle | - |
+| tabTitleStyle | - | TextStyle | - |
+
+![primary tabs](https://ik.imagekit.io/Computools/rn-material-components/primary_tabs.gif?updatedAt=1735922886826)
+![primary tabs with badges](https://ik.imagekit.io/Computools/rn-material-components/secondary_tabs_with_badges.png?updatedAt=1735922619925)
+
+</details>
+<details><summary>Secondary Tabs</summary>
+<br />
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ---- |
+| tabs | required | Tab<T, Y>[] | - |
+| activeTab | The active tab is managed through the state. Pass the activeTab prop to enable the active tab indicator animation when scrollAnim is not provided. | T | - |
+| scrollAnim | The indicator progresses from 0 to 1 / tabs.length. To make the indicator responsive to scrolling, refer to the "Tabs" section above for more details. | SharedValue<number> | - |
+| badgeSize | - | SMALL or BIG | BIG |
+| animConfig | - |  (routeName: T) => void | - |
+| tabIconProps | - | Y | - |
+| tabStyle | - | ViewStyle | - |
+| badgeStyle | - | ViewStyle | - |
+| indicatorStyle | - | ViewStyle | - |
+| tabsContainerStyle | - | ViewStyle | - |
+| tabInnerContentStyle | - | ViewStyle | - |
+| tabTitleStyle | - | TextStyle | - |
+
+![secondary tabs](https://ik.imagekit.io/Computools/rn-material-components/secondart_tabs.gif?updatedAt=1735922886638)
+![secondary tabs with badges](https://ik.imagekit.io/Computools/rn-material-components/primary_tabs_with_badges.png?updatedAt=1735922619944)
+
+</details>
+</details>
+</details>
 <details><summary>Sheets</summary>
 <br />
 <details><summary>Bottom Sheet</summary>

src/app-bars/bottom-app-bar/BottomAppBar.component.tsx

@@ -5,16 +5,12 @@ import Animated, {useAnimatedStyle, withSpring, type SharedValue} from 'react-na
 
 import {useTheme} from '../../theme/useTheme.hook';
 import {type IconProps} from '../../icons/icon-props';
+import {ScrollDirection} from '../../types/scroll-direction.type';
 import {BOTTOM_APP_BAR_PADDING_VARTICAL, styles} from './bottom-app-bar.styles';
 import {type IconButtonProps} from '../../buttons/icon-buttons/icon-button.types';
 import {FloatingActionButton, FloatingActionButtonSize} from '../../buttons/floating-action-button/FloatingActionButton.component';
 import {AnimatedBottomAppBarActionButton} from './animated-bottom-app-bar-action-button/AnimatedBottomAppBarActionButton.component';
 
-export enum ScrollDirection {
-  UP = 'UP',
-  DOWN = 'DOWN',
-}
-
 export interface BottomAppBarProps<T extends IconProps> extends ViewProps {
   iconButtons: IconButtonProps<T>[];
 

src/app-bars/bottom-app-bar/animated-bottom-app-bar-action-button/AnimatedBottomAppBarActionButton.component.tsx

@@ -3,7 +3,7 @@ import Animated, {FadeInDown, FadeOut, withDelay, useAnimatedStyle, withSpring,
 
 import {useTheme} from '../../../theme/useTheme.hook';
 import {type IconProps} from '../../../icons/icon-props';
-import {ScrollDirection} from '../BottomAppBar.component';
+import {ScrollDirection} from '../../../types/scroll-direction.type';
 import {type IconButtonProps} from '../../../buttons/icon-buttons/icon-button.types';
 import {StandartIconButton} from '../../../buttons/icon-buttons/standart-icon-button/StandardIconButton.component';
 

src/badge/Badge.component.tsx

@@ -1,23 +1,33 @@
 import React from 'react';
-import {View, Text, type ViewProps, type StyleProp, type TextStyle} from 'react-native';
+import {View, Text, type ViewProps, type StyleProp, type ViewStyle, type TextStyle} from 'react-native';
 
 import {styles} from './badge.styles';
 import {useTheme} from '../theme/useTheme.hook';
 import {useTypography} from '../typography/useTypography.component';
 
-export interface BadgeProps extends ViewProps {
-  value: string;
+export enum BadgeSize {
+  BIG = 'BIG',
+  SMALL = 'SMALL',
+}
 
+export interface BadgeProps extends ViewProps {
+  value?: string;
+  size?: BadgeSize;
   valueStyle?: StyleProp<TextStyle>;
 }
 
-export const Badge: React.FC<BadgeProps> = ({value, style, valueStyle, ...props}) => {
+export const Badge: React.FC<BadgeProps> = ({value, size = BadgeSize.BIG, style, valueStyle, ...props}) => {
   const {error} = useTheme();
   const {labelSmall} = useTypography();
 
+  const shapeStyleMap: Record<BadgeSize, ViewStyle> = {
+    [BadgeSize.BIG]: styles.big,
+    [BadgeSize.SMALL]: styles.small,
+  };
+
   return (
-    <View style={[styles.container, {backgroundColor: error.background}, style]} {...props}>
-      <Text style={[labelSmall, {color: error.text}, valueStyle]}>{value}</Text>
+    <View style={[styles.container, shapeStyleMap[size], {backgroundColor: error.background}, style]} {...props}>
+      {size === BadgeSize.BIG && <Text style={[labelSmall, {color: error.text}, valueStyle]}>{value}</Text>}
     </View>
   );
 };

src/badge/badge.styles.ts

@@ -5,9 +5,17 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
 
-    paddingHorizontal: 4,
+    borderRadius: 100,
+  },
+  big: {
+    alignSelf: 'center',
+
     minWidth: 16,
     height: 16,
-    borderRadius: 100,
+    paddingHorizontal: 4,
+  },
+  small: {
+    width: 6,
+    height: 6,
   },
 });

src/constants/icon.ts

@@ -0,0 +1 @@
+export const DEFAULT_ICON_SIZE = 24;

src/icons/bookmark-filled-icon/BookmarkFilledIcon.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Svg, {Path} from 'react-native-svg';
+
+import {path} from './path.json';
+import type {IconProps} from '../icon-props';
+
+const DEFAULT_SIZE = 24;
+const DEFAULT_COLOR = '#000';
+
+export const BookmarkFilledIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE, ...props}) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} fill={'none'} {...props}>
+    <Path fill={color} d={path} />
+  </Svg>
+);

src/icons/bookmark-filled-icon/path.json

@@ -0,0 +1,3 @@
+{
+  "path": "M5 21v-16c0-0.55 0.196-1.021 0.588-1.413s0.862-0.588 1.413-0.588h10c0.55 0 1.021 0.196 1.413 0.588s0.588 0.863 0.588 1.413v16l-7-3-7 3z"
+}

src/icons/commute-filled-icon/CommuteFilledIcon.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Svg, {Path} from 'react-native-svg';
+
+import {path} from './path.json';
+import type {IconProps} from '../icon-props';
+
+const DEFAULT_SIZE = 24;
+const DEFAULT_COLOR = '#000';
+
+export const CommuteFilledIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE, ...props}) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} fill={'none'} {...props}>
+    <Path fill={color} d={path} />
+  </Svg>
+);

src/icons/commute-filled-icon/path.json

@@ -0,0 +1,3 @@
+{
+  "path": "M10 19.35v-5.7l1.4-4q0.125-0.275 0.363-0.462t0.588-0.188h7.3q0.35 0 0.588 0.188t0.363 0.462l1.4 4v5.7q0 0.275-0.188 0.462t-0.462 0.188h-0.7q-0.275 0-0.462-0.188t-0.188-0.462v-0.85h-8v0.85q0 0.275-0.188 0.462t-0.462 0.188h-0.7q-0.275 0-0.462-0.188t-0.188-0.462zM12 12.5h8l-0.7-2h-6.6l-0.7 2zM13 16.5q0.425 0 0.712-0.288t0.288-0.712-0.288-0.712-0.712-0.288-0.713 0.288-0.288 0.712 0.288 0.712 0.713 0.288zM19 16.5q0.425 0 0.712-0.288t0.288-0.712-0.288-0.712-0.712-0.288-0.712 0.288-0.288 0.712 0.288 0.712 0.712 0.288zM4 20v-1l1-1q-1.25 0-2.125-0.875t-0.875-2.125v-8q0-1.65 1.475-2.325t5.025-0.675q3.7 0 5.1 0.65t1.4 2.35v1h-2v-1h-9v6h5v7h-5zM5 16q0.425 0 0.713-0.288t0.288-0.712-0.288-0.712-0.713-0.288-0.713 0.288-0.288 0.712 0.288 0.712 0.713 0.288z"
+}