React Native - Funtion passed as a paramater is undefined - reactjs

Question

I am new to React Native and I am trying to create a simple app with tab navigation to fetch NBA data. I created a Team page with 2 buttons to fetch East or West conference team data. I tried to pass all the params from App.js to Team.js. It was meant to be fetching the data from the API when button is clicked.
However, an error occured when i tried to press the button in Team (the two buttons in Category component)
Error: Category.js:13:70 TypeError: undefined is not a function, js engine: hermes) ... a function (confOncClick) that was used in the Category.js (A component in Team page) is undefined
Error screenshot: Error
App.js
import React, {useState} from 'react';
import {View, Text, StyleSheet, FlatList, Alert} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {v4 as uuid} from 'uuid';
import 'react-native-get-random-values';
import Team from './pages/Team';
import Header from './components/Header';
import Home from './pages/Home';
import axios from 'axios';
const App = () => {
const [teamData, setTeamData] = useState([]);
const [confIndex, setConfIndex] = useState();
function SettingsScreen() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
const confOnClick = async text => {
console.log(text);
if (text === 'East') {
setConfIndex(0);
} else {
setConfIndex(1);
}
const options = {
method: 'GET',
url: 'https://api-nba-v1.p.rapidapi.com/teams',
params: {conference: text},
headers: {
'X-RapidAPI-Key': /.../,
'X-RapidAPI-Host': 'api-nba-v1.p.rapidapi.com',
},
};
await axios
.request(options)
.then(function (response) {
console.log(response.data.response);
console.log(typeof response.data.response);
setTeamData(response.data.response);
})
.catch(function (error) {
console.error(error);
});
};
return (
<View style={styles.container}>
<Header />
<NavigationContainer>
<Tab.Navigator screenOptions={{headerShown: false}}>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen
name="Team"
component={Team}
options={{confOnClick: confOnClick, teamData: teamData}}
/>
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
Team.js
import React from 'react';
import {View, StyleSheet, FlatList, Alert} from 'react-native';
import ListItem from '../components/ListItem';
import Category from '../components/Category';
function Team({confOnClick, teamData}) {
return (
<View>
<Category confOnClick={confOnClick} />
<FlatList
data={teamData}
renderItem={({item}) => <ListItem item={item} />}
/>
</View>
);
}
export default Team;
Category.js
import React from 'react';
import {View, StyleSheet, FlatList, Alert} from 'react-native';
import ListItem from '../components/ListItem';
import Category from '../components/Category';
function Team({confOnClick, teamData}) {
return (
<View>
<Category confOnClick={confOnClick} />
<FlatList
data={teamData}
renderItem={({item}) => <ListItem item={item} />}
/>
</View>
);
}
export default Team;
the confOnClick passed to Category seems to be undefined but I am not sure what is the issue. Could be because of the way I pass from app.js?
<Tab.Screen
name="Team"
component={Team}
options={{confOnClick: confOnClick, teamData: teamData}}
/>
hope I made it clear and please let me know if I can provide more info
I have tried passing the params in different ways in Tab.Screen navigator with initialParams, params, options and also change the component to children but somehow i didn't get it right.

Answer 1

you can use initialParams in Tab.Screen like
<Tab.Screen
name="Team"
component={Team}
initialParams={{confOnClick: confOnClick, teamData: teamData}}
/>
Team.js
function Team({route}) {
const {confOnClick, teamData} = route.params;
...
}