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
Related
I am having trouble creating Switch Navigator in React Native.
This is the App.js code
import React, { Component } from 'react';
import TabNavigator from './Navigation/TabNavigator';
import { NavigationContainer } from '#react-navigation/native';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import Loading from './Screens/Loading';
import Login from './Screens/Login';
import Home from './Screens/Home';
const Switch = createSwitchNavigator({
LoginScreen: Login,
LoadingScreen: Loading,
HomeScreen: Home
});
const AppNavigator = createAppContainer(Switch);
export default function App() {
return <AppNavigator />;
}
Finally Got the answer
"react-navigation" : "4.2.0"
So the most compatible version of react-navigation is 4.2.0.
This is my folder structure. I have started this app with expo. Somehow i am not able to run it because of the following error.
Rootstack.js
import React from 'react';
import { createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginComponent from "../component/login/login";
import HomeComponent from "../component/home/home"
const AuthNav = createStackNavigator({
Login:{
screen : LoginComponent,
navigationOptions:{
headerShown: false
}
},
});
const AppNav = createStackNavigator({
Home:{
screen : HomeComponent,
tabBarLabel: 'Home',
navigationOptions:{
headerShown: false
}
},
});
const switchNav = createSwitchNavigator({
AuthNav,
AppNav
},{
initialRouteName:"AuthNav"
});
export default switchNav;
App.js inside stack folder
import { createAppContainer } from 'react-navigation'
import App from './stack/RootStack'
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('main',() => App);
export default createAppContainer(App);
main app.js
import App from './src/App.js';
export default App;
Error
Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider
Error 2
Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
Which part i am doing wrong here .
The meaningful exception that you are seeing here is:
Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider
The "main" has not been registered is a red herring, it only happened because the other error.
The RNCSafeAreaProvider exception is happening because you have multiple copies of react-native-safe-area-context in your app. You may be using a library that includes it as a dependency in addition to having it installed in your app. If you use yarn, you can run yarn why react-native-safe-area-context to see where it's coming from. Try running expo install react-native-safe-area-context and if that doesn't help you can use yarn resolutions to override the version used by the package that depends on it.
The issue is most likely linked to registering your App Multiple times.
Keep all your navigation logic in RootStack.js and avoid using createAppContainer() in your app.js
AppRegistry.registerComponent('main',() => App) should be the final statement after configuring your navigation.
Importing App.js into main app.js means you are registering the main component twice(you should only have one output file). React uses index.js as the default output.
Use this instead App.js inside stack folder:
import { createAppContainer } from 'react-navigation'
import App from './stack/RootStack'
//Remove these 2 lines below
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('main',() => App);
export default createAppContainer(App);
In your main app.js
import App from './src/App.js';
// Use it here
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('main',() => App);
export default App;
I'm currently trying to implement react-navigation into my RN app. RN documentation seems to say that index.js is a required file for RN projects but the first react-navigation example shows all of the initial code in App.js with no index.js file:
https://snack.expo.io/#react-navigation/auth-flow-v3
Is the index.js file only required for standalone RN projects which are not built on Expo? Maybe Expo handles this automatically behind the scenes? The index.js file appears to be required for my standalone RN app and the render() implementation appears to be required in index.js as well. The problem appears to be that the render() implementation in my index.js appears to override whatever is in App.js. Ie I'm expecting initialRouteName: 'AuthLoading' in the App.js configuration to redirect to my AuthLoading component but App.js logic appears to get superceded by the index.js render() implementation.
So what is the proper way to get my index.js and App.js to support react-navigation integration? I'm open to ditching index.js for an alternative implementation/configuration, I just have it in my project because my understanding is that it's required.
I don't really get your confusion but still, this is how it would look.
First, your index.js would be completely normal. It has to look like this or similar:
//index.js
import { AppRegistry } from 'react-native'
import App from './App'
import { name as appName } from './app.json'
AppRegistry.registerComponent(appName, () => App)
This is just normal, right? Then, let's see how it would be in App.jsx
//App.jsx
import React, { Component } from 'react'
import AppContainer from './fromSomeRoute'//replace by your own
export default class App extends Component {
render() {
return (
<AppContainer />
)
}
}
And what is exactly AppContainer? just the component you exported from the file you are using for react-navigation. In here, there is no need to create a class or something like that, you can just create it like this
//fromSomeRoute.jsx
import React from 'react'
import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation'
import YourScreen from './YourPathToYourScreen'
const YourScreenStack = createStackNavigator({
YourScreen: {
screen: YourScreen,
navigationOptions: () => ({ //Look documentation for further info
header: null,
}),
},
})
const AppContainer = createAppContainer(
createSwitchNavigator(
{
Screen: YourScreenStack,
//Create more Stacks and add them in here
},
{
initialRouteName: 'Screen',
},
),
)
export default AppContainer
I am new to react native and I am using React navigation 3.x. This is
my project structure.
Mydemo
----routes
--Home.route.js
----src
--pages
--AddUser.js
----App.js
Below I am sharing my route configurations:-
Home.route.js code:-
import { createStackNavigator, createAppContainer } from "react-navigation";
import AddUser from '../src/pages/AddUser';
const HomeStack = createStackNavigator({
Add:{
screen: AddUser
}
})
export default createAppContainer(HomeStack);
App.js Code:-
import {createSwitchNavigator} from 'react-navigation';
import HomeStack from './routes/Home.route';
export default createSwitchNavigator({
Home: HomeStack
}, {
initialRouteName: 'Home',
});
But I am getting this error:-
The navigation prop is missing for this navigator.
can anyone please guide me about what I am doing wrong ?
Thank you.
createAppContainer must be on top of your navigation config =>
Home.route.js
import { createStackNavigator } from "react-navigation";
import AddUser from '../src/pages/AddUser';
export default createStackNavigator({
Add: AddUser
})
App.js
import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import HomeStack from './routes/Home.route';
const AppNavigator = createSwitchNavigator({
Home: HomeStack
}, {
initialRouteName: 'Home',
});
export default createAppContainer(AppNavigator);
I'm trying to set up a simple screen navigation bar using react-navigation. I've got the navigation working but can't make any icons appear on each tab.
I've tried using FontAwesome instead of IonicIcons but the same Box with an X through it appears in place of the desired icon.
import React, {Component} from 'react';
import {createBottomTabNavigator, createAppContainer} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import HomeScreen from './screens/HomeScreen'
import SearchScreen from './screens/SearchScreen'
import ScanScreen from './screens/ScanScreen'
const TabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: () => (<Icon name="md-home" />)
}
},
Scan: {
screen: ScanScreen
},
Search: {
screen: SearchScreen
}
});
export default createAppContainer(TabNavigator);
You have to link it react-native-vector-icons, in your command prompt:
react-native link react-native-vector-icons