Flickering on first rendering

[creix]

I have this strange flickering on the first rendering of the page, anyone knows what it is caused by?

https://github.com/PedroBern/react-native-collapsible-tab-view/assets/74594484/f283bfab-61c2-4bc9-b7f4-631b8daacc11

This is how i'm using it:

<Tabs.Container
    renderHeader={Header}
    renderTabBar={renderTabBar}
    onIndexChange={(index) => setIndex(index)}
    headerContainerStyle={{backgroundColor: 'transparent'}}
    containerStyle={{backgroundColor: 'transparent'}}
    ref={ref}
  >
    <Tabs.Tab name="Info">
      <Tabs.ScrollView overScrollMode='never'>
        <Box
          flex={1}
          alignText="left"
          marginTop="10"
          marginLeft="6"
          marginRight="6"
        >
          <HStack alignItems="center" space="6">
            <Icon m="2" ml="3" size="6" color="gray.500" as={<MaterialIcons name="calendar-today" />} />
            <Text mt="-1" fontSize="md">{dayjs(eventDetails.startDate).locale(i18n.language).format('ddd D MMM ')}</Text>
            <Text mt="-1" fontSize="md">{dayjs(eventDetails.startDate).locale(i18n.language).format('HH:mm')} - {dayjs(eventDetails.endDate).locale(i18n.language).format('HH:mm')}</Text>
          </HStack>
          <Divider mt="3" mb="3" width="95%" alignSelf="center" bg="dark.50"/>
          <HStack alignItems="center" space="6" flexShrink={1}>
            <Icon m="2" ml="3" size="6" color="gray.500" as={<MaterialIcons name="location-on" />} />
            <Text mt="-1" fontSize="md" flexShrink={1}>{eventDetails.venueName}, {eventDetails.venueAddress}</Text>
          </HStack>
  
          <Text fontSize="lg" bold mt="10" mb="2">{t('eventDetail:about')}</Text>
          <ViewMoreText
            numberOfLines={5}
            renderViewMore={(handlePress) => <Icon m="2" alignSelf="center" size="6" color="gray.500" as={<MaterialIcons name="keyboard-arrow-down" />} onPress={handlePress}/>}
            renderViewLess={(handlePress) => <Icon m="2" alignSelf="center" size="6" color="gray.500" as={<MaterialIcons name="keyboard-arrow-up" />} onPress={handlePress}/>}
          >
            <Text>{eventDetails.description}</Text>
          </ViewMoreText>
      </Tabs.ScrollView>
      <Button
        mt="5"
        mb="5"
        size="lg"
        colorScheme="highlight"
        rounded="md"
        alignSelf="center"
        width="85%"
        position="relative"
        onPress={() => {
          navigation.navigate("Checkout", {eventId: eventDetails.id})
        }}
      >
        <Text fontSize="md">{t('eventDetail:startingFrom')} <Text bold>{eventDetails.ticketPrice[0].price + eventDetails.ticketPrice[0].commission} €</Text></Text>   
      </Button>
    </Tabs.Tab>
    <Tabs.Tab name="Community">
      <TopicView eventID={eventDetails.id} />
    </Tabs.Tab>
  </Tabs.Container>         
  </View>

This is the header:

const Header = () => {
    return(
      <View flex={1}>
        <ImageBackground 
          source={{
            uri: eventImage
          }} 
          resizeMode="cover" 
          style={{
            width: "100%",
            height: 300
          }}
          blurRadius={250}
        >
          <Pressable
            onPress={() => {
              navigation.goBack()
            }}
          >
            {({ isPressed }) => {
              return(
                <Box
                  safeArea  
                  marginLeft="4"
                  marginTop="4"
                  rounded="xl" 
                  width="50px"
                  alignItems="center"
                  space="1"
                  style={{
                    transform: [
                      {
                        scale: isPressed ? 0.99 : 1,
                      },
                    ],
                    opacity: isPressed ? 0.8 : 1
                  }}              
                >
                    <Icon color="dark.600" size="8" as={<Entypo name="chevron-small-left" />} />
                  
                </Box>
            )}}
          </Pressable>
          <Box
            flex={1}
            justifyContent="flex-end"
          >
            <LinearGradient 
              colors={['transparent', '#000']}
              start={{x:0, y:0}}
              end={{x:0, y:1}}
              style={{
                width: "100%",
                height: 200,
                justifyContent: "flex-end"
              }}
            />
          </Box>
        </ImageBackground>

        <Box
          rounded="xl"
          mt="-180"
          flex={1}
          width="95%"
          alignSelf="center"
        >
          <AspectRatio w="100%" ratio={16 / 9}>
            <Image
              source={{
                uri: eventImage
              }}
              alt="image"
              borderRadius="xl"
              width="100%"
              height="100%"
            />
          </AspectRatio>
        </Box>
        <Box
          flex={1}
          alignText="left"
          marginTop="5"
          marginLeft="6"
          marginRight="6"
        >
          <Text fontSize="2xl" bold >{eventName}</Text>
        </Box>
      </View>
    )
  }

Currently using react-native-collapsible-tab-view 6.1.4

[frozencap]

Getting this as well

[kevinvoduy]

Getting the same issue as well, but setting headerHeight on Tabs.Container helps if the header has a static height. The head I'm building has a different height on different screen sizes so setting a value to headerHeight doesn't work.

[FabianDean]

I know it's been a while, but one way I'm exploring handling this flicker on first render (due to dynamic header height) is using a two-part rendering solution:

1. Render just the header to grab its height
2. Once height is defined, we'll render the tabs and supply the headerHeight

  if (headerHeight === null) {
    return (
      <View>
        <View onLayout={(e) => setHeaderHeight(e.nativeEvent.layout.height)}>
          {renderHeader()}
        </View>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <Tabs.Container
      tabBarHeight={TAB_BAR_HEIGHT}
      headerHeight={headerHeight}
      ...
    >
      {tabs}
    </Tabs.Container>

It's not perfect, but sufficient for my needs -- hope it helps 🙏

[andreialecu]

https://github.com/PedroBern/react-native-collapsible-tab-view/pull/394 might fix this, I released it as 7.0.1-beta.0 on npm. Please help test it for unwanted side effects and report back. Thanks!