Object(...) is not a function in React Natiive - javascript

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

can't navigate to another page when using createMaterialTopTabNavigator in react native

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>
)
}

Got this error in app.js trying to run this code again but getting the same error help me guys

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";

How to solve "Can't find variable: App" in React Native?

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?

Stack navigation and Drawer navigation in React Native

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'
})
);

React-native:cannot read property 'navigate' of undefined

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 !

Categories