We Keep Coding

Render header right button conditionally with React Navigation in React Native

I am trying to conditionally render the Entypo new-message icon in the right header based on a boolean variable (if the variable is true, then the icon will show up in the header). Please see the minimum reproducible code below. Thanks in advance.
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import { Ionicons, MaterialCommunityIcons, Entypo } from "#expo/vector-icons";
const Tab = createBottomTabNavigator();
const MainTabNavigator = () => {
return (
<Tab.Navigator
initialRouteName="Chats"
screenOptions={{
tabBarStyle: { backgroundColor: "whitesmoke" },
headerStyle: { backgroundColor: "whitesmoke" },
}}
>
<Tab.Screen
name="Chats"
component={ChatsScreen}
options={({ navigation }) => ({
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="message-processing-outline"
size={size}
color={color}
/>
),
headerRight: () => (
<Entypo
onPress={() => navigation.navigate("Contacts")}
name="new-message"
size={18}
color={"royalblue"}
style={{ marginRight: 15 }}
/>
),
})}
/>
</Tab.Navigator>
);
};
export default MainTabNavigator;

You can do it as below, with a Conditional (ternary) operator. Just replace boleanVariable with your actual variable.
options={({ navigation }) => ({
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="message-processing-outline" size={size} color={color} />
),
headerRight: () =>
!boleanVariable ? (
<></>
) : (
<Entypo
onPress={() => navigation.navigate("Contacts")}
name="new-message"
size={18}
color={"royalblue"}
style={{ marginRight: 15 }}
/>
),
})}

How to get the current route name of a Stack Navigator that is inside a Bottom Tab Navigator?

I have a Bottom Tab Navigation like this:
const tabs: {
name: keyof RootNavigationParams;
component: any;
}[] = [
{
name: "BalanceStackNavigator",
component: BalanceStackNavigator,
},
{
name: "BudgetScreen",
component: BudgetScreen,
},
{
name: "EntriesScreen",
component: EntriesScreen,
},
{
name: "SettingsScreen",
component: SettingsScreen,
},
];
return (
<Tab.Navigator
screenOptions={({ route }) => ({
header: (props) => <Header {...props} />,
tabBarIcon: ({ focused }) => renderIcons(focused, route),
tabBarStyle: {
borderTopWidth: 0,
elevation: 0,
backgroundColor: colors.background,
},
})}>
{tabs.map(({ name, component }) => (
<Tab.Screen
key={name}
name={name}
options={{ tabBarShowLabel: false }}
component={component}
/>
))}
</Tab.Navigator>
);
Inside this Bottom Tab Navigator I have the next Stack Navigator:
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="BalanceScreen" component={BalanceScreen} />
<Stack.Screen name="AddExpenseScreen" component={AddExpenseScreen} />
</Stack.Navigator>
Now, what I want to do is on the Header that is on the Bottom Tab Navigation, I want to change the header depending on which screen the app is.
const Header = ({ route }: BottomTabHeaderProps) => {
return (
<View>
<Text>
{route.name}
</Text>
</View>
);
};
The problem here is if I'm under some of the routes inside BalanceStackNavigator the route name is "BalanceStackNavigator", not the name of the current screen inside BalanceStackNavigator. Is there a way to get the current route name even if its inside a Stack Navigator?

If you want the name of screens from your nested BalanceStackNavigator you should pass Header to it:
<Stack.Navigator screenOptions={{ header: (props) => <Header {...props} /> }}>
<Stack.Screen name="BalanceScreen" component={BalanceScreen} />
<Stack.Screen name="AddExpenseScreen" component={AddExpenseScreen} />
</Stack.Navigator>
Then you could hide the header of the Tab when you are in BalanceStackNavigator, like so:
<Tab.Navigator
screenOptions={({ route }) => ({
header: (props) => <Header {...props} />,
tabBarIcon: ({ focused }) => renderIcons(focused, route),
tabBarStyle: {
borderTopWidth: 0,
elevation: 0,
backgroundColor: colors.background,
},
})}
>
{tabs.map(({ name, component }) => (
<Tab.Screen
key={name}
name={name}
options={{ tabBarShowLabel: false, headerShown: name !== "BalanceStackNavigator" }}
component={component}
/>
))}
</Tab.Navigator>;

