From d21b4b589bf54cf7e83f821e710b0d2ac0aa2aa0 Mon Sep 17 00:00:00 2001
From: Pedro Bern <pedrobermoreira@gmail.com>
Date: Mon, 25 Jan 2021 09:39:37 -0300
Subject: [PATCH] fix: replace Dimensions by useWindowDimensions

---
 example/src/Shared/MaterialTabBar.tsx | 21 +++++++++++++++++----
 src/createCollapsibleTabs.tsx         | 25 ++++++++++++++++---------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/example/src/Shared/MaterialTabBar.tsx b/example/src/Shared/MaterialTabBar.tsx
index 360bc5eb..d166d01f 100644
--- a/example/src/Shared/MaterialTabBar.tsx
+++ b/example/src/Shared/MaterialTabBar.tsx
@@ -1,5 +1,11 @@
 import React from 'react'
-import { View, Text, StyleSheet, Pressable, Dimensions } from 'react-native'
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  useWindowDimensions,
+} from 'react-native'
 import { TabBarProps } from 'react-native-collapsible-tab-view'
 import Animated, { useAnimatedStyle } from 'react-native-reanimated'
 
@@ -8,8 +14,6 @@ type TabItemProps = {
   onPress: () => void
 }
 
-const windowWidth = Dimensions.get('window').width
-
 export const TABBAR_HEIGHT = 48
 
 const TabItem: React.FC<TabItemProps> = ({ name, onPress }) => {
@@ -35,8 +39,17 @@ const TabBar: React.FC<TabBarProps<any>> = ({
   index,
   containerRef,
 }) => {
+  const windowWidth = useWindowDimensions().width
   const [nTabs] = React.useState(Object.keys(refMap).length)
-  const [indicatorWidth] = React.useState(windowWidth / nTabs)
+  const [indicatorWidth, setIndicatorWidth] = React.useState(
+    windowWidth / nTabs
+  )
+
+  React.useEffect(() => {
+    if (indicatorWidth * nTabs !== windowWidth) {
+      setIndicatorWidth(windowWidth / nTabs)
+    }
+  }, [windowWidth, nTabs, indicatorWidth])
 
   const scrollTo = React.useCallback(
     (i: number) => {
diff --git a/src/createCollapsibleTabs.tsx b/src/createCollapsibleTabs.tsx
index 27e45589..ca6e8d65 100644
--- a/src/createCollapsibleTabs.tsx
+++ b/src/createCollapsibleTabs.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import {
   FlatList as RNFlatList,
-  Dimensions,
   View,
   StyleSheet,
   LayoutChangeEvent,
+  useWindowDimensions,
 } from 'react-native'
 import Animated, {
   useSharedValue,
@@ -19,16 +19,8 @@ import Animated, {
 
 import { Props, ContextType, ScrollViewProps, FlatListProps } from './types'
 
-const windowWidth = Dimensions.get('window').width
-
 const AnimatedFlatList = Animated.createAnimatedComponent(RNFlatList)
 
-export const getItemLayout = (_: unknown, index: number) => ({
-  length: windowWidth,
-  offset: windowWidth * index,
-  index,
-})
-
 const createCollapsibleTabs = <T extends string>() => {
   const Context = React.createContext<ContextType<T> | undefined>(undefined)
 
@@ -55,6 +47,8 @@ const createCollapsibleTabs = <T extends string>() => {
     lazy,
     cancelLazyFazeIn,
   }) => {
+    const windowWidth = useWindowDimensions().width
+
     const [containerHeight, setContainerHeight] = React.useState<
       number | undefined
     >(undefined)
@@ -78,6 +72,15 @@ const createCollapsibleTabs = <T extends string>() => {
     // @ts-ignore
     const focusedTab = useSharedValue<T>(tabNames.value[index.value])
 
+    const getItemLayout = React.useCallback(
+      (_: unknown, index: number) => ({
+        length: windowWidth,
+        offset: windowWidth * index,
+        index,
+      }),
+      [windowWidth]
+    )
+
     // derived from scrollX, to calculate the next offset and index
     useAnimatedReaction(
       () => {
@@ -450,6 +453,8 @@ const createCollapsibleTabs = <T extends string>() => {
 
     const scrollHandler = useScrollHandlerY(name)
 
+    const windowWidth = useWindowDimensions().width
+
     return (
       <AnimatedFlatList
         // @ts-ignore
@@ -488,6 +493,8 @@ const createCollapsibleTabs = <T extends string>() => {
 
     const scrollHandler = useScrollHandlerY(name)
 
+    const windowWidth = useWindowDimensions().width
+
     return (
       <Animated.ScrollView
         ref={refMap[name] as any}