Certain Part of elements are hidden even on focus

[samsonroy]

I am attaching my code snippet here below, the problem is if i don't specify the DESCRIPTION_CONTAINER_SIZE, the header view doesn't scroll to the top, the top of the image view is hidden and if i provide DESCRIPTION_CONTAINER_SIZE the last carousels items are visible only 50%.

Issue Image:

return (
      <SpatialNavigationRoot>
        <SpatialNavigationScrollView
          offsetFromStart={
            Dimensions.get("screen").height / 2 + DESCRIPTION_CONTAINE_SIZE
          }
        >
          <SpatialNavigationNode alignInGrid>
            <DefaultFocus>
              <Container2>
                <SpatialNavigationNode orientation="horizontal">
                  <CardContainer>
                    <BackHeader isAbsolute />
                    <ResourceCard
                      cardType="5"
                      aspectRatio={16 / 9}
                      resourceWidth={Dimensions.get("screen").width}
                      url={`https://picsum.photos/seed/${props.id}/1920/1080`}
                      id={props.id}
                      containerId="1"
                      onClick={[]}
                      enableCustomFocus
                    />
                  </CardContainer>
                </SpatialNavigationNode>
                <SpatialNavigationNode orientation="horizontal">
                  <ContentContainer>
                    <Title>John Wick</Title>
                    <RatingsGenres>
                      <Ratings ratings={["R", "TV"]} />
                      <Genres genres={["Action", "Violence", "Crime"]} />
                    </RatingsGenres>
                    <CircularActionsContainer>
                      <ActionButtons />
                    </CircularActionsContainer>
                    <ReadMoreText text={t("description.lorem")} />
                  </ContentContainer>
                </SpatialNavigationNode>
                <SpatialNavigationNode orientation="horizontal">
                  <FlatList
                    data={carousel_data}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.id}
                    scrollEventThrottle={16}
                  />
                </SpatialNavigationNode>
                <SpatialNavigationNode orientation="horizontal">
                  <FlatList
                    data={carousel_data}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.id}
                    scrollEventThrottle={16}
                  />
                </SpatialNavigationNode>
              </Container2>
            </DefaultFocus>
          </SpatialNavigationNode>
        </SpatialNavigationScrollView>
      </SpatialNavigationRoot>
    );

@pierpo Could you please help here. Let me know if i am doing something wrong here. Many Thanks in advance.

[samsonroy]

@pierpo Could you please comment on the above behaviour. What is wrong in my approach.