React Navigation. How to navigate with class component? - reactjs

Question

I am trying to navigate with React Navigate.
When clicking on the image I get this error in console:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
I have tried different methods to navigate, but without success. Any suggestions?
This is my code:
import React, { Component } from 'react';
import { StyleSheet, Text, View, SafeAreaView, Image, TouchableHighlight } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { useNavigation } from '#react-navigation/native';
const Stack = createNativeStackNavigator();
import Home from './screens/homeScreen';
import Teams from './screens/teamsScreen';
export default class App extends Component {
GoTo({ screenName }) {
const navigation = useNavigation();
navigation.navigate(screenName);
}
render() {
return (
<SafeAreaView style={{flex: 1,}}>
<View style={styles.header}>
<TouchableHighlight onPress={() => this.GoTo('Teams')}>
<Image
style={styles.headerLogo}
source={{uri: 'https://yukigassen.no/uploads/Yukigassen_Logo_Big_Transparent.png'}}
resizeMode={'stretch'}
/>
</TouchableHighlight>
<View style={styles.headerRight}>
<Image
style={{width: 25, height: 25}}
source={{uri: 'https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/512/Settings-icon.png'}}
/>
</View>
</View>
<View style={styles.screen}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={{headerShown: false}} />
<Stack.Screen name="Teams" component={Teams} options={{headerShown: false}} />
</Stack.Navigator>
</NavigationContainer>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
header: {
height: '7.5%',
padding: 5,
},
headerLogo: {
width: 160,
height: 50,
marginLeft: 10,
},
headerRight:{
position: 'absolute',
right: 5,
top: 15,
},
screen: {
flex: 1,
},
});

Answer 1

useNavigation() is a hook that cannot be used with class components but there is a way around it. You can create a wrapper component and pass the navigation prop into your class component.
class App extends Component {
render() {
// Get it from props
const { navigation } = this.props;
...
}
}
// Wrap and export
export default function(props) {
const navigation = useNavigation();
return <App {...props} navigation={navigation} />;
}
Example from https://reactnavigation.org/docs/use-navigation/

Answer 2

you can try this approach, make that comp default route and check, lemme know if this helps :) thanks
import React, { Component } from 'react';
import { StyleSheet, Text, View, SafeAreaView, Image, TouchableHighlight } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { useNavigation } from '#react-navigation/native';
const Stack = createNativeStackNavigator();
import Home from './screens/homeScreen';
import Teams from './screens/teamsScreen';
const DefaultRoute = () => {
GoTo({ screenName }) {
const navigation = useNavigation();
navigation.navigate(screenName);
}
return(
<SafeAreaView style={{flex: 1,}}>
<View style={styles.header}>
<TouchableHighlight onPress={() => this.GoTo('Teams')}>
<Image
style={styles.headerLogo}
source={{uri: 'https://yukigassen.no/uploads/Yukigassen_Logo_Big_Transparent.png'}}
resizeMode={'stretch'}
/>
</TouchableHighlight>
<View style={styles.headerRight}>
<Image
style={{width: 25, height: 25}}
source={{uri: 'https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/512/Settings-icon.png'}}
/>
</View>
</View>
</SafeAreaView>
)
}
export default class App extends Component {
render() {
return (
<SafeAreaView style={styles.screen}>
<NavigationContainer>
<Stack.Navigator initialRouteName="DefaultRoute">
<Stack.Screen name="DefaultRoute" component={DefaultRoute} options={{headerShown: false}} />
<Stack.Screen name="Home" component={Home} options={{headerShown: false}} />
<Stack.Screen name="Teams" component={Teams} options={{headerShown: false}} />
</Stack.Navigator>
</NavigationContainer>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
header: {
height: '7.5%',
padding: 5,
},
headerLogo: {
width: 160,
height: 50,
marginLeft: 10,
},
headerRight:{
position: 'absolute',
right: 5,
top: 15,
},
screen: {
flex: 1,
},
});