I am new in learning react native and trying to send an object when user clicked on Flatlist row to display the product in the ProductDetail.tsx but i got an error “undefined is not a function” …
I defined the navigation on App.tsx
import React from 'react';
import Home from './Home';
import ProductDetail from './ProductDetails';
import {
SafeAreaView,
useColorScheme,
} from 'react-native';
import {
Colors,
} from 'react-native/Libraries/NewAppScreen';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
function App(): JSX.Element {
const Stack = createStackNavigator()
const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
}}
>
<Stack.Screen
name="Home"
component={Home}
options={{headerShown: false}}
/>
<Stack.Screen name="ProductDetail" component={ProductDetail}
options={{title: 'Product Detail'}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
const isDarkMode = useColorScheme() === 'dark';
return (
<MyStack />
);
}
export default App;
And here is the Home.tsx code
function Home(): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
const [shops, setShops] = useState<any[]>([]);
const nav = useNavigation()
useEffect(() => {
fetch('https://dummyjson.com/products')
.then((response) => response.json())
.then((result) => {
setShops(result.products);
})
.catch((error) => {
console.error(error);
});
}, []);
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<Text style = {styles.highlight}>Techno Shop</Text>
<ShopList
shops={shops}
navigation={nav}
/>
</SafeAreaView>
);
}
The ShopList.tsx Code
interface ShopListProps {
shops: any[];
navigation:any
}
class ShopList extends Component<ShopListProps> {
render() {
const { shops } = this.props;
const nav = this.props.navigation;
return (
<FlatList
data = {
shops
}
renderItem={({ item, index }) =>
<ShopListRow
shop={item}
index={index}
navigation={nav}
/>
}
keyExtractor={item => item.id}
initialNumToRender={16}
extraData={this.state}
/>
);
}
}
export default ShopList;
From the ShopListRow.js i should navigate to ProductDetails.tsx with the product object
and here is the code of ShopListRow.js
export default class ShopListRow extends Component {
infoPressed = () => {
this.props.navigation.navigate('ProductDetail', {
shop: this.props.place
})
}
render() {
const {
shop,
index
} = this.props
return (
<TouchableHighlight onPress={this.infoPressed}>
<View key={shop.id} style={{ backgroundColor: index % 2 === 0 ? '#D3E3EA' : '#B3E3DA' }}>
<View style={styles.row}>
<View style={styles.edges}>
<Text style={styles.sectionTitle}>{shop.title}</Text>
<Text style={styles.buttonText}>{shop.description}</Text>
</View>
<View >
<View
style={styles.button}
>
<Image source={{uri: shop.thumbnail}} Image style={{ margin: 5, height: 120, width: 120 }} />
</View>
</View>
</View>
</View>
</TouchableHighlight>
)
}
}
and the code of ProductDetails.tsx where i got the error
interface PropsNav {
// navigation: NavigationScreenProp<NavigationState, NavigationParams>
navigation:any
}
//function ProductDetail(): JSX.Element {
export default class ProductDetail extends Component<PropsNav> {
render(){
const navigation = this.props.navigation;
var shop = navigation.getParam('shop');
return (
<View style={{ backgroundColor: '#D3E3EA' ,flex : 1}}>
<Text>{shop}</Text>
</View>
)
}
}
// export default ProductDetail;
Thanks…
