Reinstate rendering hack

Author: Jon-edge

src/components/common/EdgeCarousel.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
-import { ListRenderItem, View } from 'react-native'
+import { InteractionManager, ListRenderItem, Platform, View } from 'react-native'
 import Carousel, { Pagination } from 'react-native-snap-carousel'
 
+import { useAsyncEffect } from '../../hooks/useAsyncEffect'
 import { useHandler } from '../../hooks/useHandler'
 import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
 
@@ -26,16 +27,47 @@ export function EdgeCarousel<T>(props: Props<T>): JSX.Element {
   const carouselRef = React.useRef<Carousel<any>>(null)
 
   const [activeIndex, setActiveIndex] = useState(0)
+  const [dataLocal, setDataLocal] = useState(data)
+
+  React.useEffect(() => {
+    setDataLocal(data)
+  }, [data])
 
   const renderItem = useHandler<ListRenderItem<T>>(info => (
     <View style={[styles.childContainer, { width: width * 0.9, height }]}>{props.renderItem(info)}</View>
   ))
 
+  /**
+   * Carousel's FlatList bug workaround. Fixes the issue where items are
+   * hidden until scroll actions are performed either in the carousel or on the
+   * scene itself.
+   */
+  useAsyncEffect(
+    async () => {
+      // HACK: With 1 item, this is the only way to force a render in iOS
+      if (Platform.OS === 'ios' && dataLocal.length === 1) {
+        const tempData = [...dataLocal]
+        setDataLocal([])
+        setTimeout(() => {
+          setDataLocal(tempData)
+        }, 500)
+      }
+      // The built-in hack fn works for all other cases
+      else if (carouselRef.current != null) {
+        await InteractionManager.runAfterInteractions(() => {
+          carouselRef.current?.triggerRenderingHack()
+        })
+      }
+    },
+    [dataLocal], // Depend on dataLocal instead of data to avoid infinite loops
+    'triggerRenderingHack'
+  )
+
   return (
     <View style={styles.carouselContainer}>
       <Carousel
         ref={carouselRef}
-        data={data}
+        data={dataLocal}
         keyExtractor={keyExtractor}
         renderItem={renderItem}
         sliderWidth={width}
@@ -55,7 +87,7 @@ export function EdgeCarousel<T>(props: Props<T>): JSX.Element {
           marginTop: -theme.rem(1),
           marginBottom: -theme.rem(1)
         }}
-        dotsLength={data.length}
+        dotsLength={dataLocal.length}
         activeDotIndex={activeIndex}
         tappableDots={carouselRef.current != null}
         dotStyle={styles.dotStyle}