In my app, I have buttons navigate to other screens and I have a drawer have buttons as well,
I did the drawer and it works fine and also did stack navigation and also works fine, but in my app.js when I define one of them (drawer or stack) the other not working, I will provide my code, I think the problem is that I declared createAppContainer for both of them separately, How I do combine between them?
Here is my code:
Root.js:
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Main from "./Main.js";
import Signup from "./Signup.js";
import Home from "./Home.js";
import CardDetails from "./CardDetails";
import Profile from "./Profile";
const MainNavigator = createStackNavigator(
{
Main: { screen: Main },
Profile: { screen: Profile },
Signup: { screen: Signup },
Home: { screen: Home },
CardDetails: { screen: CardDetails },
},
{
initialRouteName: "Main",
navigationOptions: {
header: null
},
initialRouteParams: {
navigationMode: true
}
}
);
const Root = createAppContainer(MainNavigator);
export default Root;
DrawerNavigator.js:
import React from "react";
import { Platform, Dimensions } from "react-native";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";
import MyProduct from "../Containers/MyProduct";
import Home from "../Containers/Home";
import Profile from "../Containers/Profile";
import Main from "../Containers/Main";
import Signup from "../Containers/Signup.js";
import MenuDrawer from "../Components/MenuDrawer";
const { width, height } = Dimensions.get("window");
const DrawerConfig = {
drawerWidth: width * 0.83,
contentComponent: ({ navigation }) => {
return <MenuDrawer navigation={navigation} />;
}
};
export const DrawerNavigator = createDrawerNavigator(
{
MyProduct: {
screen: MyProduct
},
Profile: {
screen: Profile
},
Main: {
screen: Main
},
Home: {
screen: Home
},
},
{initialRouteName:'Main'},
DrawerConfig
);
export default createAppContainer(DrawerNavigator);
App.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React from "react";
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar
} from "react-native";
// import { Provider } from 'react-redux';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions
} from "react-native/Libraries/NewAppScreen";
import Main from './src/Containers/Main.js'
import Login from './src/Containers/Login.js'
import Signup from './src/Containers/Signup.js'
import Home from './src/Containers/Home.js'
import CardDetails from './src/Containers/CardDetails'
import AddMobile from './src/Containers/AddMobile'
import Profile from './src/Containers/Profile'
import MyProduct from './src/Containers/MyProduct'
import Root from './src/Containers/Root'
import DrawerNavigator from './src/Navigation/DrawerNavigator';
import Navigators from './src/Navigation/Navigators';
import MenuButton from "./src/Components/MenuButton.js";
const App: () => React$Node = () => {
return (
// <DrawerNavigator /> /// here the drawer works fine but stack navgation not working
<Root /> ////here stacknavigations work fine but I got an error when I press drawer icon. Error screenshot pasted in the end.
);
};
const styles = StyleSheet.create({
});
export default App;
You can try it in this way.
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'
})
);
Related
iam using createMaterialTopTabNavigator and i have function (aa()) in it there is a touchableOpacity btn , and when press it can't go to another page i dont know what's the problm , so anyone can help me ? , nd also i have Route file for the routes ,
Thanks
// this is the App.js :
const App=()=>{
return <AppContainer />;
}
export default App;
// AppContainer
import { createAppContainer } from "react-navigation";
import React from "react";
import {
View,
Text,
Image,
StyleSheet,
Alert,
TouchableOpacity,
} from "react-native";
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
import Header from "./Header";
import ListProch from "./ListProch";
import ListeEnCours from "./ListeEnCours";
import ListeTermines from "./ListeTermines";
function aa({ navigation }){
return(
<TouchableOpacity
onPressIn={()=>navigation.navigate("Buy")}
style={{width:200,height:200,backgroundColor:"red"}}>
</TouchableOpacity>
)
}
const TopBarMenu= createMaterialTopTabNavigator(
{
Prochaines: {
screen: aa
},
"En cours": {
screen: ListeEnCours
},
Terminés: {
screen: ListeTermines
},
},
{
tabBarComponent: Header,
tabBarOptions: {
activeTintColor: "#30A6CA",
inactiveTintColor: "#333333",
},
initialRouteName: "Prochaines"
}
);
const AppContainer = createAppContainer(TopBarMenu);
export default (AppContainer)
// Routes.js
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import Login from "../Components/Login";
import ForgetPassword from "../Components/ForgetPassword";
import Register from "../Components/Register";
import Terms from "../Components/Terms";
import Home from "../Components/Home";
import ListProch from "../Components/ListProch";
import TopBar from "../Components/TopBar";
import Encheres from "../Components/Encheres";
import Favoris from "../Components/Favoris";
import Profil from "../Components/Profil";
import UpdateInfo from "../Components/UpdateInfo";
import ChangePassword from "../Components/ChangePassword";
import InfoSecurity from "../Components/InfoSecurity";
import InfoLegales from "../Components/InfoLegales";
import Partenariat from "../Components/Partenariat";
import CommentMarche from "../Components/CommentMarche";
import Autres from "../Components/Autres";
import Notification from "../Components/Notification";
import Buy from "../Components/Buy";
import DetailsProduit from "../Components/DetailsProduit";
import EncheresEndirect from "../Components/EncheresEndirect";
import Header from "../Components/Header";
import AppContainer from "../Components/TopBarMenu";
import HomeScreen from "../Components/TopBarMenu";
import Tabs from "../Components/Tabs";
import Index from "../Components/Index";
import IndexAutres from "../Components/IndexAutres";
import IndexProch from "../Components/IndexProch";
const screens = {
AppContainer: {
screen: AppContainer,
navigationOptions: {
headerShown: null,
},
},
Header: {
screen: Header,
navigationOptions: {
headerShown: null,
},
},
Buy: {
screen: Buy,
navigationOptions: {
headerShown: null,
},
},
};
const RouteStack = createStackNavigator(screens);
const Routes = createAppContainer(RouteStack);
export default Routes;
You may also try in app.js
import { NavigationContainer } from '#react-navigation/native';
const App=()=>{
return(
<NavigationContainer independent={true} >
<AppContainer />
</NavigationContainer>
)
}
export default App;
import { useNavigation } from '#react-navigation/native'
function aa(){
const navigation = useNavigation();
return(
<TouchableOpacity
onPressIn={()=>navigation.navigate("Buy")}
style={{width:200,height:200,backgroundColor:"red"}}>
</TouchableOpacity>
)
}
I try to make a change of views, I'm relying on a video that I've seen on YouTube and when I implement it in my project for some reason it doesn't work. What I want to do is a change of sight, but trying gives me a strange error: "TypeError: Object(...) is not a function" and I don't know how to fix the problem
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppContainer from './routes'
const App = () => {
return (
<AppContainer/>
);
}
export default App;
routes.js
import { createAppContainer } from 'react-navigation'
import { createStackNavigation } from 'react-navigation-stack'
import LoginScreen from './components/LoginScreen'
import DashboardScreen from './components/dashboardScreen'
import AuthLoadingScreen from './components/authLoadingScreen'
const BeforeSignin = createStackNavigation({
Login: {
screen: LoginScreen
},
}, {
headerMode: "none",
initialRouteName: "Login"
})
const AfeterSignin = createStackNavigation({
Dashboard: {
screen: DashboardScreen
},
}, {
headerMode: "none",
initialRouteName: "Dashboard"
})
const AppNavigator = createStackNavigation({
Auth: BeforeSignin,
App: AfeterSignin,
AuthLoadingScreen: AuthLoadingScreen
}, {
eaderMode: "none",
initialRouteName: "Auth"
})
export default createAppContainer(AppNavigator);
error
I've tried to open the drawer by clicking the following button (screenshot) in a specific scene.
current status
and here goes my code.
// App.js
import React, { Component } from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createDrawerNavigator } from 'react-navigation-drawer'
import SplashScreen from 'react-native-splash-screen'
import RNBootSplash from "react-native-bootsplash"
import MainCategory from './src/Scenes/MainCategory'
import SubCategory from './src/Scenes/SubCategory'
import DetailScene from './src/Scenes/DetailScene'
import Questions from './src/Scenes/Questions'
import Ruleta from './src/Scenes/Ruleta'
import CustomDrawerComponent from './src/Components/CustomDrawerComponent'
export default class MainRouter extends Component {
componentDidMount() {
SplashScreen.hide()
RNBootSplash.hide({ duration: 250 })
}
render() {
const StackNavigator = createStackNavigator({
MainCategory: {screen: MainCategory},
SubCategory: {screen: SubCategory},
DetailScene: {screen: DetailScene},
Questions: {screen: Questions},
Ruleta: {screen: Ruleta},
}, {
initialRouteName: "MainCategory",
headerMode: "none"
})
const DrawerNavigator = createDrawerNavigator({
MainCategory: {screen: MainCategory},
}, {
drawerPosition: 'right',
contentComponent: CustomDrawerComponent
})
const MainNavigator = createSwitchNavigator({
Stack: StackNavigator,
Drawer: DrawerNavigator,
}, {
initialRouteName: 'Stack',
contentComponent: CustomDrawerComponent
})
const AppContainer = createAppContainer(MainNavigator)
return(
<AppContainer />
)
}
}
// Specific scene
import React, { Component } from 'react'
import { ScrollView, StatusBar, View, TouchableOpacity, Text, Image, Modal } from 'react-native'
import HeaderBar from '../Components/HeaderBar'
export default class Questions extends Component {
constructor(props) {
super(props)
this.state = {
headerTitle: props.navigation.getParam('headerTitle'),
catId: props.navigation.getParam('catId'),
}
}
openSideMenu = () => {
this.props.navigation.toggleDrawer
this.props.navigation.openDrawer()
}
render() {
return (
<View style={rootStyle}>
<View>
<StatusBar hidden={false} translucent backgroundColor="transparent" barStyle="light-content" />
<HeaderBar title={headerTitle} onPressLeft={() => this.props.navigation.goBack()} leftShow={true} onPressRight={this.openSideMenu} rightShow={true} />
</View>
<ScrollView>
<QuestionList todoQues={todoQues} favQues={favQues} action={this.action.bind(this)} />
</ScrollView>
</View>
)
}
}
But it's not working.
I expect the result like the following screenshot.
expected result
Please let me know what I should do more and how to use the drawer navigator in a specific scene.
Thanks for your time!
First of all instead of calling the method this.props.navigation.toggleDrawer(), call the method this.props.navigation.dispatch(DrawerActions.openDrawer()).
You also need to import DrawerActions for this to work. And remove the first function that you called in your openSideMenu function because you don't need the this.props.navigation.openDrawer()
I have this in my react-native code:
const MainNavigator = createBottomTabNavigator({
Home: Home,
"Exercise List": ExerciseList,
Exercise: Exercise,
"Current Workout": CurrentWorkout,
})
but I only want to navigate to the Exercise tab when I click to it via the exerciseList page like so:
onPress={() => navigate("Exercise", { name: item.name })}
and I don't want it to appear in the navigation bar at the bottom. But if I remove it from MainNavigator above then it doesn't work when I click the onPress above. Is there a way to Navigate to the component without it being in the tab nav?
You need to make some change in app.js. add createBottomTabNavigator inside createStackNavigator. Add those component into stacknavigator in which you do not want to add into bottom tab navigator. In createBottomTabNavigator add those component which you want to show in tab bar
Please check following code
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
SafeAreaView,
ScrollView,
Dimensions
} from "react-native";
import { createStackNavigator, createBottomTabNavigator } from "react-navigation";
import LoginScreen from "./Screens/LoginScreen";
export default class App extends Component {
render() {
return <StackNav />;
}
}
const StackNav = createStackNavigator(
{
TabNavigator: {
screen: AppTabNavigator,
navigationOptions: {
headerMode: "none",
header: null
}
},
First: {
screen: First,
navigationOptions: {
headerMode: "none",
header: null
}
},
Second: {
screen: Second,
navigationOptions: {
headerMode: "none",
header: null
}
}
},
{
initialRouteName: "TabNavigator"
}
);
const AppTabNavigator = createBottomTabNavigator({
Login: {
screen: LoginScreen
}
});
Add it with createSwitchNavigator. A working example is given below
const Navigation = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
Qr: QrPage,
},
{
initialRouteName: 'AuthLoading',
}
Here I can access to my Qr page from any where.
here is two method of of call other components which doesn't contains in tabNavigator:
const otherAppNavigator = createStackNavigator({//all of this are not in TabNavigator
dashboard: {
screen: Dashboard,
},
userProfile: {
screen: UserProfile
},
onGoingPickup: {
screen: OnGoingPickup
},
});
const TabNavigator = createBottomTabNavigator({
home: otherAppNavigator,//<<<<<<<<<<
about:foo,
}
)
const MainNavigator = createSwitchNavigator({
firstPage: {//it's not in TabNavigator<<<<<<<<<<<<<<<<<<<<<<<<<<
screen: Login,
},
verification: {//its not in TabNavigator<<<<<<<<<<<<<<<<<<<<<<<<
screen: verification
},
dashboard: {
screen: TabNavigator
}
})
export default createAppContainer(MainNavigator); //the main navigator is which you bind in here
pay attention to the last line ....!!!!
hope to be helpful.
I am working with an Expo app which comes bundles with the react-native-navigation.
It works great and I have setup several Stacked Navigations but I cannot seem to get my modals to display without the bottom Tab Navigator.
Below is the navigation folder structure:
Here are the files:
AppNavigator.js
import { createSwitchNavigator } from 'react-navigation'
import MainTabNavigator from './MainTabNavigator'
export default createSwitchNavigator({
Main: MainTabNavigator
})
MainTabNavigator.js
import React from 'react'
import { Platform } from 'react-native'
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
// Import Stacks
import SettingsStack from './stacks/SettingsStack.js'
// Import Components
import TabBarIcon from '../components/TabBarIcon'
// Import Screens
import HomeScreen from '../screens/HomeScreen'
import ExercisesScreen from '../screens/ExercisesScreen'
import ExerciseDetailScreen from '../screens/ExerciseDetailScreen'
import VideoScreen from '../screens/VideoScreen'
import ExerciseStartScreen from '../screens/ExerciseStartScreen'
const HomeStack = createStackNavigator({
Home: HomeScreen,
ExerciseDetails: ExerciseDetailScreen
})
const StartWorkOut = createStackNavigator({
Home: HomeScreen,
ExerciseStart: ExerciseStartScreen
})
StartWorkOut.navigationOptions = {
tabBarVisible: false
}
const RootStack = createStackNavigator({
Main: HomeStack,
ExerciseStart: ExerciseStartScreen,
VideoScreen: {
screen: VideoScreen
}
},
{
mode: 'modal',
headerMode: 'none',
tabBarVisible: false
})
const ExercisesStack = createStackNavigator({
Exercises: ExercisesScreen,
ExerciseDetails: ExerciseDetailScreen
})
const ExerciseRootStack = createStackNavigator({
Main: ExercisesStack,
VideoScreen: {
screen: VideoScreen
}
},
{
mode: 'modal',
headerMode: 'none',
tabBarVisible: false
})
RootStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
/>
)
}
ExerciseRootStack.navigationOptions = {
tabBarLabel: 'Exercises',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
/>
)
}
export default createBottomTabNavigator({
RootStack,
ExerciseRootStack,
SettingsStack
})
The settings Stack file is not important and I have tried adding the following into screens, without any luck:
static navigationOptions = {
tabBarVisible: false
}
Thanks!
I managed to figure it out in the end.
I had to refactor the code and remove the modals from the tab navigator and add it directly to the AppNAvigator.js as below:
import { createStackNavigator } from 'react-navigation'
import MainTabNavigator from './MainTabNavigator'
// Import Screens
import HomeScreen from '../screens/HomeScreen.js'
import ExerciseStartScreen from '../screens/ExerciseStartScreen.js'
import VideoScreen from '../screens/VideoScreen.js'
export default createStackNavigator({
Main: MainTabNavigator,
ExerciseStart: ExerciseStartScreen,
VideoScreen: VideoScreen
},
{
mode: 'modal',
headerMode: 'none',
navigationOptions: {
header: null
}
})