I have the following:
import {navigationRef} from "./wherever"
<NavigationContainer ref={navigationRef}>
In the navigation file I import, I have this
import React from 'react';
const navigationRef = React.createRef();
const navigate = (name, params) => {
console.log(navigationRef)
navigationRef.current?.navigate(name, params);
}
export default {
navigate
}
But when in my code I try to call the following:
import navigation from './wherever';
navigation.navigate('wherever')
the console log always shows
{"current": null}
and so the navigation never kicks in. Can anyone help?
the rubber duck technique in action, I answered my own question in the act of describing it to you all!
I was simply missing an export.
export default {
navigate,
navigationRef
}
And so I changed my import like so:
import navigation from "./wherever"
<NavigationContainer ref={navigation.navigationRef}>
Related
I am using react-navigation module to implement the bottom tab bar, and now I want to pass the parameters to page B during the operation in page A without page jumping, is there any way to achieve this?
I read the official documentation of react-navigation, and it seems that only the navigation.navigation method can pass parameters across pages, but this will cause page jumps
You can use the AsyncStorage package. Save the data you will use on PageB with a key on PageA. Then get saved data on the PageB.
import React, { useEffect } from 'react';
import { Button } from 'react-native';
import AsyncStorage from '#react-native-async-storage/async-storage';
export default PageA = ({ navigation }) => {
useEffect(() => {
AsyncStorage.setItem("PageParams", "something")
}, [])
return (
<Button title='Navigate' onPress={() => navigation.navigate("PageB")} />
);
};
import { View } from 'react-native';
import React, { useEffect } from 'react';
import AsyncStorage from '#react-native-async-storage/async-storage';
export default PageB = () => {
useEffect(async () => {
const params = await AsyncStorage.getItem("PageParams")
console.log(params) // output: something
})
return (
<View />
);
};
I can't seem to figure out what seems to be the issue. I am getting a render error, "Could'nt find a 'component'; get component or children prop for the screen dashboard. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined.
My code in App.js is as follows:
```
import React from "react";
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import {
MainLayout
} from "./screens";
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName={'Dashboard'}
>
<Stack.Screen
name="Dashboard"
component={MainLayout}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default App
```
My code in /screens/Dashboard/MainLayout is as follows:
```
import React from 'react';
import {
View,
Text
} from 'react-native';
const MainLayout = () => {
return (
<View>
<Text>MainLayout</Text>
</View>
)
}
export default MainLayout;
```
You are exporting MainLayout as default so import it without { }. You can import default component with any name but non default components with exact name inside { }.
Change your import in App.js like below ( It seems that you also not given full path)
... // rest of imports
import MainLayout from "./screens/Dashboard/MainLayout";
... // rest of codes
Click here to know more about Importing and Exporting
I have a nested component, and I want to use withNavigation in the nested component in react-navigation v5.
why you don't create your own withNavigation
import React from 'react';
import { useNavigation } from '#react-navigation/native'; // not sure package name
export const withNavigation = (Component: any) => {
return (props: any) => {
const navigation = useNavigation();
return <Component navigation={navigation} {...props} />;
};
};
React Navigation Version: 5.x
Sometimes you need to trigger a navigation action from places where you do not have access to the navigation prop, such as a Redux middleware. For such cases, you can dispatch navigation actions from the navigation container.
If you're looking for a way to navigate from inside a component without needing to pass the navigation prop down. Do not use this method when you have access to a navigation prop or useNavigation since it will behave differently, and many helper methods specific to screens won't be available.
You can get access to the root navigation object through a ref and pass it to the RootNavigation which we will later use to navigate.
// App.js
import { NavigationContainer } from '#react-navigation/native';
import { navigationRef } from './RootNavigation';
export default function App() {
return (
<NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
);
}
In the next step, we define RootNavigation, which is a simple module with functions that dispatch user-defined navigation actions.
// RootNavigation.js
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
// add other navigation functions that you need and export them
Then, in any of your javascript modules, just import the RootNavigation and call functions that you exported from it. You may use this approach outside of your React components and, in fact, it works just as well when used from within them.
// any js module
import * as RootNavigation from './path/to/RootNavigation.js';
// ...
RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });
Apart from navigate, you can add other navigation actions:
import { StackActions } from '#react-navigation/native';
export function push(...args) {
navigationRef.current?.dispatch(StackActions.push(...args));
}
https://reactnavigation.org/docs/navigating-without-navigation-prop/
I am new at react native and i am trying to implement the navigation from one screene to the other and it is a bit hard because sources are old and do not work as possible solutions for current react native version, i know that this question is not the best question to make here but i rally need help
navigation you can do something like this. lets have quick look at example:
RootStack.js
import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
import { withNavigation } from 'react-navigation';
const RootStack = createAnimatedSwitchNavigator(
{
splash:SplashScreen,
second:SecondScreen,
},
{
initialRouteName: splash
}
)
export default RootStack;
APP.js
import { createStackNavigator } from 'react-navigation-stack';
import AuthStack from './AuthStack'
const RootStack = createStackNavigator({ RootStack});
const AppContainer = createAppContainer(RootStack);
export default AppContainer;
your component should be like this.
...rest
const SplashScreen = (props) =>{
return (
<View>
<TouchableOpacity onPress={()=>{
props.navigation.navigate("second")
}}></TouchableOpacity>
</View>
)
}
export default withNavigation(SplashScreen)
Our React Native Project, uses react-navigation Stack navigator. It perfectly running in Android but in ios it gives an error which "Raw Text must be wrapped in an explicit " When we try to navigate between Page.
In ios only first page loading. For example, Default 'Main Page' is the first page in order so android and ios emulator both open the first page. Then if we try to navigate between them in android navigaton works but in ios we get "Raw text Error".
And if we change firs page of stack navigator ios also loaded first page correctly but not navigate between them as expected.
We think navigated pages may be problem, so we create a blank page and navigate to there, but issue still continue in iOS.
I am really glad to hear suggestions.
This is how we navigate between pages:
this.props.navigation.navigate('ProfileSayfa');
This is our index.android.js and also index.android.ios:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {StackNavigator,DrawerNavigator } from "react-navigation";
import LoginPage from "./src/pages/login-page/login-page";
import MainPage from "./src/pages/main-page/main-page";
import MekanAraSonuc from "./src/pages/MekanAra/MekanAraSonuc";
import MekanAra from "./src/pages/main-page/tabs/mekan_ara";
import NewsTab from "./src/pages/main-page/tabs/news-tab";
import StartPage from "./src/pages/start-page/start-page";
import AllMekan from "./src/pages/AllMekan/AllMekan";
import MekanSayfa from "./src/pages/MekanSayfa/MekanSayfa";
import RezervasyonSayfa from "./src/pages/MekanSayfa/RezervasyonSayfa";
import FirsatSayfa from "./src/pages/MekanSayfa/FirsatSayfa";
import EtkinlikSayfa from "./src/pages/MekanSayfa/EtkinlikSayfa";
import ProfileSayfa from "./src/pages/MekanSayfa/ProfileSayfa";
import EtkinlikSonuc from "./src/pages/AllMekan/EtkinlikSonuc";
import FirsatlarSonuc from "./src/pages/AllMekan/FirsatSonuc";
import IconME from 'react-native-vector-icons/FontAwesome';
import Drawer from "./src/pages/MyComponents/Drawer";
import SearchForm from "./src/pages/MyComponents/SearchForm";
import RezervasyonForm from "./src/pages/Forms/RezervasyonForm";
import FirsatForm from "./src/pages/Forms/FirsatForm";
import CalendarListView from "./src/pages/Forms/CalendarListView";
export default class moreAwesome extends Component {
render() {
return (
<LoginApp
ref={nav => {
this.navigator = nav;
}}
/>
);
}
}
const LoginApp = StackNavigator({
MainPage: {
screen: MainPage,
},
LoginPage: { screen: LoginPage },
MekanAraSonuc:{screen:MekanAraSonuc},
MekanAra:{screen:MekanAra},
NewsTab:{screen:NewsTab},
AllMekan:{screen:AllMekan},
MekanSayfa:{screen:MekanSayfa},
FirsatSayfa:{screen:FirsatSayfa},
EtkinlikSayfa:{screen:EtkinlikSayfa},
EtkinlikSonuc:{screen:EtkinlikSonuc},
FirsatlarSonuc:{screen:FirsatlarSonuc},
ProfileSayfa:{screen:ProfileSayfa},
RezervasyonSayfa:{screen:RezervasyonSayfa},
SearchForm:{screen:SearchForm},
RezervasyonForm:{screen:RezervasyonForm},
FirsatForm:{screen:FirsatForm},
CalendarListView:{screen:CalendarListView},
});
AppRegistry.registerComponent('myproje', () => moreAwesome);
Apperantly, when you create static Navigation Options for an page, "title" can be empty string in Android but not on iOS.
When we change this,
static navigationOptions = ({ navigation }) => {
return {
title: '',
};
};
To this:
When we change this,
static navigationOptions = ({ navigation }) => {
return {
title: ' ',
};
};
And Also be careful intial page gives this error not target page!