React Navigation (V2 / V3): How to access navigation.state.index in navigationOptions on screen - react-native

I'm building a React Native app and for my navigation I use React Navigation (V3). For my UI elements I use React Native Elements.
I have a screen which I reuse in multiple navigators. Sometimes it is at the root of a stack, and sometimes it's pushed on with a stack. I want to programmatically add a headerLeft element to this screen navigationOptions based on its position in the stack, because I either want the default back button to show, or a burger menu icon to show, if the screen is at the root of the stack (because the stack is nested in a drawer).
So I tried the following:
export class ScannerScreen extends Component {
static navigationOptions = ({ navigation }) => ({
headerLeft:
navigation.state.index > 0 ? (
undefined
) : (
<Icon type="ionicon" name="ios-menu" onPress={navigation.toggleDrawer} />
),
title: strings.scannerTitle
});
// ...
The problem is this doesn't work as navigation.state.index is undefined here. How would one do this with React navigation?
Edit:
As per request I added a screenshot of console.log(navigation) (via <Icon />s onPress.)

I found a hacky solution, which is okay but I also dislike it a bit:
const stackConfig: StackNavigatorConfig = {
cardStyle: styles.card,
navigationOptions: {
headerBackTitleStyle: styles.headerBackTitle,
headerStyle: styles.header,
headerTintColor: "black"
}
};
const HomeStack = createStackNavigator(
{ HomeScreen, RestaurantDetailScreen, MenuScreen, ScannerScreen },
{
...stackConfig,
initialRouteName: "HomeScreen",
navigationOptions: ({ navigation }) => ({
headerLeft:
parseFloat(navigation.state.key.slice(-1)) > 1 ? (
undefined
) : (
<Icon
containerStyle={styles.leftIcon}
type="ionicon"
name={getIconName("menu")}
onPress={navigation.toggleDrawer}
/>
),
...stackConfig.navigationOptions
})
}
);
This way it automatically sets it for the whole stack. You can also do this in the respective screen individual navigation options. But this only works, since the automatically assigned key for the screen contains it's index.

Related

How to navigate to other screen using the headerRight on the navigator code?

The title is very confusing, but the explanation that I will give will be more clear.
I am creating one StackNavigator for my app, and I am defining one icon to be displayed on the header of one of my screens like so:
const navigator= createStackNavigator(
{
Initial: {
screen: Posts,
navigationOptions: {
title: "All Posts",
headerRight: () => {
return (
<TouchableOpacity style={{ padding: 5 }}>
<Feather name={"plus"} size={30} />
</TouchableOpacity>
);
},
},
},
Details: Details,
Create: Create,
},
{
initialRouteName: "Initial",
}
);
const App = createAppContainer(navigator);
export default () => {
return (
<Provider>
<App />
</Provider>
);
};
The problem is that I want to navigate the user to the Create screen when the user presses the icon that I am rendering on the right side of the header, but I do not know how to have access to the navigation.navigate() function that the navigator generates for all the screens. I know that I can define the header on the Posts' screen file, so I have access to the navigation.navigate() function, but I want to know if there is some way to do it on the App.js file.
EDIT
Reading the documentation I saw that the way that I am was creating the navigator is not what the official documentation recommends. I learned to make it like this by one old course, using React Navigation 4.x, and now with React Navigation 6.x I perceived the difference in the creation and changed the way that I was doing it on my app. You can check the documentation for the problem that I was having here
You can prepare your navigation option this way by sending props
options={(props) => ({
headerRight: () => <TouchableOpacity
onPress={()=>props.navigation.navigate('Screen')} style={{ padding: 5 }}>
<Feather name={"plus"} size={30} />
</TouchableOpacity>
})}

Set Screen Title in ReactNative createBottomTabNavigator

I am trying to set the Screen Title of the Navigated Screen by using navigator. But it's not working/ changing and doesn't throw an exception either.
Scenario
I want to load some states from Redux and display nice Header Title in the Navigation Screen when the user clicks on the bottom Tab.
User clicks on second Tab in bottom navigation tab
Load state from Redux
Set Header Title
Expected
I want to set the following text to the Screen title
headerTitle set in Screen
Actual
I declared my BottomTabNavigator as following:
import FilterScreen from '../screens/FilterScreen';
import ItemsListScreen2 from '../screens/ItemsListScreen copy';
const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = 'List';
export default function BottomTabNavigator({ navigation, route }) {
// this code works
navigation.setOptions({ headerTitle: 'header Set in Navigator' });
const [isFilterVisible, toggleFilter] = useState(false);
return (
<>
<BottomTab.Navigator
initialRouteName={INITIAL_ROUTE_NAME}
tabBarOptions={{
inactiveBackgroundColor: '#42a5f5',
inactiveTintColor: '#ffffff'
}}
>
<BottomTab.Screen
name="List"
component={ItemsListScreen}
options={{
title: 'List',
tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-calendar" iconType="ion" />,
}}
/>
<BottomTab.Screen
name="List2"
headerMode="screen"
component={ItemsListScreen2}
screen
options={{
title: 'title List2',
headerTitle: 'my header title',
tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-calendar" iconType="ion" />,
}}
/>
....
</BottomTab.Navigator>
</>
);
}
In the above component, I could set the Screen Title by using navigation.setOptions and it works.
So, I tried to do the same operation to set the headerTitle in List2 Screen. But it doesn't have any effect to the screen header. It only changes the label of the tab to "this is a title".
import { StyleSheet, View, Text } from 'react-native';
const ItemsListScreen2 = ({ navigation }) => {
navigation.setOptions({
headerTitle: `headerTitle set in Screen`, // <-- no effect at the screen level
title: "this is a title"
});
return (
<View>
<Text>Screen 2</Text>
</View>
);
}
I tried to do console.log to navigation object passed to the component and I can see it here:
Could you please help me to sort out this issue and suggest me how I could set the title from the screen?
Do I need to create a new function (Eg. getHeaderTitle), load the Redux state and set the title due to the route within BottomTabNavigation component? I want to keep that component clean and I want to load the Redux States only when the user navigates to the screen. I'd like to keep the screen specific codes in its own related screen.

React Native navigating between two screens back & forth

I have Home screen where we search for an ItemCode, after we search ItemCode it will get details from API & screen will navigate to Screen 1(Item Details Screen) & from Screen 1 we have a search for ItemNutrients and after search it will get Nutrients & Navigate to Screen 2 (Nutrients Screen)
In other words
Home -> Screen 1 (Item Details Screen) -> Screen 2 (Nutrients Screen)
After getting the necessary details from API from search for Item Details & Nutrients, User can navigate between Item Details & Nutrients back and forth..
I could navigate from Screen 1 (item Details) to Screen2 (Nutrients Screen) and swipe back to Screen 1 (item Details) but how could I swipe forward to look at Screen 2 (Nutrients Screen) again without searching for nutrients in Screen 1 as I already have the data from API for Nutrients.
Any ideas on how to implement this ? this is basically navigate to Screen 1 to Screen 2 on search from Screen 1 or if Screen 2 search is already done and we have data so swipe forward should navigate to Screen 2, I can have a button to navigate to Screen 2, the button on Screen 1 conditinally appears only when we have API data for Nutrients Screen and it will navigate to Screen 2 on that button click, but i need swipe functionality as well to navigate forward
I have Home, Screen 1, Screen 2 in stackNavigator, is it alright or i could use any other navigators to achieve this.
I have researched how to do this and can't find it in the docs anywhere. Please let me know if I am missing it somewhere. Thanks!
Nutrition Context:
import React, { createContext, useState, useEffect } from "react";
export const NutriSyncContext = createContext();
const DEFAULT_IS_NUTRI_SCANNED = false;
export const NutriSyncContextProvider = ({ children }) => {
const [isNutritionScanned, setisNutritionScanned] = useState(
DEFAULT_IS_NUTRI_SCANNED
);
// When we first mount the app we want to get the "latest" conversion data
useEffect(() => {
setisNutritionScanned(DEFAULT_IS_NUTRI_SCANNED);
}, []);
const nutrionScanClick = ({ navigation }) => {
setisNutritionScanned(true);
//navigation.navigate("NutritionFacts");
};
const contextValue = {
isNutritionScanned,
setisNutritionScanned,
nutrionScanClick,
};
return (
<NutriSyncContext.Provider value={contextValue}>
{children}
</NutriSyncContext.Provider>
);
};
inside navigation.js
const tabPNMS = createMaterialTopTabNavigator();
function tabPNMSStackScreen() {
const { isNutritionScanned } = useContext(NutriSyncContext);
console.log(isNutritionScanned);
return (
<tabPNMS.Navigator initialRouteName="PNMSNutrition" tabBar={() => null}>
<tabPNMS.Screen name="PNMSNutrition" component={PNMSNutrition} />
{isNutritionScanned ? (
<tabPNMS.Screen name="NutritionFacts" component={NutritionFacts} />
) : null}
</tabPNMS.Navigator>
);
}
and In stack Navigation:
const SearchStack = createStackNavigator();
const SearchStackScreen = () => (
<NutriSyncContextProvider>
<SearchStack.Navigator
initialRouteName="Search"
screenOptions={{
gestureEnabled: false,
headerStyle: {
backgroundColor: "#101010",
},
headerTitleStyle: {
fontWeight: "bold",
},
headerTintColor: "#ffd700",
headerBackTitleVisible: false, //this will hide header back title
}}
headerMode="float"
>
<SearchStack.Screen
name="Search"
component={Search}
options={({ navigation }) => ({
title: "Search",
headerTitleAlign: "center",
headerLeft: () => (
<Entypo
name="menu"
size={24}
color="green"
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
/>
),
})}
/>
<SearchStack.Screen
name="NutriTabs"
options={() => ({
title: "PNMS",
headerTitleAlign: "center",
})}
component={tabPNMSStackScreen}
/>
</SearchStack.Navigator>
</NutriSyncContextProvider>
);
I have NutriSyncContextProvider around the stack, but when I click the button on my page it will call nutrionScanClick method in context class it works just fine but when i do navigation.navigate to the NutritionFacts tab that is enabled i get error saying NutritionFacts tab doesn't exist
I got it working below is the code:
const nutrionScanClick = () => {
if (!isNutritionScanned) setisNutritionScanned(true);
else {
//Make a API call here for new data for the new scanned one's and then navigate
navigation.navigate("NutritionFacts");
}
};
useEffect(() => {
if (isNutritionScanned) {
navigation.navigate("NutritionFacts");
}
}, [isNutritionScanned]);
There's no swipe back n forth between screens in a stack navigator. You need to use a tab navigator to be able to keep multiple screens like that.
https://reactnavigation.org/docs/material-top-tab-navigator
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
function MyTabs() {
return (
<Tab.Navigator tabBar={() => null}>
<Tab.Screen name="ItemDetails" component={ItemDetails} />
{showNutrients ? <Tab.Screen name="Nutrients" component={Nutrients} /> : null}
</Tab.Navigator>
);
}

Badge doesn't fit into bottom navigation in react native

I tried using the Badge from https://github.com/xotahal/react-native-material-ui, but the element doesn't properly fit into the bottom navigation:
Here's the code from AppNavigator.js:
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { Badge, Icon, Avatar } from "react-native-material-ui";
export const SignedIn = createMaterialBottomTabNavigator(
{
MeetingsScreen: {
screen: MeetingsScreen,
navigationOptions: {
tabBarLabel: "Заседания",
tabBarIcon: ({ focused }) => (
<Badge text="3">
<TabBarIcon
focused={focused}
name={
Platform.OS === "ios"
? `ios-people${focused ? "" : "-outline"}`
: "md-people"
}
/>
</Badge>
)
}
},
...
I tried wrapping the TabBarIcon itself into the badge, but it didn't help.
How to set up this element properly? Or is there a better library for that?
Create a custom tab bar icon component that wraps the tab bar icon inside a view of greater width and height of the icon and make sure the badge is within the view perimeter. See diagram below:

how to display headers in react navigation with TabNavigation

I noticed that views in StackNavigation show the header title but if I set those same screens in a TabNavigation it doesn't show a header. It only shows a header if I wrap a StackNavigation either around each tab, or wrap the TabNavigation nested inside a StackNavigation.
Why don't screens in TabNavigation show a header - is that expected behavior? If so, is it better to have a StackNavigation in each tab, or one big StackNavigation around the TabNavigation?
// tabs navigation doesn't show a header title in each screen
const TabsNavigator = TabNavigator({
Home: {
screen:HomeScreen,
},
Profile: {
screen: ProfileScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
navigationOptions: {
header: {
visible: true,
},
},
});
Header shows when I wrap it in a StackNavigator
default StackNavigator({
Home: { screen: TabsNavigator },
});
Or is it better to do it this way
export TabsNavigator = TabNavigator({
Home: {
screen:StackNavigator({
Home: { screen: HomeScreen },
}),
},
Profile: {
screen: StackNavigator({Profile: {screen: ProfileScreen}}),
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
navigationOptions: {
header: {
visible: true,
},
},
});
Even if this is a fairly old question, I had myself this question a couple days ago, so I'll be adding my two cents about it hoping this will be useful for someone else in the future as well.
React Navigation is an amazing product with a high amount of customization, but that also turns out sometimes to be confusing to begin with, which also applies to some sections of the documentation. navigationOptions as of the current version states, is common for all screens but the "list of available navigation options depends on the navigator the screen is added to." https://reactnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigator hence the header option doesn't work because it's not available for TabNavigator itself.
Regarding your question on which approach is the best that depends on what do you want to accomplish with the navigation for your app itself. If you put your TabNavigator inside a StackNavigator the header component will be common for all of the tabs inside the TabNavigator, meaning the tab transition will take effect but the header won't move from its top position. If you on the other hand choose to nest a StackNavigator inside every tab, the header will render inside every tab, meaning the header will move along the tab transition animation.
I made a quick demo for you to see the difference, the code is also available if you wanna play with it.
I understand that this question already has an answer to it, but I would like to just show the way that I was able to make this work for myself using React Navigation > 5.x.x.
Juan's answer describes the best way to set this up, but also showing how it's done so that people can understand what the navigation looks like is also a bit of help for us visual learners. This was a little bit hard for me to understand at the time but hoping that it will help others in the future.
I find the best way to look at this is by breaking down the hierarchy of your apps routes. For me mine looked something like this.
LoginNavigation HomeNavigation
| |
LoginScreen RegisterScreen HomeStack ProfileStack
| |
HomesScreen ProfileScreen
My LoginNavigation stack contains two screens the Login screen and Register screen. In my app I don't need tab navigation set here so it's appropriate to just have these screens wrapped in a StackNavigator. On the other hand I have my HomeNavigation stack which contains a Home screen and a Profile screen. The only issue is that my screens are wrapped in a TabNavigator which does not produce a header.
To fix this we actually need to wrap our two screens (HomeScreen & ProfileScreen) in StackNavigators and then wrap everything with the TabNavigator. After realizing this, it actually makes much more sense to do it this way. Why? Well let's say that in my home screen I have some posts and I want the user to be able to see the post and all the comments that come with it. Well I wouldn't setup another Tab for this because that would just be silly. Instead we would add it to our HomeStack navigation instead like so.
HomeNavigation
|
HomeStack ProfileStack
| |
HomesScreen PostScreen ProfileScreen
This structure now seems apparent when looking at something like the ProfileStack where there could be multiple branches to this stack, such as Settings, Followers, Pictures...
Hopefully displaying the structure helps someone understand this as well as it helped me.
Below is my AppStackNavigator file to see the structure in code.
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import Login from '../screens/Login';
import Register from '../screens/Register';
import FirstProfileImage from '../screens/FirstProfileImage';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Home from '../screens/Home';
import Profile from './../screens/Profile';
const LoginStack = createStackNavigator();
const HomeTabs = createBottomTabNavigator();
const HomeStack = createStackNavigator();
const ProfileStack = createStackNavigator();
const AppStack = createStackNavigator();
const LoginStackNavigator = () => (
<LoginStack.Navigator screenOptions={{headerStyle: {elevation: 0},cardStyle: {backgroundColor: '#ffffff'}}}>
<LoginStack.Screen name="Login" component={Login}/>
<LoginStack.Screen name="Sign Up" component={Register}/>
<LoginStack.Screen name="Profile Image" component={FirstProfileImage}/>
</LoginStack.Navigator>
)
const HomeStackNavigator = () => (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={Home} />
</HomeStack.Navigator>
)
const ProfileStackNavigator = () => (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profile" component={Profile} />
</ProfileStack.Navigator>
)
const HomeTabNavigator = () => (
<HomeTabs.Navigator>
<HomeTabs.Screen name="HomeStack" component={HomeStackNavigator} />
<HomeTabs.Screen name="ProfileStack" component={ProfileStackNavigator} />
</HomeTabs.Navigator>
)
const AppStackNavigator = () => (
<AppStack.Navigator initialRouteName={'HomeScreen'} screenOptions={{headerStyle: {elevation: 0},cardStyle: {backgroundColor: '#ffffff'}}} headerMode='none'>
<AppStack.Screen name="LoginScreen" component={LoginStackNavigator}/>
<AppStack.Screen name="HomeScreen" component={HomeTabNavigator}/>
</AppStack.Navigator>
)
export default AppStackNavigator;
I do agree that this is a bit overkill and that we could eliminate the issue of having to keep track of each individual navigator, but it's what works for now until they add a feature for this. Hopefully this explanation helps a bit. Thanks for coming to my TED talk.
According to React-Navigation TabNavigator Docs there is no header navigationOption. Therefore, when you write the following code you are actually setting a nonexisting value thus what you are doing does not affect anything.
navigationOptions: {
header: { visible: true },
}
Sadly, you need a StackNavigator in this situation.
A general structure that I use is this, create a tab navigator and then render stacks for each tab. In this example I don't want a header on my LiveMap but I do on the other two tabs. The naming is up to you for whatever makes sense. Then inside each stack I render the screens that make sense.
const Tab = createBottomTabNavigator();
const TrainStack = createStackNavigator();
const MapStack = createStackNavigator();
const BusStack = createStackNavigator();
then each stack renders whatever screens I want for that subset
const MapNavigator = () => {
return (
<MapStack.Navigator
initialRouteName="LiveMap"
screenOptions={{headerShown: false}}>
<MapStack.Screen name="Live Map" component={LiveMap} />
<MapStack.Screen name="Show Routes" component={AllRoutes} />
<MapStack.Screen name="Select Routes" component={SelectRoutes} />
</MapStack.Navigator>
);
};
and the tab navigator will render my stacks for each tab.
const MainNavigator = () => (
<Tab.Navigator
tabBarOptions={{
activeTintColor: 'orange',
keyboardHidesTabBar: true,
}}
initialRouteName="Live Map">
<Tab.Screen
name="Buses"
component={BusNavigator}
options={{
tabBarLabel: 'Buses',
tabBarIcon: ({color, size}) => (
<BusIcon height={30} width={30} color={color} />
),
}}
/>
<Tab.Screen
name="Live Map"
component={MapNavigator}
options={{
tabBarLabel: 'Map',
tabBarIcon: ({color}) => (
<View
height={100}
width={100}
style={{
display: 'flex',
alignItems: 'center',
backgroundColor: '#fff',
paddingTop: 8,
borderRadius: 70,
}}>
<MapIcon height={50} width={50} color="orange" />
</View>
),
}}
/>
<Tab.Screen
name="Trains"
component={TrainNavigator}
options={{
tabBarLabel: 'Trains',
tabBarIcon: ({color, size}) => (
<TrainIcon height={30} width={30} color={color} />
),
}}
/>
</Tab.Navigator>