Timer display gets cut in half when used as a Header.

[Bella Rose]

When passing the timer into headerTitle the timer gets cutoff almost every time, but not always. Below is the snippet where I added the component to the header:

headerTitle: () =>
        questList != undefined ? (
          <SafeAreaView>
            <CountdownCircleTimer
              style={{ top: 0 }}
              isPlaying={!quizDone}
              duration={time}
              colors={"black"}
              onComplete={() => {
                setQuizDone(true);
                return { shouldRepeat: false, delay: 0.5 };
              }}
              updateInterval={1}
              size={80}
              strokeWidth={5}
              children={({ remainingTime }) => {
                return (
                  <Text
                    style={{
                      fontFamily: "ReemKufi-Bold",
                      color: "black",
                      fontSize: 24,
                    }}
                  >
                    {`${Math.floor(remainingTime / 60)}:${
                      remainingTime % 60 < 10
                        ? "0" + (remainingTime % 60)
                        : remainingTime % 60
                    }`}
                  </Text>
                );
              }}
            ></CountdownCircleTimer>
          </SafeAreaView>
        ) : (
          <></>
        ),
    }

Here is an example of what that looks like:

[Vasil Dimitrov]

It does not seem released to the timer but rather layout position of the elements on the page.