I am new to coding and react native. I have been trying to set up an app with just some basic pages to practice with react navigation but keep getting thrown an error.
Failed building JavaScript bundle.
Unable to resolve "./src/navigation/MainTabs" from "src/navigation/AppNavigator.js"
I am using expo and have installed these npm:
npm install #react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
npm install #react-navigation/stack
Here is my code so far:
App.js
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import AppNavigator from './src/navigation/AppNavigator.js';
const App = () => {
return (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
);
}
export default App;
AppNavigator.js
import * as React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import MainTabs from './src/navigation/MainTabs';
const Stack = createStackNavigator();
const AppNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name='MainTabs' component={MainTabs} />
</Stack.Navigator>
);
}
export default AppNavigator;
MainTabs.js
import * as React from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import PartyMenuScreen from './src/screens/PartyMenuScreen';
import TableMenuScreen from './src/screens/TableMenuScreen';
import VacationMenuScreen from './src/screens/VacationMenuScreen';
const Tabs = createBottomTabNavigator();
const MainTabs = () => {
return (
<Tab.Navigator>
<Tab.Screen name='Party Games' component={PartyMenuScreen} />
<Tab.Screen name='Table Games' component={TableMenuScreen} />
<Tab.Screen name='Vacation Games' component={VacationMenuScreen} />
</Tab.Navigator>
);
}
export default MainTabs;
I have tried reinstalling the npm modules and renaming file paths. Beyond that I am not sure what to do. I believe it may have something to do with my dependencies but I am not sure how to troubleshoot them.
You have error in AppNavigator.js import path for
import MainTabs from './src/navigation/MainTabs';
From the error message, I am assuming you have AppNavigator.js and MainTabs.js at the same level in folder hierarchy.
Replace above import with below:
import MainTabs from './MainTabs';
Resolved the issue. Used ../ for the imports because of the folder they were located in and changed the Tabs to Tab.
Related
I just got to this code:
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';
const stackRoutes = createStackNavigator();
const AppRoutes: React.FC = () => (
<stackRoutes.Navigator
headerMode="none"
screenOptions={{cardStyle: {backgroundColor: '#FFF'}, }}
>
<stackRoutes.Screen
name="LoginScreen"
component={LoginScreen}
/>
<stackRoutes.Screen
name="CreateAccount"
component={CreateAccount}
/>
</stackRoutes.Navigator>
)
export default AppRoutes;
And reports an error in "headerMode = "none", i already made some searchs but i couldnt find what exactly is wrong.
Should it be defined in some other way? Or is there something i should have installed
What i already have installed :
yarn add #react-navigation/native,
npx expo install react-native-screens react-native-safe-area-context,
yarn add #react-navigation/native-stack,
yarn add #react-navigation/stack and
npx expo install react-native-gesture-handler
I just made some changes and its working fine now, instead of using headerMode I'm using headerShown in the screenOptions, so the code will look like this:
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';
const stackRoutes = createStackNavigator();
const AppRoutes: React.FC = () => (
<stackRoutes.Navigator
/*headerMode="none"*/
screenOptions={{cardStyle: {backgroundColor: '#FFF'}, headerShown: false}}
>
<stackRoutes.Screen
name="LoginScreen"
component={LoginScreen}
/>
<stackRoutes.Screen
name="CreateAccount"
component={CreateAccount}
/>
</stackRoutes.Navigator>
)
export default AppRoutes;
I don't know what was wrong, maybe with the new versions it changed, but it worked now.
Im getting this error
BUNDLE ./index.js
error: node_modules\react-native-reanimated\src\index.ts: C:\Work\WordHunt\node_modules\react-native-reanimated\src\index.ts: Export namespace should be first transformed by `#babel/plugin-proposal-export-namespace-from`.
5 | export * from './reanimated1';
6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
| ^^^^^^^^^^^^
8 |
What Im getting on the phone:
[1]: https://i.stack.imgur.com/suoug.jpg
when I try to use createDrawerNavigator:
import React, { Component } from 'react'
import { createDrawerNavigator } from '#react-navigation/drawer';
import Main from './Screens/Main';
const Drawer = createDrawerNavigator();
export default function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Main" component={Main} />
</Drawer.Navigator>
);
}
This is my App.js file:
import React from 'react';
import Main from './src/Components/Screens/Main';
import MyDrawer from './src/Components/SideMenu';
function App() {
return (
<MyDrawer />
)
}
export default App;
IM using react native cli, not expo
//firstly you need to configure your babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
//add this plugins
plugins: ['react-native-reanimated/plugin'],
};
};
First run this to make sure everything compatible:
expo update
npm install react-native-screens react-native-safe-area-context
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
npx pod-install ios
I found the answer. This helps me: https://github.com/software-mansion/react-native-reanimated/issues/846#issuecomment-944115333
import React, { Component } from 'react'
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from "#react-navigation/native";
import Main from './Screens/Main';
const Drawer = createDrawerNavigator();
export default function MyDrawer() {
return (
<NavigationContainer>
<Drawer.Navigator useLegacyImplementation={true} initialRouteName="Main">
<Drawer.Screen name="Main" component={Main} />
</Drawer.Navigator>
</NavigationContainer>
);
}
I'm trying to implement react-redux in my react-native application.
In my root index, I wrote :
import {createStore} from 'redux';
import rootReducer from './src/reducers';
import {Provider} from 'react-redux';
const store = createStore(rootReducer);
AppRegistry.registerComponent(appName, () => (
<Provider store={store}>
<App />
</Provider>
));
And the App looks like this :
const App: () => React$Node = () => {
return (
<>
<NavigationContainer>
<Stack.Navigator>
......
</Stack.Navigator>
</NavigationContainer>
</>
);
};
export default App;
But Metro server keeps giving me : [Wed Aug 12 2020 11:06:14.345] ERROR ReferenceError: Can't find variable: React
You have to import React in root index as well
import React from 'react';
This is not required in normal scenarios but as you are using jsx tags in root index this is required.
Or you can do the provider setup in App.js
You need this line in the root index file
import React from 'react';
Just added the reducers in App.js. And everything is now working fine.
I have the following code in App.js file:-
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { NavigationContainer} from "react-navigation";
const Home = ({ navigation }) => {
return (
<View>
<Text>This is Home page!</Text>
</View>
)
}
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
I followed the same instruction on this page:- https://reactnavigation.org/docs/stack-navigator/
But it gave an error
I fixed the issue by following the version 4 documentation
The problem is that when i installed the react-navigation package by following these commands:-
yarn add #react-navigation/native
I assumed by default if i install any package without defining a specific version, it suppose to install the latest current version of that package which is (v5) any by default i followed the package documentation for the version 5 . and when i checked the installed package version i noticed that the version 4 is installed no 5 .
Now i used the version 4 stack creating syntax :-
const navigator = createStackNavigator({
Home:Home,
},
{
initialRouteName: 'Home'
});
export default createAppContainer(navigator);
Every thing work fine now
Here is the URL for the
V5 https://reactnavigation.org/docs/hello-react-navigation
V4 https://reactnavigation.org/docs/4.x/getting-started
Try to import createStacknavigator as below:
import {createStacknavigator} from '#react-navigation/stack';
This worked for me in no time.
Import your navigator files from;
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
I am simply trying to learn React Navigation. I installed packages below;
expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screen
Then I am trying to put a button and navigate with it but
onPress={() => this.props.navigation.navigate('Example')}
My project does not recognize "navigation" after "props" ? I installed all packages still same
app.js file:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Chat from './screens/Chat.js';
import Home from './screens/Home.js'
const RootStack = createStackNavigator({
Home: Home,
Chat: Chat
});
const AppContainer = createAppContainer(RootStack);
export default AppContainer;
Thanks for your help