CODEWITHSUNDEEP
react-nativemobile-developmentreact-native-navigation
Milos Milojevic
Milos Milojevic

Reputation: 57

Tab Navigator - Error: Invalid Key 'tabBar' defined in navigation options

I am trying to get a tab menu to appear using react-navigation (TabNavigator) but I either get the below red screen error or If I change the name of the keys I get a blank screen.

I am using: 

react-native: 0.51.0
npm: 4.6.1

This is my router.js file:

import React from 'react';
import { TabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import BooksList from '../screens/BooksList';
import FilmsList from '../screens/FilmsList';

export const Tabs = TabNavigator({
    BooksList: {
        screen: BooksList,
        navigationOptions: {
            tabBar: {
            label: "Books",
            icon: ({ tintColor }) =>
                <Icon name="list" size={35} color={tintColor} />
            }
        }
    }
});

This is my BookList.js file:

import React, { Component } from 'react';
import {
  Text,
  View,
  ScrollView
} from 'react-native';
import { List, ListItem } from 'react-native-elements';
import { users } from '../config/data';

import '../config/ReactotronConfig';
import Reactotron from "reactotron-react-native";

class BooksList extends Component {
  onLearnMore = user => {
    this.props.navigation.navigate("Details", { ...user });
  };

  render() {
    return (
      <ScrollView>
        <List>
          {users.map(user => (
            <ListItem
              key={user.login.username}
              roundAvatar
              avatar={{ uri: user.picture.thumbnail }}
              title={`${user.name.first.toUpperCase()} ${user.name.last.toUpperCase()}`}
              subtitle={user.email}
              onPress={() => this.onLearnMore(user)}
            />
          ))}
        </List>
      </ScrollView>
    );
  }
}

export default BooksList;
Error screenshot

Upvotes: 0

Views: 552

Answers (1)

Sathish Sundharam
Sathish Sundharam

Reputation: 1120

Try this.

import React from 'react';
import { TabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import BooksList from '../screens/BooksList';
import FilmsList from '../screens/FilmsList';

export const Tabs = TabNavigator({
    BooksList: {
        screen: BooksList,
        navigationOptions: {
            tabBarLabel: "Books",
            tabBarIcon: ({ tintColor }) =>
                <Icon name="list" size={35} color={tintColor} />
            }
        }
});

Upvotes: 1

Related Questions