Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

React Native - Navigate to screen - Invalid hook call

$
0
0

App.js:

import React, { Component } from 'react';
import {View,Text} from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';

import Epics from './screens/tmp';
import Pager from './screens/Pager';

const DrawerNavigator = createDrawerNavigator({
 Home: {screen: Epics},
 Page: {screen: Pager}
},{initialRouteName: 'Home'});

const Stack = createAppContainer(DrawerNavigator);

export default class App extends Component {
  render() {
    return <Stack />;
  }
}

Trying to navigate to a screen through a custom component:

import { ActivityIndicator, Image, StyleSheet, View, TouchableHighlight } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';
import { useNavigation } from 'react-navigation-hooks';

import AuthorRow from './AuthorRow';

export default class Card extends React.Component {

  static propTypes = {
    fullname: PropTypes.string.isRequired,
    image: Image.propTypes.source.isRequired,
    linkText: PropTypes.string.isRequired,
    onPressLinkText: PropTypes.func.isRequired,
    epicId: PropTypes.string.isRequired,
  };

  state = {
    loading: true,
  };

  getNav(){
    return useNavigation();
  }

  handleLoad = () => {
    this.setState({ loading: false });
  };

  render() {
    const { fullname, image, linkText, onPressLinkText, epicId, prop } = this.props;
    const { loading } = this.state;

    return (
      <View>
        <AuthorRow
          fullname={fullname}
          linkText={linkText}
          onPressLinkText={onPressLinkText}
        />
        <TouchableHighlight onPress={() => this.getNav().navigate('Pager')} underlayColor="white">
          <View style={styles.image}>
            {loading && (
              <ActivityIndicator style={StyleSheet.absoluteFill} size={'large'} />
            )}
            <Image
              style={StyleSheet.absoluteFill}
              source={image}
              onLoad={this.handleLoad}
            />
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    aspectRatio: 1,
    backgroundColor: 'rgba(0,0,0,0.02)',
  },
});

From above code, trying to navigate using:

import { useNavigation } from 'react-navigation-hooks';

getNav(){ return useNavigation(); }

this.getNav().navigate('Pager')

It errors our stating: Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.

How do I navigate using "useNavigation()" or how do I get "this.props.navigation" reference in a component? (I am new to React Native, please help me understand)


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>