CODEWITHSUNDEEP
reactjsreact-nativereact-reduxreact-navigation
Jokas Lokas
Jokas Lokas

Reputation: 179

React Navigation Invariant violation: Attempt to get native tag

I am getting an error when trying to set up a simple navigation app using react-navigation.

Here's index.js:

/** @format */

import { AppRegistry } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import SecondScreen from './app/screens/SecondScreen';
import FirstScreen from './app/screens/FirstScreen';
import { name as appName } from './app.json';

const App = createStackNavigator(
  {
    SecondScreen,
    FirstScreen,
  },
  {
    initialRouteName: 'FirstScreen',
  },
);

AppRegistry.registerComponent(appName, () => App);

Here's FirstScreen.js:

import React, { Component } from 'react';
import { Button } from 'react-native';

export default class ReadingScreen extends Component {
  static navigationOptions = {
    header: null,
  };

  render() {
    return <Button title="CLICK ME" onPress={this.props.navigation.navigate('SelectScreen')} />;
  }
}

When I make the initial screen the SecondScreen everything is fine, but when it's like this I get this error:

Invariant Violation: Attempt to get native tag from node not marked as "native"

Help would be appreciated! I've been looking for a solution all day!

Here are my versions:

"react": "16.4.1",
"react-native": "0.56.0",
"react-navigation": "^2.12.0"

Upvotes: 5

Views: 805

Answers (3)

Juan Carlos M&#233;ndez Guevara
Juan Carlos M&#233;ndez Guevara

Reputation: 36

Same error, i can't navigate, it just hangs out and throws same error but when i am debugging remotely it works, i think it has to do with cocoa pods being installed in xcode project or something. Weird thing is that a few days ago this project did run OK.

The only different thing i did is to reinstall and update dependences in react, maybe it's an error on current react-navigation version i was version 2.11.2 and when now it is 2.12.

Yes!! Solved it, it was the version. I downgrated react-navigation from 2.12.0 to 2.11.2 and it worked!

Upvotes: 2

Mateo Hrastnik
Mateo Hrastnik

Reputation: 543

I'm getting the same error. The weird thing is, it's working as it should when I'm debugging JS remotely.

Also I noticed it only happens when I try to navigate to another screen in the stack navigator I'm already in (basically, when I try to push a screen to the stack).

Upvotes: 0

SGhaleb
SGhaleb

Reputation: 1007

I think its to do with your button component. You need to pass a function:

so instead of:

onPress={this.props.navigation.navigate('SelectScreen')}

you do:

onPress={() => this.props.navigation.navigate('SelectScreen')}

Full code:

export default class ReadingScreen extends Component {
  static navigationOptions = {
    header: null,
  };

  render() {
    const { navigate } = this.props.navigation
    return <Button title="CLICK ME" onPress={() => navigate('SelectScreen')} />;
  }
}

Upvotes: 0

Related Questions