Merge branch 'app-bars' into 'main'

App bars

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

Author: computools-anastasiia-nahaiska

README.md

@@ -212,11 +212,137 @@ export const AppBodyLargeText: React.FC<PropsWithChildren> = ({children}) => {
 ![linear activity indicator gif](https://ik.imagekit.io/Computools/rn-material-components/linear-indicator-gif.gif?updatedAt=1705066319092)
 </details>
 </details>
-<details><summary>Badge</summary>
+<details><summary>App Bars</summary>
+<br />
+<details><summary>Bottom App Bar</summary>
 <br />
 
 **Properties**
 
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| iconButtons | required | IconButtonProps[] | - |
+| scrollDirection | UP or DOWN | sharedValue<ScrollDirection> | UP |
+| FabIcon | Pass an icon to show FAB | React.FC | - |
+| fabLabel | - | string | - |
+| animationDelay | - | number | 80 |
+| animationDumping | - | number | 20 |
+| onFabPress | - | () => void | - |
+
+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>
+      <BottomAppBar scrollDirection={scrollDirection} />
+    </>
+  )
+}
+
+```
+
+![bottom app bar](https://ik.imagekit.io/Computools/rn-material-components/bottom-app-bar.gif?updatedAt=1734086950022)
+
+</details>
+<details><summary>Top App Bars</summary>
+<br />
+
+To enable animation on scroll use ScrollView from Animated, create a shared value with ScrollStatus (0 if top is reached, 1 if target offset reached) value and manage it onScroll.
+
+See the example:
+```
+export const MyComponent: React.FC = () => {
+  const scrollStatus = useSharedValue(0);
+
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (e.nativeEvent.contentOffset.y > 10) { // 10 is offset treashold when top app bar changes background color
+      scrollStatus.value = 1;
+    } else if (e.nativeEvent.contentOffset.y <= 10) {
+      scrollStatus.value = 0;
+    }
+  };
+
+  return (
+    <>
+      <Animated.ScrollView onScroll={onScroll}>
+        <!-- scrollview content -->
+      </Animated.ScrollView>
+      <TopAppBar scrollStatus={scrollStatus} />
+    </>
+  )
+}
+```
+
+![animated top app bar](https://ik.imagekit.io/Computools/rn-material-components/animated-top-app-bar.gif?updatedAt=1734088599114)
+
+<details><summary>Center Aligned Top App Bar</summary>
+<br />
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| title | required | string | - |
+| StartIcon | - | React.FC | - |
+| EndIcon | - | React.FC | - |
+| scrollStatus | 1 - scrolled down (backgoround color will changed); 0 - non-scrolled, top is reached | SharedValue<number> | - |
+| iconProps | - | T | - |
+| titleStyle | - | TextStyle | - |
+| defaultColor | - | ColorValue | - |
+| scrolledColor | - | ColorValue | - |
+| animationDuration | - | number | - |
+
+![center aligned top app bar](https://ik.imagekit.io/Computools/rn-material-components/center_aligned_top_app_bar.png?updatedAt=1734088249862)
+</details>
+<details><summary>Top App Bar</summary>
+<br />
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| title | required | string | - |
+| size | SMALL, MEDIUM, LARGE | TopAppBarSize | - |
+| StartIcon | - | React.FC | - |
+| actions | - | IconButtonProps<T>[] | - |
+| scrollStatus | 1 - scrolled down (backgoround color will changed); 0 - non-scrolled, top is reached | SharedValue<number> | - |
+| iconProps | - | T | - |
+| titleStyle | - | TextStyle | - |
+| defaultColor | - | ColorValue | - |
+| scrolledColor | - | ColorValue | - |
+| animationDuration | - | number | - |
+
+![small top app bar](https://ik.imagekit.io/Computools/rn-material-components/small_top_app_bar.png?updatedAt=1734088346321)
+![medium top app bar](https://ik.imagekit.io/Computools/rn-material-components/medium_top_app_bar.png?updatedAt=1734088346249)
+![large top app bar](https://ik.imagekit.io/Computools/rn-material-components/large_top_app_bar.png?updatedAt=1734088346230)
+
+</details>
+</details>
+</details>
+<details><summary>Badge</summary>
+</br>
+
+**Properties**
 | name | description | type | default |
 | ------ | ------ | ------ | ----|
 | value | required | string | - |

example/ios/Podfile.lock

@@ -433,35 +433,10 @@ PODS:
   - RNGestureHandler (2.17.1):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
-  - RNReanimated (3.5.1):
-    - DoubleConversion
-    - FBLazyVector
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCTRequired
-    - RCTTypeSafety
-    - React-callinvoker
+  - RNReanimated (3.6.1):
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core
-    - React-Core/DevSupport
-    - React-Core/RCTWebSocket
-    - React-CoreModules
-    - React-cxxreact
-    - React-hermes
-    - React-jsi
-    - React-jsiexecutor
-    - React-jsinspector
-    - React-RCTActionSheet
-    - React-RCTAnimation
-    - React-RCTAppDelegate
-    - React-RCTBlob
-    - React-RCTImage
-    - React-RCTLinking
-    - React-RCTNetwork
-    - React-RCTSettings
-    - React-RCTText
     - ReactCommon/turbomodule/core
-    - Yoga
   - RNSVG (15.3.0):
     - React-Core
   - SocketRocket (0.6.1)
@@ -656,7 +631,7 @@ SPEC CHECKSUMS:
   React-utils: b79f2411931f9d3ea5781404dcbb2fa8a837e13a
   ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d
   RNGestureHandler: bbb8e17b10afdafc5cc5746e8f60772236e7e2ca
-  RNReanimated: 99aa8c96151abbc2d7e737a56ec62aca709f0c92
+  RNReanimated: fdbaa9c964bbab7fac50c90862b6cc5f041679b9
   RNSVG: 7c3f3fac9de6d67eee5525a8bafffafaaf022991
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981

example/package.json

@@ -12,7 +12,7 @@
     "react": "18.2.0",
     "react-native": "0.72.4",
     "react-native-gesture-handler": "2.17.1",
-    "react-native-reanimated": "3.5.1",
+    "react-native-reanimated": "3.6.1",
     "react-native-safe-area-context": "4.10.7",
     "react-native-svg": "15.3.0"
   },

example/yarn.lock

@@ -4804,10 +4804,10 @@ react-native-gesture-handler@2.17.1:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-react-native-reanimated@3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.5.1.tgz#72b2f84b522aad3aabcbc7c9fc2d718b82226339"
-  integrity sha512-ZBTOKibTn1IR5IaoQkpPCibuao5SjXR6Pzx+KHM50wrvBnL1PecsnQjmL2VEj8hbwshrzgRGgGt1XM82DKrykw==
+react-native-reanimated@3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz#5add41efafac6d0befd9786e752e7f26dbe903b7"
+  integrity sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"

package.json

@@ -82,9 +82,10 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-reanimated": ">=3.0.0",
+    "react-native-reanimated": ">=3.6.1",
     "react-native-gesture-handler": ">=2.14.1",
-    "react-native-safe-area-context": ">=4.10.7"
+    "react-native-safe-area-context": ">=4.10.7",
+    "react-native-svg": ">=15.3.0"
   },
   "engines": {
     "node": ">= 16.0.0"
@@ -168,10 +169,10 @@
     ]
   },
   "dependencies": {
-    "@material/material-color-utilities": "^0.3.0",
-    "react-native-gesture-handler": "^2.17.1",
-    "react-native-reanimated": "^3.6.1",
-    "react-native-safe-area-context": "^4.10.7",
-    "react-native-svg": "^15.3.0"
+    "@material/material-color-utilities": "0.3.0",
+    "react-native-gesture-handler": "2.17.1",
+    "react-native-reanimated": "3.6.1",
+    "react-native-safe-area-context": "4.10.7",
+    "react-native-svg": "15.3.0"
   }
 }

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

@@ -0,0 +1,100 @@
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import React, {useImperativeHandle, useState, forwardRef} from 'react';
+import {View, type ViewProps, type LayoutChangeEvent} from 'react-native';
+import Animated, {useAnimatedStyle, withSpring, type SharedValue} from 'react-native-reanimated';
+
+import {useTheme} from '../../theme/useTheme.hook';
+import {type IconProps} from '../../icons/icon-props';
+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>[];
+
+  FabIcon?: React.FC;
+  fabLabel?: string;
+  scrollDirection?: SharedValue<ScrollDirection>;
+  animationDelay?: number;
+  animationDumping?: number;
+
+  onFabPress?: () => void;
+}
+
+export interface BottomAppBarRef {
+  getHeight: () => void;
+}
+
+const FAB_BOTTOM_GAP = 12;
+
+export const BottomAppBar = forwardRef(
+  <T extends IconProps>(
+    {iconButtons, scrollDirection, FabIcon, fabLabel, style, onFabPress, onLayout, animationDelay, animationDumping, ...props}: BottomAppBarProps<T>,
+    ref: React.Ref<BottomAppBarRef>
+  ) => {
+    const [bottomBarHeight, setBottombarHeight] = useState(0);
+
+    const insets = useSafeAreaInsets();
+    const {surfaceContainer, secondaryContainer} = useTheme();
+
+    useImperativeHandle(ref, () => ({
+      getHeight: () => bottomBarHeight,
+    }));
+
+    const conteinerAnimatedStyle = useAnimatedStyle(() => ({
+      transform: [{translateY: withSpring(scrollDirection?.value === ScrollDirection.DOWN ? bottomBarHeight : 0, {damping: 20})}],
+    }));
+
+    const getBottomBarHeight = (e: LayoutChangeEvent) => {
+      setBottombarHeight(e.nativeEvent.layout.height);
+
+      if (onLayout) {
+        onLayout(e);
+      }
+    };
+
+    const renderIconButton = (iconButton: IconButtonProps<T>, index: number) => (
+      <AnimatedBottomAppBarActionButton
+        key={`${iconButton.Icon.toString()}-${index}`}
+        buttonProps={iconButton}
+        index={index}
+        scrollDirection={scrollDirection}
+        bottomBarHeight={bottomBarHeight}
+        animationDelay={animationDelay}
+        animationDumping={animationDumping}
+      />
+    );
+
+    return (
+      <>
+        <Animated.View
+          style={[
+            styles.container,
+            {backgroundColor: surfaceContainer.background, paddingBottom: insets.bottom + BOTTOM_APP_BAR_PADDING_VARTICAL},
+            conteinerAnimatedStyle,
+            style,
+          ]}
+          onLayout={getBottomBarHeight}
+          {...props}>
+          <View style={styles.iconButtons}>{iconButtons.map(renderIconButton)}</View>
+        </Animated.View>
+        {FabIcon && (
+          <FloatingActionButton
+            Icon={FabIcon}
+            label={fabLabel}
+            onPress={onFabPress}
+            size={FloatingActionButtonSize.BIG}
+            iconProps={{color: secondaryContainer.text}}
+            style={[styles.fab, {bottom: insets.bottom + FAB_BOTTOM_GAP}]}
+          />
+        )}
+      </>
+    );
+  }
+);

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import Animated, {FadeInDown, FadeOut, withDelay, useAnimatedStyle, withSpring, type SharedValue} from 'react-native-reanimated';
+
+import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
+import {ScrollDirection} from '../BottomAppBar.component';
+import {type IconButtonProps} from '../../../buttons/icon-buttons/icon-button.types';
+import {StandartIconButton} from '../../../buttons/icon-buttons/standart-icon-button/StandardIconButton.component';
+
+interface AnimatedBottomAppBarActionButtonProps<T extends IconProps> {
+  index: number;
+  bottomBarHeight: number;
+  buttonProps: IconButtonProps<T>;
+
+  animationDelay?: number;
+  animationDumping?: number;
+  scrollDirection?: SharedValue<ScrollDirection>;
+}
+
+export const AnimatedBottomAppBarActionButton = <T extends IconProps>({
+  index,
+  buttonProps,
+  bottomBarHeight,
+  scrollDirection,
+  animationDumping = 20,
+  animationDelay = 80,
+}: AnimatedBottomAppBarActionButtonProps<T>) => {
+  const {surface} = useTheme();
+
+  const iconButtonAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateY:
+          scrollDirection?.value === ScrollDirection.DOWN
+            ? withSpring(bottomBarHeight, {damping: animationDumping})
+            : withDelay(index * animationDelay, withSpring(0, {damping: animationDumping})),
+      },
+    ],
+  }));
+
+  return (
+    <Animated.View
+      exiting={FadeOut}
+      entering={FadeInDown.damping(animationDumping).delay((index + 1) * animationDelay)}
+      key={`${index}-${buttonProps.Icon.toString()}`}
+      style={iconButtonAnimatedStyle}>
+      <StandartIconButton iconProps={{color: surface.textVariant} as T} {...buttonProps} />
+    </Animated.View>
+  );
+};