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',
}
);
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 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 />
);
}
}
As it says in the title, contentComponent not working. I cant quite figure out why it is not rendering the content in contentcomponent.
It shows the screens 1 2 and logout that I have in the drawer navigator instead of it. Any suggestions is appreciated?
Routes.js
import React from 'react';
import {
createAppContainer,
createSwitchNavigator,
createStackNavigator,
createBottomTabNavigator,
createDrawerNavigator
} from 'react-navigation';
import { SideNavigation } from './SideNavigation';
export const SignedOut = createStackNavigator(
{
Login: {
screen: LoginForm,
navigationOptions: {
header: null
}
},
Register: {
screen: RegisterForm
},
VerifyPhone: {
screen: PhoneVerify,
navigationOptions: {
headerLeft: null
}
}
},
{
initialRouteName: "Login"
}
);
export const Tabs = createBottomTabNavigator({
Main: {
screen: createStackNavigator({
Main: Main
}),
},
Events: {
screen: createStackNavigator({
Events: Events
}),
},
Shop: {
screen: createStackNavigator({
Shop: Shop
}),
},
Profile: {
screen: createStackNavigator({
Profile: Profile
}),
},
});
export const Stack = createStackNavigator(
{
Drawer: {
screen: SideNavigation,
navigationOptions: {
header: null,
},
},
DefaultScreen: {
screen: Main,
}
}
);
export const createRootNavigator = (loggedin) => {
return createAppContainer(createSwitchNavigator(
{
SignedIn: {
screen: Stack
},
SignedOut: {
screen: SignedOut
},
},
{
//initialRouteName: loggedin ? "SignedIn" : "SignedOut"
initialRouteName: "SignedIn"
}
));
};
SideNavigation.js
import { createDrawerNavigator, SafeAreaView } from 'react-navigation';
import { ScrollView } from 'react-native-gesture-handler';
import { Text, Dimensions } from 'react-native';
import { Stack } from "./Routes";
export const SideNavigation = createDrawerNavigator(
{
home: Stack
},
{
contentComponent: (props) => {
return <Drawer {...props} >
<ScrollView>
<SafeAreaView
forceInset={{top: 'always', horizontal: 'never'}}
>
<Text
onPress={() => {
props.navigation.navigate('Screen1');
props.navigation.closeDrawer();
}}
>
Testing Side 1
</Text>
<Text
onPress={() => {
props.navigation.navigate('Screen2');
props.navigation.closeDrawer();
}}
>
Testing side 2
</Text>
</SafeAreaView>
</ScrollView>
</Drawer>
},
}
);
Edit: Code has been updated. i am now getting an error that says 'home'must be a React component.
give your custom component as a separated component file, like this:
import Drawer from "./somewhere";
const Stack = createStackNavigator(
{
DefaultScreen: {
screen: Main,
}
}
);
const DrawerNavigator = createDrawerNavigator({
home: Stack <<<<this is an address of the stack navigator you should created above
}, {
contentComponent: (props) => {
return <Drawer {...props} /> <<<<Drawer
},
drawerPosition: 'right',
drawerType: 'slide',
drawerWidth: width * 0.8
}
)
more logical and cleaner... but don't forget to give drawer to your app container:
return createAppContainer(createSwitchNavigator(
{
SignedIn: {
screen: DrawerNavigato//not stack
},
SignedOut: {
screen: SignedOut
},
},
{
//initialRouteName: loggedin ? "SignedIn" : "SignedOut"
initialRouteName: "SignedIn"
}
));
I am trying to build a User Interface but i am getting an issue in my Layout extra space is added at the space of Header and header moving down i am not understanding how to resolve this issue i am attaching an Image of the layout please help.
Here is my code...
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createStackNavigator, createAppContainer , createBottomTabNavigator} from 'react-navigation';
import { DrawerNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import AntIcon from "react-native-vector-icons/AntDesign";
import home from './src/Home/home';
import EmployerLayout from './src/Home/EmployerLayout';
import Employers from './src/CompleteEmployers/Employers';
import Jobs from './src/CompleteJobs/Jobs';
import Freelancers from './src/CompleteFreelancers/Freelancers';
import Profile from './src/ProfileSetting/Profile';
import DetailFreelancerScreen from './src/DetailFreelancer/DetailFreelancerScreen';
import DetailJobScreen from './src/DetailJobs/DetailJobScreen';
import DetailCompanyScreen from './src/DetailCompany/DetailCompanyScreen';
import SearchScreen from './src/DetailSearch/SearchScreen';
console.disableYellowBox = true;
const BaseUrl= "https://amentotech.com/projects/api_workreap/wp-json/api/v1";
const MainNavigator = createBottomTabNavigator({
// MainNavigator: MainDrawer},{
Home:{
screen: home,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon:({tintColor})=>(
<AntIcon name="home" color={tintColor} size={25} />
)
}
},
Jobs:{
screen: Jobs,
navigationOptions:{
tabBarLabel:'Jobs',
tabBarIcon:({tintColor})=>(
<AntIcon name="appstore-o" color={tintColor} size={25} />
)
}
},
Freelancers:{
screen: Freelancers,
navigationOptions:{
tabBarLabel:'Freelancers',
tabBarIcon:({tintColor})=>(
<AntIcon name="user" color={tintColor} size={25}/>
)
}
},
Employers:{
screen: Employers,
navigationOptions:{
tabBarLabel:'Employers',
tabBarIcon:({tintColor})=>(
<AntIcon name="wallet" color={tintColor} size={25}/>
)
}
},
Profile:{
screen: Profile,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
<AntIcon name="setting" color={tintColor} size={25} />
)
}
}
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let IconComponent = CONST.IC_HOME;
if (routeName === CONST.MENU_HOME) {
IconComponent = focused ? CONST.IC_HOME_SELECTED : CONST.IC_HOME;
} else if (routeName === CONST.MENU_CALENDAR) {
IconComponent = focused ? CONST.IC_CALENDAR_SELECTED : CONST.IC_CALENDAR;
}
return IconComponent;
}
}),
tabBarOptions: {
activeTintColor: '#ff5851',
},
});
const RootStack= createStackNavigator({
home:MainNavigator,
Profile:Profile,
Employers:Employers,
Jobs:Jobs,
DetailFreelancerScreen:DetailFreelancerScreen,
DetailJobScreen:DetailJobScreen,
DetailCompanyScreen:DetailCompanyScreen,
SearchScreen:SearchScreen,
EmployerLayout:EmployerLayout,
})
const App = createAppContainer(RootStack);
export default App;
Here is my code of App.js i am getting this issue from here please help
What you currently have is the react-navigation's header and your own header.
To fix your issue in a specific component / screen, add the following:
static navigationOptions = {
header: null
};
Set header mode to none while creating Stack Navigator. Please refer issue link here along with documentation
headerMode: 'none',
navigationOptions: ({ navigation }) => ({
header: null,
}),
const RootStack= createStackNavigator({
home:MainNavigator,
Profile:Profile,
Employers:Employers,
Jobs:Jobs,
DetailFreelancerScreen:DetailFreelancerScreen,
DetailJobScreen:DetailJobScreen,
DetailCompanyScreen:DetailCompanyScreen,
SearchScreen:SearchScreen,
EmployerLayout:EmployerLayout,
headerMode: 'none',
navigationOptions: ({ navigation }) => ({
header: null,
}),
})
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 } },
});