TabController.PageCarousel lack ref

[Manweill]

when PageCarousel warp Carousel, how can I control them separately?

Now, I use ref to implement it.

For Example like under case. but PageCarousel not provid ref.

  const _PageCarouselRef = useRef(null)
...

<TabController items={tabs} initialIndex={0} asCarousel={true}>
    <TabController.TabBar
        spreadItems={true}
        labelStyle={styles.labelStyle}
        selectedLabelStyle={styles.selectedLabelStyle}
    />
    <View
        flex
        onStartShouldSetResponderCapture={() => {
           _PageCarouselRef.current?.setNativeProps({ scrollEnabled: true})
        }}>
        <TabController.PageCarousel ref={_PageCarouselRef}>
            <TabController.TabPage index={0} renderLoading={() => <LoaderScreen />}>
                {/* <FrontPageTabView ListHeaderComponent={() => <HeaderComponent setEnableScroll={handleStop} />} /> */}
                
                        <View
                            onStartShouldSetResponderCapture={() => {
                                console.log('Carousel')
                                _PageCarouselRef.current?.setNativeProps({ scrollEnabled: false})
                            }}>
                            <Carousel
                                onResponderTerminationRequest={() => true}
                                nestedScrollEnabled
                                animated
                                autoplay
                                containerStyle={{
                                    height: 155,
                                    paddingTop: 8,
                                    backgroundColor: '#fff',
                                }}
                                loop
                                pageControlProps={{
                                    size: 10,
                                    // containerStyle: styles.loopCarousel,
                                }}
                                pageControlPosition={Carousel.pageControlPositions.OVER}>
                                {NEWS_DATA.map((item, i) => {
                                    return (
                                        <View flex centerV key={i}>
                                            <Image
                                                overlayType={Image.overlayTypes.BOTTOM}
                                                style={{ flex: 1 }}
                                                source={{
                                                    uri: item.imageUrl,
                                                }}
                                            />
                                        </View>
                                    )
                                })}
                            </Carousel>
                        </View>
            </TabController.TabPage>
            {tabs.length > 1 &&
                tabs.slice(1).map((tab, index) => (
                    <TabController.TabPage key={tab.key} index={index + 1} lazy renderLoading={() => <LoaderScreen />}>
                        <HeaderComponent setEnableScroll={handleStop} />
                    </TabController.TabPage>
                ))}
        </TabController.PageCarousel>
    </View>
</TabController>

PageCarousel Changes

const PageCarousel = forwardRef(function (props,ref) {
  const {
    onMomentumScrollEnd,
    ...others
  } = props;
  const carousel = useAnimatedRef();
  
  useImperativeHandle(ref,()=>({  
    setNativeProps:(nativeProps)=>{
      carousel.current?.setNativeProps(nativeProps) 
    }
  }),[]);

...
})

[ethanshar]

Hi @Manweill
Mind submitting a PR?

[Manweill]

yes.