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
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>
)
}
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from "./src/screens/HomeScreen";
import ComponentsScreen "./src/screens/ComponentsScreen";
const navigator = createStackNavigator(
{
Home: HomeScreen,
Components: ComponentsScreen,
},
{
initialRouteName: 'Components',
defaultNavigationOptions: {
title: 'App'
}
}
);
export default createAppContainer(Navigator);
Got this error when i try to run the code in mobile using expo
got this error in app.js file when running in mobile help me
You're missing the from on the fourth line.
Change:
import ComponentsScreen "./src/screens/ComponentsScreen";
To:
import ComponentsScreen from "./src/screens/ComponentsScreen";
I am new to React Native and I don't understand how to solve this problem. I already installed react-native-gesture-handler.
I am getting this error in the command:
Accessing view manager configs directly off UIManager via UIManager['getConstants'] is no longer supported. Use UIManager.getViewManagerConfig('getConstants') instead.
This is a part of the code:
import { createAppContainer, DrawerNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from "./src/screens/Home.js";
import first from "./src/screens/first.js";
import React from 'react';
class App extends React.Component{
render(){
return(
<RootStack/>
)
}
}
const RootStack = createStackNavigator ({
Home:{screen:Home,
navigationOptions: {
header: null
}},
first:{screen:first,
navigationOptions: {
header: null
}}
});
//const App = createAppContainer(RootStack);
export default App;
I think this way is better:
const AppNavigator = createSwitchNavigator({
Auth: {
screen: Auth
},
Root: {
screen: BottomTabNavigator
}
})
const AppContainer = createAppContainer(AppNavigator)
const App = () => {
return (
<AppContainer />
)
}
export default App
OR
if it didn't work then you better check your index.js file whether you imported App Component (Root component) correctly or not?
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'
})
);
I'm getting below error when im trying to navigate to different screen from home screen. i defined initial loading screen in routes. From initial screen trying to navigate to different screen then getting below error.
this.props is returning just {}. Not really sure why.
login.component.js
import React, {Component} from 'react';
import {NavigationActions} from 'react-navigation';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Touchable,
Image,
Button
} from 'react-native';
import { handleFbLogin } from '../../config/authConfig/';
class Login extends Component {
render () {
console.log("this.props")
console.log(this.props)
return (
<View style={{flex: 1,backgroundColor: '#37afa6'}}>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('setupProfile')}
/>
</View>
);
}
}
export default Login;
routes/index.js
import {StackNavigator} from 'react-navigation';
import Login from '../pages/Login.page';
import SetupProfile from '../pages/setupProfile.page';
const Config = {
navigation: {
login: {
screen: Login
},
setupProfile: {
screen: SetupProfile,
}
}
}
export default Config;
App.container.js
import React, {Component} from 'react';
import Login from './pages/Login.page';
import {connect} from 'react-redux';
import Router from './routes';
import {
Platform,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
class App extends Component {
render () {
return (
<Router />
);
}
}
export default App;
index.js(startup point):
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import app from './app/index';
import Config from './app/routes/index';
export const AppNavigator = StackNavigator(Config.navigation,{initialRouteName : 'login'});
AppRegistry.registerComponent('BuddApp', () => AppNavigator);
export default app;
i'm able to load initalscreen after these changes but when trying to navigate still getting the same error.
EDIT :
I got it. You forgot the constructor in your login screen, that's why your props are empty :
constructor(props) {
super(props);
}
PREVIOUS ANSWER :
Without the full code, i can't see what the exact problem is, but i will give you an exemple of use of react-navigation :
In your index.js (start point of your app) :
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
export const AppNavigator = StackNavigator(Config.navigation);
AppRegistry.registerComponent('appName', () => AppNavigator);
In the navigation config :
const Config = {
navigation: {
login: {
screen: Login
},
setupProfile: {
screen: SetupProfile,
}
}
}
The first object found in the navigation config is the start of your app.
Now you can use your navigation function in the "login" page with navigate :
this.props.navigation.navigate('setupProfile')
If the AppRegistry is filled everything should run fine.
I hope it help !