CODEWITHSUNDEEP
reactjsreact-nativereact-routerreact-navigation
Nah
Nah

Reputation: 1768

ReactNative Navigation to other screen from a button click, while other route is not defined in Tabbed navigation

I am using react-navigation module and have defined following screens routes:

import React, {Component} from 'react';
import { AppRegistry } from 'react-native';
import { TabNavigator } from 'react-navigation';

import HomeScreen from './src/ScreenDashboard';
import TodosScreen from './src/ScreenTodos';
import ContactsScreen from './src/ScreenContacts';

                            // Defining navigation (using tabbed navigation style)
const AppWithNavigation = TabNavigator(    
{                                         
    Home: { screen: HomeScreen },
    Todos: { screen: TodosScreen },
    Contacts: { screen: ContactsScreen }
},
{
 ...
}

If I try to add transition to any other screen I will have to do it via:

const { navigate } = this.props.navigation;   // child component reading navigation from its props
<Button onPress={ () => navigate('Todos') } />

But the issue is, I do not want to make transition to my Todos component screen, I have another component Appointments, I want to do transition to that component. How can I achieve that? As if I include its route in TabNavigator(), that will start displaying additional tab in my navigation (which I don't want to show).

Same logic applies when I want to do screen navigation upon clicking add, edit, search buttons. Those can not be defined in navigation routes (so to make them visible in main navigation). I hope you understood my problem.

In web ReactJS we simply define routes, which is pretty good, but don't know how to manage those stuff here.

app main screen

Basically I want to switch screen when I click any of the strip on my main screen.

The bottom tab navigation is working

Upvotes: 1

Views: 2728

Answers (1)

magneticz
magneticz

Reputation: 2440

You can nest navigators inside other navigators. In your case, inside TabNaivgator you can insert StackNavigator

const TodoNavigator = StackNavigator({
    Todos: { screen: TodosScreen },
    Appointments: { screen: AppointmentsScreen},
    // other screens
})

const AppWithNavigation = TabNavigator(    
{                                         
    Home: { screen: HomeScreen },
    TodosTab: TodoNavigator,
    Contacts: { screen: ContactsScreen }
}

Now, when you press Todo tab, it will open your todo screen, because by default, first screen is loaded. To navigate to AppointmentsScreen, you need to call this.props.navigation.navigate('Appointments') and it will transition to that screen. And you still will be in Todos tab (it will be active). If you want you can hide tabs and do bunch of different things, take a look at documentations.

You can learn more about nesting navigators here

Upvotes: 2

Related Questions