Currently i do have this config in react-navigation:
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
<Stack.Group
screenOptions={{
contentStyle: { marginTop: 120 },
gestureEnabled: true,
// presentation: 'modal',
gestureDirection: 'horizontal',
}}
>
<Stack.Screen component={CollectiblesInfoScreen} name={Routes.COLLECTIBLE_INFO_SCREEN} />
</Stack.Group>
</Stack.Navigator>
but for some reason when i try to swipe down nothing happens, modals do not close. Currently this is how it looks like the component CollectiblesInfoScreen
import { Box, Text } from 'native-base';
export const CollectiblesInfoScreen = () => {
return (
<Box>
<Text>Test</Text>
</Box>
);
};
Any ideas about what might be the issue?
Related
App.js
const App = () => {
return (
<NavigationContainer>
<Tabs />
</NavigationContainer>
);
};
Tabs.js
const Tabs = () => {
return (
<Tab.Navigator initialRouteName='Team' screenOptions={{tabBarShowLabel: false, headerShown: false}} >
<Tab.Screen
name="Home" component={Main}
options={{
tabBarButton: props => (<TouchableOpacity {...props} onPress={() => navigation.navigate('Main')} />),
// tabBarIcon
}}
/>
<Tab.Screen
name="Team" component={Team}
options={{
tabBarButton: props => (<TouchableOpacity {...props} onPress={() => navigation.navigate('Team')} />),
}}
/>
</Tab.Navigator>
);
}
Home.js
const Home = ({navigation}) => {
return (
<Stack.Navigator initialRouteName="Schedule">
<Stack.Screen name="Main" component={Main}
options={{
title: 'Main',
headerShown: false
}}
/>
<Stack.Screen name="Team" component={Team}
options={{
title: 'Team',
headerShown: false
}}
/>
</Stack.Navigator>
);
};
This is what I did. The screens with Main and Team.
I'm unable to navigate through these screens.
What is the issue with this implementation? And please help me to navigate through screens.!
Your first tabBarButton tries to navigate to Main but the name you're using for the tab route is Home.
I'm assuming you intended to use the Home component in the first tab instead of the Main component.
I tried to create this snack with a working example: https://snack.expo.dev/9a0DOgzoB
Please do not use the same route name for multiple routes. You're using Team multiple times.
i've been trying to hide tabBar in specific screens, tried out some solutions found but none worked for me(Using Native-Base) for UI.
I have a TabNavigator in which i pass a Stack with screens.
So what i'm trying to do is to hide the TabBar in one of those screens.
See my code below 👇.
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {createStackNavigator} from '#react-navigation/stack';
import { NativeBaseProvider } from 'native-base';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
//Stack of Screens linked with the search Menu.
function Recherche() {
return (
<Stack.Navigator initialRouteName="Recherche">
<Stack.Screen
name="Recherche"
component={Search}
options={{title: 'Recherche', headerShown: false}}
/>
<Stack.Screen
name="ViewCarte"
component={ViewCarte}
options={{title: 'ViewCarte', headerShown: false}}
/>
</Stack.Navigator>
);
}
//Stack of Screens linked with the Mon Espace Menu.
function MonEspace() {
return (
<Stack.Navigator initialRouteName="Espace">
<Stack.Screen
name="Espace"
component={Espace}
options={{title: 'Espace', headerShown: false}}
/>
<Stack.Screen
name="Compte"
component={Compte}
options={{title: 'Compte', headerShown: false}}
/>
</Stack.Navigator>
);
}
//Function constructing the TabBar
function ViewLoc({navigation}) {
return (
<NativeBaseProvider>
<Tab.Navigator
initialRouteName="Recherche"
tabBarOptions={{
activeTintColor: '#0B3D91',
style: {
padding: 5,
height: 60,
},
tabStyle: {
paddingTop: 8,
paddingBottom: 8,
},
}}>
<Tab.Screen
name="Recherche"
component={Recherche}
options={{
tabBarIcon: ({color, size}) => (
<SearchIcon color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Mon espace"
component={MonEspace}
options={{
tabBarIcon: ({color, size}) => <ProfileIcon color={color} />,
tabBarVisible: true,
}}
/>
</Tab.Navigator>
</NativeBaseProvider>
);
}
Trying to hide tabBar in screen "ViewCarte" and screen "Compte".
you can change navigation structure, your structure should be like this
const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();
function TabsNavigatorComponent() {
return (
<Tab.Navigator>
//any screen or stack here will show with tabs.
</Tab.Navigator>
)
}
<NavigationContainer>
//the main Navigator shoud be Stack
<RootStack.Navigator>
//outside any screen to here, to show it without tabs.
<RootStack.Screen name="screenWithoutTabs" component={ScreenWithoutTabs}/>
<RootStack.Screen name="bottomTabs" component={TabsNavigatorComponent}/>
</RootStack.Navigator>
</NavigationContainer>
Recently, I am designing an app. And here's the problem when I combine two navigations into one.
How can I open the drawer when the screen is inside tab navigation. Android OS doesn't support a swipe left gesture. Therefore I have to add a menu button for Android users.
Is there any method to call out the drawer?
function DrawerNav() {
return (
<Drawer.Navigator
drawerContent={(props) => <DrawerContent {...props} />}
initialRouteName="Home"
>
<Drawer.Screen name="Home" component={TabNav} />
</Drawer.Navigator>
);
}
function TabNav() {
return (
<Tab.Navigator
tabBarOptions={{
showLabel: false,
style: {
flex: 1,
position: "absolute",
bottom: "5%",
left: "5%",
right: "5%",
height: win.height * 0.08,
elevation: 0,
backgroundColor: "#f7f7f7",
borderRadius: 15,
...styles.shadow,
paddingVertical: "5%",
paddingHorizontal: "5%",
},
}}
>//Some screen here
),
}}
/>
</Tab.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<DrawerNav />
</NavigationContainer>
);
}
function Feed({ navigation }) {
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity
onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
>
<Image
source={require("./app/assets/menu.png")}
style={{ position: "absolute", top: 10, width: 40, height: 40 }}
/>
</TouchableOpacity>
</SafeAreaView>
);
}
function App() {
return (
<NavigationContainer>
<DrawerNav />
</NavigationContainer>
);
}
You can use like that you need to put your tab navigation into the drawer navigation it will be available in your all tabs screens. i am using stack navigation but its same for tab navigation
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import Home from "./screen/Home"
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
import Search from "./screen/Search"
import Login from "./screen/Login"
import SuperRegister from "./screen/SuperRegister"
import CustomDrawer from "./Components/CustomDrawer"
import { createDrawerNavigator } from '#react-navigation/drawer';
import {MyContextprovider} from"./Context";
const Stack = createStackNavigator();
function MyStack(){
return (
<Stack.Navigator
headerMode={false}
initialRouteName="Login"
>
<Stack.Screen name="SuperRegister" component={SuperRegister} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Search" component={Search} />
</Stack.Navigator>
);
}
const Drawer = createDrawerNavigator();
App = () => {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContent={(props)=><CustomDrawer {...props} />}
>
<Drawer.Screen name="Home" component={MyStack} />
</Drawer.Navigator>
</NavigationContainer>
);
}
export default () => {
return (
<MyContextprovider>
<App />
</MyContextprovider>
)
}
for open or close drawer you can use
navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());
for refrains ..drawer ref..
I am trying to build an demo app same like diagram below :
When, i am trying to navigate from Child screen to another screen , then drawer opens automatically :
Code: :
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator, HeaderTitle } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createDrawerNavigator } from '#react-navigation/drawer'
import FoodListScreen from '../screens/FoodListScreen';
import FoodDetailsScreen from '../screens/FoodDetailsScreen';
import FavouriteScreen from '../screens/FavouritesScreen';
import HomeScreen from '../screens/HomeScreen';
import AboutScreen from '../screens/AboutScreen';
import { Button, Text, View } from 'react-native';
const Stack = createStackNavigator();
const FavouriteStack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
//// ********** HOME TAB STACK View ************
function HomeStackScreens() {
return (
<Stack.Navigator initialRouteName="HomeScreen" screenOptions = {({route, navigation}) => (
{
title: 'My home',
mode:'card',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
headerRight: () => (
<HeaderTitle>
<Button
onPress={() => {
navigation.navigate('FoodDetailsScreen')
console.log('This is a Right !!')
}
}
title="Info!"
/>
<Button
onPress={() => console.log('This is a Right most button!')}
title="Edit"
/>
<Button
onPress={() => console.log('This is a Right most button!')}
title="Delete"
/>
</HeaderTitle>
),
})}>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="FoodListScreen" component={FoodListScreen} />
<Stack.Screen name="FoodDetailsScreen" component={FoodDetailsScreen} options = {{
title: 'Food Details Title',
headerStyle: {
backgroundColor: '#000',
},
headerTintColor: '#fff',
}}/>
<Stack.Screen name="FavouriteList" component={FavouriteScreen} />
</Stack.Navigator>
);
}
//// ********** Favourite TAB STACK View ************
function FavouriteStackScreens() {
return (
<FavouriteStack.Navigator>
<FavouriteStack.Screen name="FavouriteScreen" component={FavouriteScreen} />
<FavouriteStack.Screen name="FoodDetailsScreen" component={FoodDetailsScreen} />
</FavouriteStack.Navigator>
);
}
/// **** TAB View Of HOME Item of Drawer ********
function HomePageTabScreen() {
return (
<Tab.Navigator>
<Tab.Screen name="FoodTab" component={HomeStackScreens} />
<Tab.Screen name="FavouriteTab" component={FavouriteStackScreens} />
</Tab.Navigator>
)
}
///// The Main Drawer
const AppNavigator = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="NavHome"
drawerType= 'back'
overlayColor="transparent"
gestureHandlerProps
drawerStyle={{
backgroundColor: '#c6cbef',
width: 240,
}}
>
<Drawer.Screen name="NavHome" component={HomePageTabScreen} />
<Drawer.Screen name="About Us" component={AboutScreen} />
</Drawer.Navigator>
</NavigationContainer>
)
}
export default AppNavigator;
Issue screen recording : video link
I'm experiencing a performance issue with DrawerNavigator with the following code.
class App extends Component {
componentDidMount(){
var salt = bcrypt.genSaltSync(10);
var hash = bcrypt.hashSync("StrToHash", salt);
}
render() {
console.log("rendering");
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Button
onPress={ () => {} }
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
}
}
Home.navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<MaterialIcons
name="move-to-inbox"
size={24}
style={{ color: tintColor }}
/>
),
};
App.navigationOptions = {
drawerLabel: 'App',
drawerIcon: ({ tintColor }) => (
<MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
),
};
export default DrawerExample = DrawerNavigator(
{
Home: {
path: '/',
screen: Home,
},
App: {
path: '/sent',
screen: App,
},
},
{
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
initialRouteName: 'Home',
contentOptions: {
activeTintColor: '#e91e63',
},
}
);
I don't understand why, each time I put some logic in componentDidMount() DrawerNavigator start to be laggy and does not work properly on Android. I think I'm missing something but I don't know what. If I have to put some logic in a component, where should I put the logic code ? If someone would like to enlighten me:)
use prop detachInactiveScreens={false} in <Drawer.Navigator>
but you also need to
import { enableScreens } from 'react-native-screens'
it solved my lagging issue of drawer.