How to remove the Header from my App? Why is the Header displayed?

How to remove the Header from my App? Why is the Header displayed?
I want to remove the title from the Header, since each page has its own title, and that title takes up space from the screens.
I do not understand why it is displayed. I'm following a tutorial and as many times as I go through, I don't see a way to remove this.
I have followed the official documentation, but I cannot get rid of this nonsensical Header.
The navigation is handled from the AppStack.js file and the Header titles displayed are handled from the <Tab.Navigator> <Tab.Screen /> </Tab.Navigator>, but this is really the bottom tabs, and however, they are also displayed in the Header.
I show some image of what I cannot remove
How do I remove this Header which is unnecessary?
I have the correct dependencies:
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-gesture-handler": "^ 1.10.3",
"react-native-onboarding-swiper": "^ 1.1.4",
"react-native-reanimated": "^ 2.2.3",
"react-native-safe-area-context": "^ 3.3.2",
"react-native-screens": "^ 3.8.0",
"react-native-vector-icons": "^ 8.1.0",
"react-native-webview": "^ 11.14.1",
"styled-components": "^ 5.3.3"
AppStack.js
import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { createStackNavigator } from '#react-navigation/stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import Ionicons from 'react-native-vector-icons/Ionicons'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
import HomeScreen from '../screens/HomeSreen'
import ChatScreen from '../screens/ChatScreen'
import ProfileScreen from '../screens/ProfileScreen'
import AddPostScreen from '../screens/AddPostScreen'
const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
const FeedStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Social React Native"
component={HomeScreen}
options={{
headerTitleAlign: 'center',
headerTitleStyle: {
color: '#2e64e5',
fontFamily: 'Kufam-SemiBoldItalic',
fontSize: 18,
},
headerStyle: {
shadowColor: '#fff',
elevation: 0,
},
headerRight: () => (
<View style={{ marginRight: 10 }}>
<FontAwesome5.Button
name="plus"
size={22}
backgroundColor="#fff"
color="#2e64e5"
onPress={() => navigation.navigate('AddPost')}
/>
</View>
),
}}
/>
<Stack.Screen
name="AddPost"
component={AddPostScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#2e64e515',
shadowColor: '#2e64e515',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
<Stack.Screen
name="HomeProfile"
component={ProfileScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
</Stack.Navigator>
)
const ProfileStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
const AppStack = () => {
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Chat') {
return false;
}
return true;
}
return (
<Tab.Navigator
screenOptions={{
activeTintColor: '#2e64e5'
}}>
<Tab.Screen
name="Home"
component={FeedStack}
options={({ route }) => ({
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Messages"
component={ChatScreen}
options={({ route }) => ({
tabBarVisible: getTabBarVisibility(route),
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Profile"
component={ProfileStack}
options={{
// tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
)
}
export default AppStack
IMAGES:

you can add options={{ headerShown: false }}
<Tab.Screen
name="Messages"
component={ChatScreen}
options={({ route }) => ({
headerShown: false,
tabBarVisible: getTabBarVisibility(route),
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>

Is there a way to navigate between screens that is not defined in the NavigationContainer in ReactNavigation?

I'm trying to navigate to my Login screen, but I haven't defined my Login screen in my NavigationContainer. This is because I don't want the Login screen to be a tab in my navbar. This leads to my question: Is there a way to navigate to the Login screen, without having it as a tab in the navbar?
export default function App() {
return (
<NavigationContainer>
<SafeAreaView style={{flex: 1}}>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'home-outline'
: 'home-outline';
} else if (route.name === 'Profile') {
iconName = focused ? 'person-circle-outline' : 'person-circle-outline';
} else if (route.name === 'Calendar') {
iconName = focused ? 'calendar-clear' : 'calendar-clear';
} else if (route.name === 'Agenda') {
iconName = focused ? 'calendar-outline' : 'calendar-outline';
}
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'blue',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
<Tab.Screen name="Calendar" component={CalendarScreen} />
<Tab.Screen name="Agenda" component={AgendaScreen} />
<Tab.Screen name="New Event" component={NewEventScreen} />
</Tab.Navigator>
</SafeAreaView>
</NavigationContainer>
);
}
<Button
title="Do you have an account? Click here to log in"
onPress={() => this.props.navigation.navigate("Login")}
/>

This is an example of how it can be done:
private render() {
const Stack = createStackNavigator();
const landingScreen = this.props.isLoggedIn ? null : (
<Stack.Screen
name="LoginScreen"
component={LoginScreen}
/>
);
return (
<NavigationContainer>
<Stack.Navigator>
{landingScreen}
<Stack.Screen name="HomeScreen" component={this.renderTabNavigator}/>
</Stack.Navigator>
</NavigationContainer>
);
}
private renderTabNavigator = () => {
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={SearchScreen}/>
<Tab.Screen name="Favorites" component={FavoritesScreen}/>
<Tab.Screen name="Settings" component={SettingsScreen}/>
</Tab.Navigator>
);
}

Create custom bottom tab navigator in React native

Hello guys I want to create stylish and custom bottom tab navigation in react native can anyone have any idea how to create this mention in above

const customTabBarStyle = {
activeTintColor: '#0091EA',
inactiveTintColor: 'gray',
style: {backgroundColor: 'white' },
}
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
tabBarOptions={customTabBarStyle}
shifting="false">
<Tab.Screen
name="Home"
options={{
tabBarLabel: '',
tabBarIcon: ({ color }) => (
<Icon name="home" color={color} size={26} />
)
}}
component={HomeScreen} />
<Tab.Screen
name="Workout"
options={{
tabBarLabel: '',
tabBarIcon: ({ color }) => (
<Icon name="fitness-center" color={color} size={26} />
)
}}
component={WorkoutTabScreen} />
<Tab.Screen
name="Add"
options={{
tabBarLabel: '',
tabBarIcon: ({ color }) => (
<View
style={{
position: 'absolute',
bottom: 0, // space from bottombar
height: 68,
width: 68,
borderRadius: 68,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Icon name="add-circle-outline" color="grey" size={68}/>
</View>
)
}}
component={PayScreenComponent}/>
<Tab.Screen
name="Store"
options={{
tabBarLabel: '',
tabBarIcon: ({ color }) => (
<Icon name="store" color={color} size={26} />
)
}}
component={StoreLandingScreen} />
<Tab.Screen
name="Profile"
options={{
tabBarLabel: '',
tabBarIcon: ({ color }) => (
<Icon name="perm-identity" color={color} size={26} />
)
}}
component={ProfileScreen} />
</Tab.Navigator>
);

In React Navigation V5, there is a prop for Tab.Navigator component which you can pass whole custom bottom bar component
<Tab.Navigator tabBar={(props) => <CustomTabBar/>}>
<Tab.Screen .../>
</Tab.Navigator>

Nice explanation with good example to use custom tab bar using react-navigation
https://dev.to/hrastnik/lets-create-a-custom-animated-tab-bar-with-react-native-3496

Have a look on this great framework, React-Native-Tab-View.
https://github.com/react-native-community/react-native-tab-view
Just use tabBarPosition: bottom and render your Tabs as you'd like to.

import {createBottomTabNavigator,} from 'react-navigation'
const ACTIVE_TAB_COLOR = '#60C3FF'
const INACTIVE_TAB_COLOR = '#aaa'
const BottomStack = createBottomTabNavigator(
{
TAB_WALLET: {
screen:Screen1,
navigationOptions: {
tabBarLabel: 'Screen1',
tabBarIcon: ({ focused }) => <Icon name='iconname' focused={focused} color={focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR}/>
}
},
TAB_SEND: {
screen: Screen2,
navigationOptions: {
tabBarLabel: 'Screen2',
tabBarIcon: ({ focused }) => <Icon name='search' focused={focused} color={focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR} />
}
},
TAB_ACTIVITIES: {
screen: Screen3,
navigationOptions: {
tabBarLabel: 'Screen3'
tabBarIcon: ({ focused }) => <Icon name='paper' focused={focused} color={focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR}/>
}
}
},
{
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
tabBarOptions: {
activeTintColor: ACTIVE_TAB_COLOR,
inactiveTintColor: INACTIVE_TAB_COLOR,
showLabel: true,
style: {
borderTopWidth: 0,
paddingTop: 3,
paddingBottom: 4,
height: 60,
shadowColor: '#000',
shadowOpacity: 0.1,
shadowRadius: 20,
shadowOffset: { width: 0, height: 0 }
}
}
})