chore: added extra props and improved importing

Author: computools-anastasiia-nahaiska

README.md

@@ -222,9 +222,11 @@ export const AppBodyLargeText: React.FC<PropsWithChildren> = ({children}) => {
 | name | description | type | default |
 | ------ | ------ | ------ | ----|
 | iconButtons | required | IconButtonProps[] | - |
-| scrollDirection | UP or DOWN | sharedValue<ScrollDirection> | - |
+| 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.

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

@@ -21,6 +21,8 @@ export interface BottomAppBarProps<T extends IconProps> extends ViewProps {
   FabIcon?: React.FC;
   fabLabel?: string;
   scrollDirection?: SharedValue<ScrollDirection>;
+  animationDelay?: number;
+  animationDumping?: number;
 
   onFabPress?: () => void;
 }
@@ -33,7 +35,7 @@ const FAB_BOTTOM_GAP = 12;
 
 export const BottomAppBar = forwardRef(
   <T extends IconProps>(
-    {iconButtons, scrollDirection, FabIcon, fabLabel, style, onFabPress, onLayout, ...props}: BottomAppBarProps<T>,
+    {iconButtons, scrollDirection, FabIcon, fabLabel, style, onFabPress, onLayout, animationDelay, animationDumping, ...props}: BottomAppBarProps<T>,
     ref: React.Ref<BottomAppBarRef>
   ) => {
     const [bottomBarHeight, setBottombarHeight] = useState(0);
@@ -64,6 +66,8 @@ export const BottomAppBar = forwardRef(
         index={index}
         scrollDirection={scrollDirection}
         bottomBarHeight={bottomBarHeight}
+        animationDelay={animationDelay}
+        animationDumping={animationDumping}
       />
     );
 

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

@@ -12,6 +12,8 @@ interface AnimatedBottomAppBarActionButtonProps<T extends IconProps> {
   bottomBarHeight: number;
   buttonProps: IconButtonProps<T>;
 
+  animationDelay?: number;
+  animationDumping?: number;
   scrollDirection?: SharedValue<ScrollDirection>;
 }
 
@@ -20,6 +22,8 @@ export const AnimatedBottomAppBarActionButton = <T extends IconProps>({
   buttonProps,
   bottomBarHeight,
   scrollDirection,
+  animationDumping = 20,
+  animationDelay = 80,
 }: AnimatedBottomAppBarActionButtonProps<T>) => {
   const {surface} = useTheme();
 
@@ -28,16 +32,16 @@ export const AnimatedBottomAppBarActionButton = <T extends IconProps>({
       {
         translateY:
           scrollDirection?.value === ScrollDirection.DOWN
-            ? withSpring(bottomBarHeight, {damping: 20})
-            : withDelay(index * 80, withSpring(0, {damping: 20})),
+            ? withSpring(bottomBarHeight, {damping: animationDumping})
+            : withDelay(index * animationDelay, withSpring(0, {damping: animationDumping})),
       },
     ],
   }));
 
   return (
     <Animated.View
       exiting={FadeOut}
-      entering={FadeInDown.damping(20).delay((index + 1) * 80)}
+      entering={FadeInDown.damping(animationDumping).delay((index + 1) * animationDelay)}
       key={`${index}-${buttonProps.Icon.toString()}`}
       style={iconButtonAnimatedStyle}>
       <StandartIconButton iconProps={{color: surface.textVariant} as T} {...buttonProps} />

src/app-bars/bottom-app-bar/bottom-app-bar.styles.ts

@@ -4,12 +4,6 @@ export const BOTTOM_APP_BAR_PADDING_VARTICAL = 20;
 
 export const styles = StyleSheet.create({
   container: {
-    // position: 'absolute',
-    // bottom: 0,
-    // left: 0,
-    // right: 0,
-    // marginTop: 'auto',
-
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',

src/index.tsx

@@ -1,18 +1,4 @@
-export {
-  EditIcon,
-  PlusIcon,
-  CloseIcon,
-  TodayIcon,
-  SearchIcon,
-  DeleteIcon,
-  MoreVertIcon,
-  ArrowBackIcon,
-  CheckSmallIcon,
-  AttachFileIcon,
-  FileDownloadIcon,
-  BookmarkBorderIcon,
-  AccountCircleFilledIcon,
-} from './icons';
+export * from './icons';
 
 export {Divider, type DividerProps} from './divider/Divider.component';