When I try to swipe it open, it swings right back.
I'm using stack with drawer together maybe this might be a problem, but so far
I've tried everything, reviewed all the similar questions to this but nothing worked
my code:
const Drawer = createDrawerNavigator();
function DrawerNav({ navigation }) {
// toggleDrawer = () => {
// this.props.navigation.dispatch(DrawerActions.toggleDrawer())
// }
return (
<Drawer.Navigator initialRouteName="Home"
screenOptions={{
headerShown: true,
headerStyle: {
backgroundColor: brand,
},
headerTintColor: primary,
headerTransparent: false,
headerTitle: '',
headerLeftContainerStyle: {
paddingLeft: 20,
},
}}>
<Drawer.Screen name="Home" component={HomeScreen} options={horizontalAnimation}/>
</Drawer.Navigator>
);
}
const Stack = createStackNavigator();
const RootStack = () => {
return (
<CredentialsContext.Consumer>
{({ storedCredentials }) => (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: brand,
},
headerTintColor: primary,
headerTransparent: true,
headerTitle: '',
headerLeftContainerStyle: {
paddingLeft: 20,
},
}}
>
{storedCredentials ? (
<Stack.Screen name="Home" component={DrawerNav} options={horizontalAnimation}/>
) : (
<>
<Stack.Screen name="Login" component={Login} options={horizontalAnimation}/>
<Stack.Screen name="Signup" component={Signup} options={horizontalAnimation}/>
</>
)}
</Stack.Navigator>
</NavigationContainer>
)}
</CredentialsContext.Consumer>
);
};
Any help will be greatly appreciated, thanks in advance.
I had the same issue. I found out that some of my react-navigation libs where not on the same major release (in the package.json). So I changed them all to be on the same major version number, 6.X in my case, re-installed the packages and my code started working.
- "#react-navigation/bottom-tabs": "^6.0.1",
- "#react-navigation/native": "^5.9.4",
- "#react-navigation/stack": "^5.14.5",
+ "#react-navigation/drawer": "^6.1.4",
+ "#react-navigation/native": "^6.0.4",
+ "#react-navigation/stack": "^6.0.9",
Just change version of react-navigation/drawer if you have version 5
Related
I am coding an app with a bottom Tab Navigator nested within a Stack Navigator, I am trying to target the content styling for all the screen within this Tab.Navigator but the commands I am using are not working
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
function TabNavigator(){
return (
<Tab.Navigator
// tabBarOptions={{
// style: {backgroundColor: "#511cff"} // deprecated metro says to place it into screenOptions under tabBarStyle
// }}
screenOptions={{
// headerStyle: { backgroundColor: "#2f28fc" },
tabBarActiveTintColor: "#F8F2DA",
tabBarOptions:{
contentStyle: {backgroundColor:"#511cff"},
sceneContainerStyle: {backgroundColor:"#511cff"},
},
tabBarStyle: {
backgroundColor: "#2f28fc",
contentStyle: {backgroundColor:"#511cff"},
sceneContainerStyle: {backgroundColor:"#511cff"},
},
contentStyle: {backgroundColor:"#511cff"},
sceneContainerStyle: {backgroundColor:"#511cff"},
headerShown: false,
}}
>
</Tab.Navigator>
)
}
export default function App() {
return (
<>
<StatusBar style="light" />
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: "#2f28fc" },
headerTintColor: "#F8F2DA",
sceneContainerStyle: { backgroundColor: "#511cff" }
}}
>
<Stack.Screen
name='ExpensesView'
component={TabNavigator}
screenOptions={{
sceneContainerStyle:{ backgroundColor: "#511cff" },
contentStyle: {backgroundColor:"#511cff"}
}}
/>
</Stack.Navigator>
</NavigationContainer>
</>
);
}
From looking through here: https://github.com/react-navigation/react-navigation/issues/8076
I think the solution would be to use the sceneContainerStyle property within Navigator like so:
<Tab.Navigator
sceneContainerStyle= {{
backgroundColor: "#511cff"
}}
I was able to solve this by using sceneContainerStyle property outside of the screenOptions property. Why they have moved it out of the screenOptions for just TabNavigator is a mystery, but it works.
CODE:
<Tab.Navigator
tabBar={props => <CustomTabBar {...props} />}
screenOptions={({ route }) => ({
headerShown: false,
})}
sceneContainerStyle={styles.sceneStyle}>
I read the documentation for you and found that you syntax is not valid.
Their is nothing like tabBarOptions in it.
here's the link of how we can use the options in tab Bar
https://reactnavigation.org/docs/screen-options
Hope this will help u.
I am using stack navigation for the login module, When login is successful after that I navigate to the tab navigation (Home screen). When the user goes to log out from the profile screen after that I am not able to navigate on stack navigation (login screen).
I am searching on google but still have not found any related answer
this is the navigation screen code:-
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
function Navigation() {
const [token, setToken] = useState('');
const [sessionHandle, setSessionHandle] = useState(false);
AsyncStorage.getItem('token', (err, result) => {
setToken(result);
if (!token) {
setSessionHandle(false);
} else {
setSessionHandle(true);
}
});
const {width, height} = Dimensions.get('window');
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="HomeTab"
screenOptions={{
headerShown: false,
tabBarActiveTintColor: Colors.black,
tabBarInactiveTintColor: Colors.gray,
tabBarStyle: {height: width * 0.18, borderRadius: 40},
}}>
<Tab.Screen
name="HomeTab"
component={ProductFlowNavigation}
options={{
tabBarLabel: 'Home',
tabBarLabelStyle: {
fontSize: 12,
fontFamily: 'Poppins-Regular',
marginBottom: 10,
},
tabBarIcon: ({focused}) => {
const set_color = focused ? Colors.bright_sky_blue : Colors.gray;
return <Ionicons name="ios-home" color={set_color} size={25} />;
},
}}
/>
<Tab.Screen
name="OrderHistory"
component={OrderHistory}
options={{
tabBarLabel: 'History',
tabBarLabelStyle: {
fontSize: 12,
fontFamily: 'Poppins-Regular',
marginBottom: 10,
},
tabBarIcon: ({focused}) => {
const set_color = focused ? Colors.bright_sky_blue : Colors.gray;
return <Ionicons name="timer" color={set_color} size={25} />;
},
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{
tabBarLabel: 'Profile',
tabBarLabelStyle: {
fontSize: 12,
fontFamily: 'Poppins-Regular',
marginBottom: 10,
},
tabBarIcon: ({focused}) => {
const set_color = focused ? Colors.bright_sky_blue : Colors.gray;
return <Ionicons name="person" color={set_color} size={25} />;
},
}}
/>
</Tab.Navigator>
);
}
function MyLoginSignupNavigation() {
return (
<Stack.Navigator initialRouteName="Login">
<Stack.Screen
name="Signup"
component={SignUp}
options={{headerShown: false}}
/>
<Stack.Screen
name="Login"
component={Login}
options={{headerShown: false}}
/>
<Stack.Screen
name="Home"
component={MyTabs}
options={{headerShown: false}}
/>
</Stack.Navigator>
);
}
return (
<NavigationContainer>
{sessionHandle ? <MyTabs /> : <MyLoginSignupNavigation />}
</NavigationContainer>
);
}
export default Navigation;
#mahesh you are switching between tab and stack navigation based on "sessionHandle", so i suggest you if you want to logout just set the value of "sessionHandle" to false, it will direct you to stack navigation first screen
{sessionHandle ? <MyTabs /> : <MyLoginSignupNavigation />}
you navigation depends on sessionHandle
Hopefully it will help you
I create Drawer Navigation and inside it there is stack navigation all I need when back from stack need the drawer to be opened
my code is like this and All I need is to keep the drawer opened after back from any stack screen
const Drawer = createDrawerNavigator();
function DrawerNav({ navigation }) {
// toggleDrawer = () => {
// this.props.navigation.dispatch(DrawerActions.toggleDrawer())
// }
return (
<Drawer.Navigator initialRouteName="Home"
screenOptions={{
headerShown: true,
headerStyle: {
backgroundColor: brand,
},
headerTintColor: primary,
headerTransparent: false,
headerTitle: '',
headerLeftContainerStyle: {
paddingLeft: 20,
},
}}>
<Drawer.Screen name="Home" component={HomeScreen} options={horizontalAnimation}/>
<Drawer.Screen name="RootStack" component={RootStack} />
</Drawer.Navigator>
);
}
const Stack = createStackNavigator();
const RootStack = () => {
return (
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: brand,
},
headerTintColor: primary,
headerTransparent: true,
headerTitle: '',
headerLeftContainerStyle: {
paddingLeft: 20,
},
}}
>
{storedCredentials ? (
<Stack.Screen name="Home" component={DrawerNav} options={horizontalAnimation}/>
) : (
<>
<Stack.Screen name="Login" component={Login} options={horizontalAnimation}/>
<Stack.Screen name="Signup" component={Signup} options={horizontalAnimation}/>
</>
)}
</Stack.Navigator>
</NavigationContainer>
);
};
these is the installed package
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
Use this way...
function MyDrawer() {
const dimensions = useWindowDimensions();
return (
<Drawer.Navigator
screenOptions={{
drawerType: 'permanent',
}}
>
{/* Screens */}
</Drawer.Navigator>
);
}
Refer this
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen
name="RootStack"
component={RootStack}
/>
</Drawer.Navigator>
customDrawerContent : component that contains items to be listed on the side bar: check this link for that part https://stackoverflow.com/a/64173773/7689878.
To achieve the drawer remaining after navigating back keep only the RootStack(should contain all stack screens) in the Drawer Navigator.
I am new in react native technology. I have used following hierarchy in my react native app.
I have used Stack.Navigator in which I am using various screen, I. Login, II. Sign-Up, III. TabBar Screen.
In TabBar screen I have used various individual Stack.Navigator because I have to show tab bar on every child screen.
Now problem is that I have to update some value on tab screen when user click on that particular screen. It is calling once at first time, not working second time.
I have used following code for execute 'focus' listener on tab screen :-
onScreenFocus = () => {
this.reloadFavrouite()
alert("again calling")
}
componentDidMount() {
this.props.navigation.addListener('focus', () => this.onScreenFocus())
this.reloadFavrouite()
}
'focus' listener work well If I am not use individual Stack.Navigator at every tab screen, but it is creating another issue is that tab bar not showing in child screen.
I have used this tab navigator code:- Please check
export default class TabNavigator extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Tab.Navigator initialRouteName='Home' lazy={true} tabBarOptions={
{
style: {
backgroundColor: '#FFFFFF',
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
overflow: 'hidden',
borderColor: 'transparent',
}
}
}>
<Tab.Screen name="HomeNavigator" component={HomeNavigator}
options={{
tabBarLabel: ({ focused }) => {
const tintColortab = focused ? "#006C35"
: "#000000"
return (
<Text style={{ color: tintColortab, fontSize: 8, fontFamily: "Roboto-Bold", marginBottom: 6 }}>{StringsOfLanguages.Home}</Text>
)
},
tabBarIcon: ({ focused }) => {
const tintColortab = focused ? "#006C35"
: "#000000"
return (
<Image source={require('../../../assets/images/TabBarIcons/ic_home_selected/ic_home_selected.png')}
style={{ marginTop: 10, tintColor: tintColortab }}>
</Image>
)
}
}}>
</Tab.Screen>
<Tab.Screen name="FavouriteNavigator" component={FavouriteNavigator}
options={{
tabBarLabel: ({ focused }) => {
const tintColortab = focused ? "#006C35"
: "#000000"
return (
<Text style={{ color: tintColortab, fontSize: 8, fontFamily: "Roboto-Bold", marginBottom: 6 }}>{StringsOfLanguages.Favorite}</Text>
)
},
tabBarIcon: ({ focused }) => {
const tintColortab = focused ? "#006C35"
: "#000000"
return (
<Image source={require('../../../assets/images/TabBarIcons/ic_favorits_unselected/ic_favorite_unselected.png')}
style={{ marginTop: 10, tintColor: tintColortab }}>
</Image>
)
}
}}
>
</Tab.Screen>
</Tab.Navigator>
);
}
And individual navigation is like :-
class HomeNavigator extends React.Component {
render() {
return (
<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
<Stack.Screen name="AllRestuarent" component={AllRestuarent} options={{ headerShown: false }} />
<Stack.Screen name="AllLaundry" component={AllLaundry} options={{ headerShown: false }} />
<Stack.Screen name="AllEntertainment" component={AllEntertainment} options={{ headerShown: false }} />
<Stack.Screen name="Offer" component={Offer} options={{ headerShown: false }} />
<Stack.Screen name="ComponyMap" component={ComponyMap} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
class FavouriteNavigator extends React.Component {
render() {
return (
<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen name="Favorites" component={Favorites} options={{ headerShown: false }} />
<Stack.Screen name="Offer" component={Offer} options={{ headerShown: false }} />
<Stack.Screen name="ComponyMap" component={ComponyMap} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
You are not using focus listener in the right way according to your current version, You are using react-navigation v5 and you are adding a listener the way it is used in react-navigation v4, Here is a solution to your problem.
class YourClassComopnent extends React.Component {
componentDidMount() {
/*
Now you can access to isFocused prop and
this prop will be true whenever your screen is
in the focus.
*/
if(this.props.isFocused) this.onScreenFocus()
this.reloadFavrouite()
}
render() {
// Get it from props
const { isFocused } = this.props;
}
}
// Wrap and export
export default function(props) {
const isFocused = useIsFocused();
// pass your class here
return <YourClassComopnent {...props} isFocused={isFocused} />;
}
Link to docs, how you can use isFocused in react-navigation v5
I am building an app with the following dependencies:
"dependencies": {
"#react-navigation/bottom-tabs": "^5.8.0",
"#react-navigation/compat": "^5.2.5",
"#react-navigation/material-bottom-tabs": "^5.2.16",
"#react-navigation/material-top-tabs": "^5.2.16",
"#react-navigation/native": "^5.7.3",
"#react-navigation/stack": "^5.9.0",
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-elements": "^2.0.4",
"react-native-gesture-handler": "^1.7.0",
"react-native-modals": "^0.19.9",
"react-native-reanimated": "^1.10.2",
"react-native-screens": "^1.0.0-alpha.23",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2",
"react-navigation-tabs": "^2.9.0"
},
Let say I have a Stack navigator and a Bottom Tab Navigator. How can I easily navigate from a screen of the bottom tab to a screen of the Stack Navigator?
I found a "solution" which is to add App in my Bottom Tab Navigator, but the problem is it's appearing in the bottom screens, while I dont want that.
Whats the best way to do this?
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer independent={true}>
<Stack.Navigator initialRouteName="Index">
<Stack.Screen name="MyNotes" component={MyNotes} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Signup" component={Signup} />
<Stack.Screen name="Index" component={Index} />
<Stack.Screen name="PasswordForgot" component={PasswordForgot} />
<Stack.Screen name="BottomNavigation" component={BottomNavigation} />
<Stack.Screen name="ProfileParameters" component={ProfileParameters} />
<Stack.Screen name="MyProfile" component={MyProfile} />
</Stack.Navigator>
</NavigationContainer>
);
}
And a Bottom Tab Navigator:
const Tab = createBottomTabNavigator();
const tabActiveColor = "#EF2D56";
const tabInActiveColor = "#898A8D";
const BottomTabNavigator = () => {
return (
<Tab.Navigator
initialRouteName="MyNotes"
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let tabIcon = "../assets/notes.png";
if (route.name === "MyNotes") {
tabIcon = require("../assets/notes.png");
} else if (route.name === "Feed") {
tabIcon = require("../assets/feed.png");
} else if (route.name === "Discover") {
tabIcon = require("../assets/decouvrir.png");
} else if (route.name === "MyProfile") {
tabIcon = require("../assets/myprofile.png");
}
return (
<Image
source={tabIcon}
resizeMode="contain"
style={{
height: 26.4,
width: 22,
tintColor: focused ? tabActiveColor : tabInActiveColor,
}}
/>
);
},
})}
tabBarOptions={{
style: { zIndex: 110 },
safeAreaInset: { bottom: "never" },
activeTintColor: "#000000",
}}
>
<Tab.Screen
name="MyNotes"
component={MyNotes}
options={{
tabBarLabel: "Notes",
}}
/>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: "Feed",
}}
/>
<Tab.Screen
name="Discover"
component={Discover}
options={{
tabBarLabel: "Découvrir",
}}
/>
<Tab.Screen
name="MyProfile"
component={MyProfile}
options={{
tabBarLabel: "Profil",
}}
/>
<Tab.Screen name="App" component={App} />
</Tab.Navigator>
);
};
export default BottomTabNavigator;
const Stack = createStackNavigator();
export default function BottomNavigation() {
return (
<NavigationContainer independent={true}>
<BottomTabNavigator />
</NavigationContainer>
);
}
Example of Navigation I want to do: Navigate from the MyProfile screen of the Bottom Tab, to the ProfileParameter screen in the stack navigator.
here is a demo: https://snack.expo.io/#nomi9995/1826cf
use only one NavigationContainer and make bottom tabs part of stack navigator then you can easily move from bottom tabs to stack screens
like this
import * as React from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
function TestScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Test!</Text>
</View>
);
}
function HomeScreen(props) {
const gotoTestStackScreen = () => {
props.navigation.navigate('Test');
};
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
<Button title="Go to test stack screen" onPress={gotoTestStackScreen} />
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Tabs">
<Stack.Screen name="Test" component={TestScreen} />
<Stack.Screen name="Tabs" component={MyTabs} />
</Stack.Navigator>
</NavigationContainer>
);
}