Merge pull request #27 from adithyavis/feat/fixes-enhancements-before-0.5.0

Feat/fixes enhancements before 0.5.0

Author: adithyavis

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Adithya Viswa
+Copyright (c) 2024 Adithya Viswamithiran
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

docs/docs/guides/scrollable/collapsible-headers.md

@@ -54,7 +54,7 @@ The `renderHeader` callback receives `HeaderRendererProps`:
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `collapsedPercentage` | `SharedValue<number>` | Animated value from 0 (expanded) to 1 (fully collapsed) |
+| `collapsedPercentage` | `SharedValue<number>` | Animated value from 0 (expanded) to 100 (fully collapsed) |
 | `collapsedHeaderHeight` | `SharedValue<number>` | Animated value representing the current collapsed height |
 
 You can use these shared values to create animated header effects:
@@ -64,7 +64,7 @@ import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated
 
 const renderHeader = ({ collapsedPercentage }) => {
   const animatedStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(collapsedPercentage.value, [0, 1], [1, 0]),
+    opacity: interpolate(collapsedPercentage.value, [0, 100], [1, 0]),
   }));
 
   return (

docs/docusaurus.config.js

@@ -108,7 +108,7 @@ const config = {
             ],
           },
         ],
-        copyright: `Copyright ${new Date().getFullYear()} Adithya Viswa. Built with Docusaurus.`,
+        copyright: `Copyright ${new Date().getFullYear()} Adithya Viswamithiran. Built with Docusaurus.`,
       },
       prism: {
         theme: prismThemes.github,

package.json

@@ -47,7 +47,7 @@
     "type": "git",
     "url": "git+https://github.com/adithyavis/reanimated-tab-view.git"
   },
-  "author": "Adithya Viswa <adithyaviswam@gmail.com> (https://github.com/adithyavis)",
+  "author": "Adithya Viswamithiran <adithyaviswam@gmail.com> (https://github.com/adithyavis)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/adithyavis/reanimated-tab-view/issues"

src/components/TabBar.tsx

@@ -196,7 +196,7 @@ export const TabBar = React.memo((props: TabBarProps) => {
           style={[styles.tabBar, styles.nonScrollableTabBar]}
         >
           {routes.map((route, index) => (
-            <React.Fragment key={index}>
+            <React.Fragment key={route.key}>
               {renderItem({ item: route, index })}
             </React.Fragment>
           ))}

src/hooks/useStateUpdatesListener.ts

@@ -1,7 +1,11 @@
 import { useEffect, useRef } from 'react';
 
-export const useStateUpdatesListener = (state: any, callback: () => void) => {
-  const prevStateRef = useRef(null);
+export const useStateUpdatesListener = (
+  state: any,
+  callback: () => void,
+  listenToInitialStateUpdate = false
+) => {
+  const prevStateRef = useRef(listenToInitialStateUpdate ? null : state);
 
   useEffect(() => {
     if (state !== prevStateRef.current) {

src/hooks/useTabBarAutoScroll.ts

@@ -56,7 +56,8 @@ export const useTabBarAutoScroll = (
       setTimeout(() => {
         autoScrollToRouteIndex(currentRouteIndex);
       }, 500);
-    }, [autoScrollToRouteIndex, currentRouteIndex])
+    }, [autoScrollToRouteIndex, currentRouteIndex]),
+    true
   );
 
   const handleScrollToIndexFailed = useCallback(

src/providers/TabLayout.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useMemo, useState } from 'react';
 import { useSharedValue, type SharedValue } from 'react-native-reanimated';
 import type {
   RouteIndexToTabContentWidthMap,
@@ -33,16 +33,25 @@ export const TabLayoutContextProvider: React.FC = React.memo(
     const routeIndexToTabOffsetMapSV = useSharedValue({});
     const routeIndexToTabContentWidthMapSV = useSharedValue({});
 
+    const value = useMemo(
+      () => ({
+        routeIndexToTabContentWidthMap,
+        setRouteIndexToTabContentWidthMap,
+        routeIndexToTabWidthMapSV,
+        routeIndexToTabOffsetMapSV,
+        routeIndexToTabContentWidthMapSV,
+      }),
+      [
+        routeIndexToTabContentWidthMap,
+        setRouteIndexToTabContentWidthMap,
+        routeIndexToTabWidthMapSV,
+        routeIndexToTabOffsetMapSV,
+        routeIndexToTabContentWidthMapSV,
+      ]
+    );
+
     return (
-      <TabLayoutContext.Provider
-        value={{
-          routeIndexToTabContentWidthMap,
-          setRouteIndexToTabContentWidthMap,
-          routeIndexToTabWidthMapSV,
-          routeIndexToTabOffsetMapSV,
-          routeIndexToTabContentWidthMapSV,
-        }}
-      >
+      <TabLayoutContext.Provider value={value}>
         {children}
       </TabLayoutContext.Provider>
     );