CODEWITHSUNDEEP
react-nativereact-native-tabnavigator
learningtech
learningtech

Reputation: 33715

TabNavigator doesn't work for iOS in react-native

I can't get TabNavigator to work on iOS, although it works perfectly in Android. Here are my steps to reproduce the problem

Open terminal window.

react-native init tabnav

cd tabnav

rm -rf node_modules

rm -rf package.json

rm -rf package-lock.json

Then I opened up package.json and pasted in the following contents:

{
  "name": "tabnav",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-beta.5",
    "react-native": "0.49.3",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git"
  },
  "devDependencies": {
    "babel-jest": "22.4.1",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.2",
    "react-test-renderer": "16.3.0-alpha.1"
  },
  "jest": {
    "preset": "react-native"
  }

Then I opened up App.js and pasted in the contents:

import React, { Component } from 'react';
import {TabNavigator} from 'react-navigation';
import {
  Text,
  View
} from 'react-native';
type Props = {};
class Page extends Component<Props> { 
  render() {
    return (
      <View style={{flex:1}}>
        <Text>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

const Navigator = TabNavigator({
  Recent: {screen: Page},
  Popular:{screen:Page}
  }
);

export default Navigator;

Then I opened up the Xcode project, cleaned, and ran the project.

Then I get this error:

undefined is not a function (near '...(0,_reactNavigation.TabNavigator)...')

Why won't tab navigator work?

Note: if I replace all instances of tab navigator with stack navigator, the error goes away. But I need a tab navigator, not a stack navigator

Upvotes: 2

Views: 1155

Answers (2)

Reza Torkaman Ahmadi
Reza Torkaman Ahmadi

Reputation: 3058

In react-navigation above v2, a new TabNavigator is introducer, You can use createMaterialTopTabNavigator to create TabNavigator in top of your screens.

import {createMaterialTopTabNavigator} from "react-navigation";

const TabsAB = createMaterialTopTabNavigator({
Tab_A: {
    screen: ScreenA,
....

Upvotes: 0

Paras Watts
Paras Watts

Reputation: 2665

Try to remove react-navigation package from package.json then install react-navigation. Hope it helps.

after doing this, you will notice that package.json will list a specific version of react-natigation as opposed to just a link to a repository

Upvotes: 1

Related Questions