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

Question

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;

Answer 1

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} />
}
}
});