Comments (8)
The following should work. If it doesn't then it is probably a bug. If it does work, can you find a good place to add this to the documentation?
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
someEvent() {
// call navigate for AppNavigator here:
this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
}
render() {
return (
<AppNavigator ref={nav => { this.navigator = nav; }} />
);
}
}
from react-navigation.
works, thanks. i'll try to add a doc for it!
from react-navigation.
time to give back, PR - #122
from react-navigation.
Hey @ericvicenti @kelset @brentvatne
How can this be done if the logic that does the dispatch is in another component that is rendered after the navigator on the same level? In my case I create my navigators (A drawer with a stack navigator and other nested navigators) and then I render them using the <Drawer>
. On the same level I'm loading my <PushController>
component to handle push notifications. The pushcontroller actually gets the event that I want to dispatch on and I can't figure out how to adapt the solution in this thread for this scenario. Currently the following isn't working.
Drawer + PushController rendering
render(){
return(
<View style={{flex: 1}}>
<Drawer ref={nav => { this.navigator = nav; }}/>
<PushController user={this.props.user} navigator={this.navigator}/>
</View>
)
}
PushController snippet:
import { NavigationActions } from 'react-navigation';
async doFCM() {
FCM.getInitialNotification().then(notif => {
//triggers on app first opening, checks for if the notification was opened
console.log('Initial Notification', notif);
if(notif.fcm.action === "fcm.ACTION.OPEN_NOTIFICATION"){
this.props.navigator && this.props.navigator.dispatch(NavigationActions.navigate({routename: 'Chat'})) //{friend: chatInfo}
}
});
}
from react-navigation.
hey @rtman - if you believe there is a bug please create an issue and follow the template. otherwise try one of the support options from https://reactnavigation.org/ :)
from react-navigation.
@brentvatne Ok, I didn't think it was a bug, so I opted to ask on stack overflow. If anyone is inclined to help me out here it is: https://stackoverflow.com/questions/48719141/how-to-call-navigate-from-a-component-rendered-at-top-level
from react-navigation.
@ericvicenti
I've tried to implement something similar but getting an error. The above solutions do not work as my navigator is connected to redux. Any help would be much appreciated.
undefined is not an object (evaluating '_this.props.navigation.state.params.conversation
AppNavigation.js
...
export default StackNavigator({
TabNav: { screen: TabStack }, //this is a tab nav and the rest are stack
ItemDetails: { screen: ItemDetailsStack },
Login: { screen: LoginStack },
Conversation: { screen: ChatScreen },
}, { headerMode: 'none' }
);
ReduxNavigation.js
...
import AppNavigation from '../App';
function ReduxNavigation(props) {
const { dispatch, nav } = props;
const navigation = ReactNavigation.addNavigationHelpers({
dispatch,
state: nav
});
return <AppNavigation navigation={navigation} />;
}
const mapStateToProps = state => ({ nav: state.nav });
export default connect(mapStateToProps)(ReduxNavigation);
App.js
...
navigateToChatList() {
this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName: 'Conversation' });
}
...
<Provider store={store}>
<StatusBar barStyle='light-content' />
<TouchableOpacity style={styles.notification} onPress={() => this._navigateToChatList()}>
..
</TouchableOpacity>
<AppNavigation ref={nav => { this.navigator = nav; }} />
</Provider>
from react-navigation.
https://reactnavigation.org/docs/navigating-without-navigation-prop.html
from react-navigation.
Related Issues (20)
- Empty children array in Screen causes type issue HOT 5
- Trying to change the tabBarItemStyle of the active tab not working HOT 4
- Git error 128 adding react-navigation/bottom-tabs HOT 3
- Navigating to the Home page after using back browser feature navigates outside the application HOT 2
- react native drawer issue on top screen when app in open HOT 4
- Tab Navigator inside Stack Navigator Cause Re-Render when do redux action HOT 3
- How to change the pressColor of a drawer menu item? HOT 5
- Title overlaps when the title length increases HOT 5
- `useLinkProps` not generating correct link in browser HOT 4
- **人请看:作为一名资深5年的RN告诉你这个烂库别用,尤其是新手 HOT 2
- In Android 14, app gets restarted when navigating from portrait to landscape screen HOT 2
- React Navigator URLs specified in linking are being ignored when matching urls HOT 9
- Navigate to Screen with Scrollview and back to current screen with ScrollView, cause scroll stuck (not smooth) HOT 3
- react-native-drawer-layout: right drawer stuck in open position. Won't close. HOT 7
- Stack header accessibility issue: tab order HOT 2
- Error using setParams and setOptions, rollback to version @react-navigation/[email protected] is mandatory HOT 11
- Error from useBottomTabBarHeight() limits its usage. HOT 5
- Regression in material top tabs scrolling behavior in RN 0.73 HOT 2
- Drawer headerRight button also opens in the headerLeft. HOT 2
- React native bottom tab bar pushing itself up when opening keyboard HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-navigation.