Change fontSize for text component with function in React Native

I am trying to adjust the font size of a text object inside a timer based on the remaining time. As there are fewer digits to display I want the text to get larger. The problem I'm having is it looks like you can't call a function in the style definition (please correct anything I misstated there, I'm trying to learn). First, the function:

CalculateTimeSize = ({ remainingTime }) => {
    let TimerTextSize
    if( remainingTime < 60 ) {
        TimerTextSize = 60
    } else if( remainingTime < 3600 ) {
        TimerTextSize = 40
    } else {
        TimerTextSize = 20
    }
    return TimerTextSize;
}

My text component header looks like this (see update below for full timer code):

<Animated.Text style={{ fontSize: _____________, fontFamily: 'Arial',...>
    ...
</Animated.Text>

In the blank I have tried everything I can think of including: CalculateTimeSize(remainingTime), CalculateTimeSize({remainingTime}), {CalculateTimeSize(remainingTime)}, and {CalculateTimeSize({remainingTime})}

Clearly, from the way I'm throwing around curly braces, I just don't know what I'm doing. Thank you for any help you can provide.

Update
The full timer code for a better view of the CalculateTimeSize function call:

<CountdownCircleTimer
    isPlaying
    duration = { 65 }
    colors = { ColorScheme.Orange.e }
    onComplete = { () => {
        console.log('Timer expired')
        return [ true, 0 ]
    }}
>
    {({ remainingTime, animatedColor }) => (
        <Animated.Text style={{
            fontSize: {CalculateTimeSize(remainingTime)},
            fontFamily: 'Arial',
            fontWeight: 'bold'
        }}>
            {FormatTime({ remainingTime })}
        </Animated.Text>
    )}
</CountdownCircleTimer>

I hate when this happens. I do have working code now, but I'm not sure what is different about it than what I previously had because I tried so many different things along the way. I will post the code below, but I will first comment on the extra curly braces that seemed to be confusing myself and Darshan.

I had the curly braces in there in the first place because the example code on the GitHub repo for the timer component had them (if you care to see: https://github.com/vydimitrov/react-countdown-circle-timer/tree/master/packages/web#react-countdown-circle-timer). The code below works with them in place, and it does not work without them. Perhaps what is going on is in fact destructuring, as Darshan indicated, but I don't understand destructuring enough to say one way or the other. I do believe the curly braces has something to do with what the CountownCircleTimer is doing "behind the scenes". Again, I don't actually understand the component/programming-in-general enough to dig into it. All I know is I kept poking around at the code and eventually the following worked. I hope this helps someone at some point.

<CountdownCircleTimer
    isPlaying
    duration = { 65 }
    colors = { ColorScheme.Orange.e }
    size = { 175 }
    onComplete = { () => {
        console.log('Timer expired')
        return [ true, 0 ]
    }}
    size = { 175 }
    trailColor = { ColorScheme.Orange.j }
>
    {({ remainingTime, animatedColor }) => (
        <Animated.Text style = {{
            fontSize: CalculateTimeSize({ remainingTime }),
            fontFamily: 'Arial',
            fontWeight: 'bold'
        }}>
            {FormatTime({ remainingTime })}
        </Animated.Text>
    )}
</CountdownCircleTimer>

CalculateTimeSize = ({ remainingTime }) => {
    let TimerTextSize
    if ( remainingTime < 11 ) {
        TimerTextSize = 90
    } else if( remainingTime < 60 ) {
        TimerTextSize = 75
    } else if( remainingTime < 3600 ) {
        TimerTextSize = 50
    } else {
        TimerTextSize = 35
    }
    return TimerTextSize;
}