Why am I getting the error
invalid number of arguments, expected 0
when i hover over createMaterialBottomTabNavigator
MealsNavigation.js
import React from "react";
import { Platform } from 'react-native';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import CategoriesScreen from "../screens/CategoriesScreen";
import CategoryMealsScreen from "../screens/CategoryMealsScreen";
import MealDetailScreen from "../screens/MealDetailScreen";
import Colours from '../constants/Colours'
import FavouritesScreen from "../screens/FavouritesScreen";
import { Ionicons } from "#expo/vector-icons";
import { createMaterialBottomTabNavigator } from "#react-navigation/material-bottom-tabs";
const MealsNavigator = createStackNavigator({
Categories: {
screen: CategoriesScreen,
},
CategoryMeals: {
screen: CategoryMealsScreen,
},
MealDetail: MealDetailScreen,
}, {
defaultNavigationOptions: {
headerStyle: {
backgroundColor: Platform.OS === 'android' ? Colours.primaryColour : 'white'
},
headerTintColor: Platform.OS === 'android' ? 'white' : Colours.primaryColour,
}
});
const tabScreenConfig = {
Meals: {
screen: MealsNavigator,
navigationOptions: { tabBarIcon: (tabInfo)=> {
return( <Ionicons name="ios-restaurant" size={25} color={tabInfo.tintColor} /> )
}, tabBarColor: Colours.primaryColour}
},
Favourites: {
screen: FavouritesScreen,
navigationOptions: { tabBarIcon: (tabInfo)=> {
return( <Ionicons name="star" size={25} color={tabInfo.tintColor} /> )
}, tabBarColor: Colours.secondaryColour}
},
};
const MealsFavTabNavigator =
Platform.OS === 'android'
? createMaterialBottomTabNavigator(tabScreenConfig, {
activeColor: Colours.primaryColour,
shifting: false,
barStyle: {backgroundColor: Colours.primaryColour},
})
: createBottomTabNavigator(tabScreenConfig, {
tabBarOptions: { activeTintColor: Colours.secondaryColour }
});
export default createAppContainer(MealsFavTabNavigator);
Related
I am following the react-navigation tutorial and everything was working fine until I tried using createBottomTabNavigator , I am passing two createStackNavigator to createBottomTabNavigator, the first screen showing meals categories is rendered without any issue but when I press Favorite Tab(the one with star icon) then I am greeted with the blank screen, FavNavigator is not getting rendered at all.
I tried replacing FavNavigator with FavoritesScreen component and it's being shown but the header bar is missing.
Here is app:
Here is the navigator configuration code:
import React from "react";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createAppContainer } from "react-navigation";
import { Ionicons } from "#expo/vector-icons";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import CategoriesScreen from "../screens/CategoriesScreen";
import CategoryMealsScreen from "../screens/CategoryMealsScreen";
import MealsDetailScreen from "../screens/MealsDetailScreen";
import FavoritesScreen from "../screens/FavoritesScreen";
import Colors from "../constans/Colors";
import { Platform } from "react-native";
const defaultStackNavOptions = {
headerStyle: {
backgroundColor: Platform.OS === "android" ? Colors.primaryColor : ""
},
headerTintColor: Platform.OS === "android" ? "white" : Colors.primaryColor,
headerTitle: "A Screen"
};
const MealsNavigator = createStackNavigator(
{
Categories: {
screen: CategoriesScreen
},
CategoryMeals: {
screen: CategoryMealsScreen
},
MealDetail: MealsDetailScreen
},
{
defaultNavigationOptions: defaultStackNavOptions
}
);
const FavNavigator = createStackNavigator(
{
Favorites: FavoritesScreen,
MealDetail: MealsDetailScreen
},
{
defaultNavigationOptions: defaultStackNavOptions
}
);
const tabScreenConfig = {
Meals: {
screen: MealsNavigator,
navigationOptions: {
tabBarIcon: tabInfo => {
return (
<Ionicons name="ios-restaurant" size={25} color={tabInfo.tintColor} />
);
},
tabBarColor: Colors.primaryColor
}
},
Favorites: {
screen: FavNavigator,
navigationOptions: {
tabBarIcon: tabInfo => {
return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />;
},
tabBarColor: Colors.accentColor
}
}
};
const MealsFavTabNavigator =
Platform.OS === "android"
? createMaterialBottomTabNavigator(tabScreenConfig, {
activeTintColor: "white",
shifting: true,
barStyle: {
backgroundColor: Colors.primaryColor
}
})
: createBottomTabNavigator(tabScreenConfig, {
tabBarOptions: {
activeTintColor: Colors.accentColor
}
});
export default createAppContainer(MealsFavTabNavigator);
Thanks in advance.
Full code:
GitHub
I had similar issue today. I salved it by downgrading/upgrading react-native-screens to version: "react-native-screens": "2.1.0". Before was 2.4
I have made my custom header and i want to remove react-native default header.
I have tried with
Setting option "header: null" in navigationOptions of
createBottomTabNavigator
header:null in HomeScreen.js file
but it's not working. Please help to solve this issue. Here is my navigation code. I am attaching screenshot exactly what i want to remove.
import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import SavedScreen from "../screens/SavedScreen";
import BookingScreen from "../screens/BookingScreen";
import BeAHostScreen from "../screens/BeAHostScreen";
import ReferEarnScreen from "../screens/ReferEarnScreen";
import BookingInnerScreen from "../screens/BookingInnerScreen";
import { Icon } from "react-native-elements";
const config = Platform.select({
web: { headerMode: "screen" },
default: {}
});
const tabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen,
defaultNavigationOptions: {
title: "App Name Here"
},
navigationOptions: {
tabBarLabel: "Home",
tabBarOptions: {
activeTintColor: "#00E8AC"
},
tabBarIcon: ({ focused }) => {
return focused ? (
<Icon name="md-home" type="ionicon" color="#00E8AC" />
) : (
<Icon name="md-home" type="ionicon" color="#ccc" />
);
}
}
},
Saved: {
screen: SavedScreen,
defaultNavigationOptions: {
title: "Saved"
},
navigationOptions: {
tabBarLabel: "Saved",
tabBarOptions: {
activeTintColor: "#00E8AC"
},
tabBarIcon: ({ focused }) => {
return focused ? (
<Icon name="md-heart" type="ionicon" color="#00E8AC" />
) : (
<Icon name="md-heart" type="ionicon" color="#ccc" />
);
}
}
}
});
const MyApp = createStackNavigator(
{
BookingInner: BookingInnerScreen,
Tabs: {
screen: tabNavigator
}
},
{
initialRouteName: "Tabs"
}
);
export default MyApp;
Try this :
const MyApp = createStackNavigator(
{
BookingInner: BookingInnerScreen,
Tabs: {
screen: tabNavigator
}
},
{
initialRouteName: "Tabs",
headerMode: 'none',
}
);
I want to create Drawer Navigation That contains Menu and Home Screen. I tried a lot but I am unable to resolve this issue and as per update of react native we have to wrap the navigation in CreateAppContainer, as you can see i wraped it but nothing is resolved.
"MainComponent"
import React, {Component} from 'react';
import { View, Platform } from 'react-native';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import DishDetail from './DishDetailComponent';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation-stack';
const MenuNavigator = createStackNavigator({
Menu: { screen: Menu },
DishDetail: { screen: DishDetail }
},
{
initialRouteName: 'Menu',
navigationOptions: {
headerStyle: {
backgroundColor: "#512DA8"
},
headerTintColor: '#fff',
headerTitleStyle: {
color: "#fff"
}
}
}
);
const HomeNavigator = createStackNavigator({
Home: { screen: Home }
}, {
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: "#512DA8"
},
headerTitleStyle: {
color: "#fff"
},
headerTintColor: "#fff"
})
});
//-----------Main---------//
const MainNavigator = createDrawerNavigator({
Home:
{ screen: HomeNavigator,
navigationOptions: {
title: 'Home',
drawerLabel: 'Home'
}
},
Menu:
{ screen: MenuNavigator,
navigationOptions: {
title: 'Menu',
drawerLabel: 'Menu'
},
}
}, {
drawerBackgroundColor: '#D1C4E9'
});
class Main extends Component() {
render() {
return(
<View>
<MainNavigator />
</View>
);
}
}
export default createAppContainer(Main);
////////////////////App.js/////////////////
import React from 'react';
import Main from './components/MainComponent';
export default class App extends React.Component {
render() {
return (
<Main />
);
}
}
I think the issue is i am not wrapping the appContainer Correctly.
You are importing wrong. use like
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
instead of
import { createStackNavigator, createDrawerNavigator } from 'react-navigation-stack';
Try this way
const LoginNavigator = createStackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null,
}
},
SignUp: {
screen: SignUp,
navigationOptions: {
header: null,
}
}
});
class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('../Img/hamburger.png')}
style={{ width: 25, height: 25, marginLeft: 20, tintColor: '#ffffff' }}
/>
</TouchableOpacity>
</View>
);
}
}
const HomeActivity_StackNavigator = createStackNavigator({
Home: {
screen: Main,
navigationOptions: ({ navigation }) => ({
title: 'Dashboard',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800'
},
headerTintColor: '#fff'
}),
},
}, {headerLayoutPreset: 'center'});
const DrawerNavigators = createDrawerNavigator({
//Drawer Optons and indexing
Main: {
screen: HomeActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Dashboard',
}
}
});
const NonDrawerNavigators = createStackNavigator({
TaskView: {
screen: TaskView,
navigationOptions: {
title: 'Task',
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff'
}
},
TeamView: {
screen: TeamView,
navigationOptions: {
title: 'Team',
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff'
}
}
}, {headerLayoutPreset: 'center'});
const AppNavigator = createStackNavigator({
drawerStack: {
screen: DrawerNavigators,
navigationOptions: {
header: null
}
},
nonDrawerStack: {
screen: NonDrawerNavigators,
navigationOptions: {
header: null
}
}
});
export default createAppContainer(createSwitchNavigator({
SplashScreen: SplashScreen,
loginStack: LoginNavigator,
homeStack: AppNavigator
}, {
initialRouteName: 'SplashScreen'
})
);
I had modified your code as under. I hope this will help you.
"MainComponent"
import React, {Component} from 'react';
import { View, Platform } from 'react-native';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import DishDetail from './DishDetailComponent';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation-stack';
const MenuNavigator = createAppContainer(createDrawerNavigator(
{
Menu: { screen: Menu },
DishDetail: { screen: DishDetail }
},
{
contentComponent: SideMenu,
drawerWidth: normalize(280),
initialRouteName: "Menu"
}
));
const HomeNavigator = createAppContainer(createStackNavigator(
{
Home: { screen: Home }
},
{
// Default config for all screens
headerMode: 'none',
initialRouteName: 'Home',
// transitionConfig: noTransitionConfig,
},
));
class Main extends Component() {
render() {
return(
<View>
<MainNavigator />
</View>
);
}
}
export default createAppContainer(Main);
////////////////////App.js/////////////////
import React from 'react';
import Main from './components/MainComponent';
export default class App extends React.Component {
render() {
return (
<Main />
);
}
}
I've build an app with a BottomTabNavigator and createSwitchNavigator.
If I declare my screen inside the MainTabNavigator, the top header of my screens work as intended, but as soon as I import my screens (for example my HomeScreen) I get a double header.
I've tried adding:
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
To my StackNavigator, but doesn't seem to have an effect.
I've tried looking at similar posted questions, but have not been set off into the right direction.
Is anyone else familiar with this problem and how to solve it?
App JS
import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator,createBottomTabNavigator } from 'react-navigation';
import AppNavigator from './navigation/AppNavigator';
export default class App extends React.Component {
render() {
return <AppNavigator />;
}
}
App Navigator
import React from 'react';
import { createSwitchNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
export default createSwitchNavigator(
{
Main: MainTabNavigator,
},
);
MainTabNavigator
import React from 'react';
import { Button, Text, View } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import HomeScreen from '../screens/clubs/Home';
import DetailsScreen from '../screens/clubs/Details';
class SettingsScreen extends React.Component {
static navigationOptions = {
// title: ' Alpha',
header: null,
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
const HomeStack = createStackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
});
const SettingsStack = createStackNavigator({
Settings: { screen: SettingsScreen },
Details: { screen: DetailsScreen },
});
export default createBottomTabNavigator(
{
Home: { screen: HomeStack },
Settings: { screen: SettingsStack },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Settings') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
}
return <Ionicons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#DD016B',
inactiveTintColor: 'white',
tabStyle: {
width: 100,
backgroundColor: 'black',
},
labelStyle:{
color: 'white',
},
}
},
);
Home JS
import React, { Component } from 'react';
import {
AppRegistry,
ListView,
View,
Text,
StyleSheet,
Image,
Button,
TouchableOpacity,
TextInput,
ScrollView,
Icon,
FlatList,
} from 'react-native';
import { createStackNavigator, } from 'react-navigation';
export class HomeScreen extends Component {
static navigationOptions = {
// title: ' Alpha',
header: null,
};
....... App content
}
AppRegistry.registerComponent('App', () => App)
export default createStackNavigator({
Home: {
screen: HomeScreen,
},
},
{
initialRouteName: 'Home',
});
In your MainTabNavigator file, try this:
const HomeStack = createStackNavigator({
Home: { screen: HomeScreen, navigationOptions: { header: null } },
Details: { screen: DetailsScreen, navigationOptions: { header: null } },
});
I followed the documentation but still getting the dreaded 500 error
I added the screens below with code, please advise on what I am missing.
the app.js page is loaded in the index.js
https://snack.expo.io/#brody182/tab-navigation-with-screen-components
react-native#.55
react-navigation#2.5.2
App.js
import React, { Component } from 'react';
import AppNavigator from './components/app.navigator';
import { StyleProvider } from 'native-base';
import getTheme from './native-base-theme/components';
import CustomTheme from './native-base-theme/variables/custom.material';
export default class App extends Component {
render() {
return (
<StyleProvider style={getTheme(CustomTheme)}>
<AppNavigator/>
</StyleProvider>
);
}
}
app.navigator.js
import React from 'react';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation'; // Version can be specified in package.json
import HomeScreen from './components/HomeScreen';
import SettingsScreen from './components/SettingsScreen';
import DetailsScreen from './components/DetailsScreen';
const HomeStack = StackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
});
const SettingsStack = StackNavigator({
Settings: { screen: SettingsScreen },
Details: { screen: DetailsScreen },
});
export default TabNavigator(
{
Home: { screen: HomeStack },
Settings: { screen: SettingsStack },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Settings') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return <Icon name={iconName} size={25} color={tintColor} />;
},
}),
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
animationEnabled: false,
swipeEnabled: false,
}
);
The screen pages are all similar except the names
settingsScreen.js , detailScreen.js, homeScreen.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export default class SettingsScreen extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}