<AnimatedPagerView
              ref={containerRef}
              onPageScroll={pageScrollHandler}
              initialPage={index.value}
              {...pagerProps}
              style={[pagerProps?.style, StyleSheet.absoluteFill]}
            >
              {tabNamesArray.map((tabName, i) => {
                return (
                  <View key={i}>
                    <TabNameContext.Provider value={tabName}>
                      <Lazy
                        startMounted={lazy ? undefined : true}
                        cancelLazyFadeIn={!lazy ? true : !!cancelLazyFadeIn}
                        // ensure that we remount the tab if its name changes but the index doesn't
                        key={tabName}
                      >
                        {
                          React.Children.toArray(children)[
                            i
                          ] as React.ReactElement
                        }
                      </Lazy>
                    </TabNameContext.Provider>
                  </View>
                )
              })}
            </AnimatedPagerView>

 <View key={i} style={{ flex: 1}}>
    <TabNameContext.Provider value={tabName}>
      <Lazy
        startMounted={lazy ? undefined : true}
        cancelLazyFadeIn={!lazy ? true : !!cancelLazyFadeIn}
        // ensure that we remount the tab if its name changes but the index doesn't
        key={tabName}
      >
        {
          React.Children.toArray(children)[
            i
          ] as React.ReactElement
        }
      </Lazy>
    </TabNameContext.Provider>
  </View>