react-navigation

I have some issue when navigating from top Tabnavigator to other screens so my app navigation is My Orders Screen from Drawer => Top TabNavigatore (Accepted/Completed) => Order Details In Route.js I put every single navigation I want like Drawer - Auth navigation and so on, and I put a StackNavigator contain the Orders Screen like this: const OrdersStack = createStackNavigator({ Orders: { screen: Orders, navigationOptions: ({ navigation }) => ({ headerLeft: ( // <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}> <TouchableOpacity onPress={() => navigation

I have some issue with BackHandler , the issue is when running the app and go to the let's say Sign Up screen and touch the back in my mobile they will run the function and show the Alert to confirm, but now when I go to any other screen and touch the back they will I need to just back to the previous screen on every back BackHandler.exitApp(); runs, Although I write if the routname is SignUp just exit the app not other screens this is my code Sign Up import React from "react"; import { Text, TextInput, ActivityIndicator, View, KeyboardAvoidingView, ScrollView, Image, TouchableOpacity,

Im try to understand how to reset in nested stack this my code const AuthStack = createStackNavigator( { Welcome, Login, Register, ConfirmationCode, }, { initialRouteName: 'Welcome', headerMode: 'none', lazy: true, transitionConfig, defaultNavigationOptions: { gesturesEnabled: false, }, } ) const AppStack = createStackNavigator( { TabStack, SearchResult, BusinessDetail, BusinessMap, MakeAppointment, TermsAndConditions }, { initialRouteName: 'TabStack', headerMode: 'none', lazy: true, transitionConfig, defaultNavigationOptions: { gesturesEnabled: false, }, } ) let MainStack =

I have a leaderboard which calls a component and passes it data to it like so: _renderItem =({item}) => ( <childComponent key={item._id} id={item._id} name={item.name} /> ); And inside the childComponent I try do this: <TouchableOpacity onPress={() => this.props.navigation.navigate("Profile", { id: this.props.id})} > <View> <Right> {arrowIcon} </Right> </View> </TouchableOpacity> Where I am hoping that it will then go to the profile page and grab the correct data based on the id passed to it. The issue is that when I click the arrow to go to the profile page I get the error Cannot read

I want to perform two actions but it doesn't work. const backAction = NavigationActions.back({ key: null }) const dispatchLogoutAction = NavigationActions.reset({ index: 0, actions: [NavigationActions.navigate({routeName: "LoginView"})] }); nextProps.navigation.dispatch(backAction); nextProps.navigation.dispatch(dispatchLogoutAction); What other ways to dispatch both actions in react-navigation rather than listing dispatch statements parallelly? 来源： https://stackoverflow.com/questions/48050248/how-to-dispatch-multiple-actions-in-react-navigation

How do I set the height a React Navigation modal view so once it has appeared it will only cover about half of the screen from the bottom up, and the view below remains visible? Update: I'm trying to create a ux flow similar to the App Store purchase modal, where some kind of StackNavigator is nested in a modal that fills the bottom half of the screen. In your stacknavigator you can set these options: mode: 'modal', headerMode: 'none', cardStyle:{ backgroundColor:"transparent", opacity:0.99 } And in your modal screen: class ModalScreen extends React.Component { render() { return ( <View style=

Is there a way to implement animation that goes from left to right with navigate() function in react-navigation ? Thanks in advance. when you define your screens, you can use transitionConfig option. const Stack = StackNavigator( { SomeScreen: { screen: ... }, }, { transitionConfig: customAnimationFunc, } ); ... import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'; const customAnimationFunc = () => ({ screenInterpolator: sceneProps => { return CardStackStyleInterpolator.forVertical(sceneProps); }, }); should do the job. You can of course

I am using DrawerNavigator in https://reactnavigation.org/docs/navigators/drawer . const MyApp = DrawerNavigator({ Home: { screen: MyHomeScreen, }, Notifications: { screen: MyNotificationsScreen, }, }); I have multiple screens that are using MyNotificationsScreen component with different props. How can I do something like: const MyApp = DrawerNavigator({ Home: { screen: MyHomeScreen, }, Notifications1: { screen: MyNotificationsScreen(propName=val1), }, Notifications2: { screen: MyNotificationsScreen(propName=val2), }, }); Better way in many cases I think: screen: (props) =>