Error when calling a component react native - react-native

Question

I want to create a component like this to check if the user idle or not.
import React, {useState, useEffect, useRef} from 'react';
import {View, PanResponder, StyleSheet} from 'react-native';
const ScreenConponent = ({...props}) => {
console.tron.log(props);
const timerId = useRef(false);
const [timeForInactivityInSecond, setTimeForInactivityInSecond] =
useState(3600);
useEffect(() => {
resetInactivityTimeout();
}, []);
const panResponder = React.useRef(
PanResponder.create({
onStartShouldSetPanResponderCapture: () => {
console.tron.log('user starts touch');
resetInactivityTimeout();
},
}),
).current;
const resetInactivityTimeout = () => {
clearTimeout(timerId.current);
timerId.current = setTimeout(() => {
console.tron.log('user idle');
}, timeForInactivityInSecond * 1000);
};
return (
<View style={styles.container} {...panResponder.panHandlers}>
{props.children}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default ScreenConponent;
and this is how i call the component
import React, {useState, useEffect} from 'react';
import {View, Text} from 'react-native';
import Screen from '../../components/Screen';
export default function App() {
return (
<Screen>
<View> <Text> Test </Text> </View>
</Screen>
);
}
But when i tried to call the component, i got an error like this error when run the app
anyone have an idea what's wrong with the code? because i can use this method in react (web)
this is the navigation code
import React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
// import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {NavigationContainer} from '#react-navigation/native';
import ScheduleScreen from '../pages/Schedule';
const Stack = createStackNavigator();
/** Main route */
const MainNavigator = () => {
return (
<Stack.Screen
name="Schedule"
component={ScheduleScreen}
options={{
header: () => null,
}}
/>
</Stack.Navigator>
);
};
const Root = createStackNavigator();
const RootNavigator = () => {
return (
<NavigationContainer>
<Root.Navigator>
<Root.Screen
name="Main"
component={MainNavigator}
options={{header: () => null}}
/>
</Root.Navigator>
</NavigationContainer>
);
};
export default RootNavigator;