Render Error: Cannot convert undefined value to object

[Tan Jian Ron]

I can't seem to find which undefined value that I am passing into CountdownCircleTimer is causing this issue but I know it is not intSeconds as I have checked that it is an integer and even if I remove all the code wrapped in the CountdownCircleTimer tag it still causes the same error. The error seems to be being caused by the tag itself as I have checked all of the other components and it always returns this same error. The version is the latest 3.2.1 too. The error occurs the moment the page is opened.

Error message:
`TypeError: Cannot convert undefined value to object

This error is located at:
in CountdownCircleTimer (created by Break)
in RCTView (created by View)
in View (created by Break)
in RCTView (created by View)
in View (created by Break)
in RCTView (created by View)
in View (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView (created by Break)
in RCTView (created by View)
in View (created by Break)
in Break (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes`

break.js
`import { useState, useEffect } from 'react';
import { View, ScrollView, SafeAreaView, Text, Button } from 'react-native';
import { CountdownCircleTimer, useCountdown } from 'react-native-countdown-circle-timer';

import { COLORS, icons, images, FONT, SIZES } from '../constants';

function Break({ route, navigation }) {
const { time, sliderValue } = route.params;
const [isPlaying, setIsPlaying] = useState(true);

const {
    path,
    pathLength,
    stroke,
    strokeDashoffset,
    remainingTime,
    elapsedTime,
    size,
    strokeWidth,
} = useCountdown({ isPlaying: true, duration: 7, colors: '#abc' })

console.log(time);
console.log(sliderValue);

const timeToSeconds = (time) => {
    const [hours, minutes, seconds] = time.split(':').map(Number);
    return hours * 3600 + minutes * 60 + seconds;
  };

const test = timeToSeconds(time);
const seconds = timeToSeconds(time) * (sliderValue / 60).toFixed(0);
let intSeconds = parseInt(seconds);
console.log(test);
console.log(seconds);
console.log(intSeconds);

return (
    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightBeige }}>
        <ScrollView showsVerticalScrollIndicator={false}>
            <View style={{ flex: 1, padding: SIZES.medium, }}>

                <View style={{ alignItems: 'center', padding: SIZES.xLarge }}>
                    <CountdownCircleTimer
                        isPlaying={isPlaying}
                        duration={intSeconds}
                        updateInterval={1}
                    >
                        {({ remainingTime }) => <Text>{remainingTime}</Text>}
                    </CountdownCircleTimer>
                </View>

            </View>
        </ScrollView>
    </SafeAreaView>
);

};

export default Break;
`

[Vasil Dimitrov]

Hey, can you try to reproduce it in ExpoSnack so I can take a look on it?

[Vasil Dimitrov]

Closing due to inactivity.