Question 34837 in React native Question posted in
The official React Native documentation can be found here.

React Navigation. How to navigate with class component? – React native

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,
  },
});
Tags:

2

Answers


  1. 0

    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/

    Login or Signup to reply.
  2. 0

    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,
  },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search