TabNavigator CustomTabComponent onPress not navigating to AddCar page

Question

I am using A TabNavigator inside Stack navigator. Stack Navigator Contains 2 Pages Tab Navigator page and AddCar Page, inside TabNavigator I am using Custom Tab Bar Component which uses a custom Button Component when I press on that button it's not routing to Add Car Page,

I have tried to launch the page which is in the tabNavigator also but not working

here is the stack navigator code:

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation';

//Screens
import MainTabs from '../navigators/mainTabNavigator';
import AddCar from '../add_car/container/addCar';

class Navigator extends Component {
    render() {
        return (
            <AppNavigator />
        );
    }
}

const navigator = createStackNavigator({
    MainTabs: { screen: MainTabs },
    AddCar: { screen: AddCar }
}, {
    initialRouteName: 'MainTabs',
    headerMode: 'none'
});

const AppNavigator = createAppContainer(navigator);

export default Navigator;

here is the tabNavigator:

/* eslint-disable no-undef */
/* eslint-disable max-len */
/* eslint-disable no-unused-expressions */
/* eslint-disable react/require-extension */
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { createAppContainer, createBottomTabNavigator, withNavigation, NavigationActions, getActiveChildNavigationOptions } from 'react-navigation';
import Icons from 'react-native-vector-icons/Ionicons';

import { OpacityButton } from '../utilities/buttons';
import Colors from '../Metrics/colors';

//Screens
import CarsList from '../cars_list/container/carsList';
import AddCar from '../add_car/container/addCar';
import Screen from '../screen';

class MainTabNavigator extends Component {
    render() {
        return (
            <AppContainer />
        );
    }
}
const size = 25;
const routeConfigs = {
    CarsList: {
        screen: CarsList,
        navigationOptions: () => ({
            tabBarIcon: ({ tintColor }) => (
                <Icons
                  name="ios-information-circle"
                  color={tintColor}
                  size={size}
                />
            ),
        }),
    },
    AppovedList: {
        screen: Screen,
        navigationOptions: () => ({
            tabBarIcon: ({ tintColor }) => (
                <Icons
                  name="ios-options"
                  color={tintColor}
                  size={size}
                />
            ),
        }),
    },
    AddCars: {
        screen: AddCar,
        navigationOptions: () => ({
            tabBarButtonComponent: () => (
                <OpacityButton 
                name="ios-add-circle-outline" 
                onPress={() => NavigationActions.navigate('addCar')} 
                size={size} 
                color={Colors.brandColor}
                containerStyle={{ borderWidth: StyleSheet.hairlineWidth, borderColor: Colors.light, backgroundColor: Colors.white }}
                />
            )
        })
    },
    NavList: {
        screen: CarsList,
        navigationOptions: () => ({
            tabBarIcon: ({ tintColor }) => (
                <Icons
                  name="ios-albums"
                  color={tintColor}
                  size={size}
                />
            ),
        }),
    },
    Profile: {
        screen: CarsList,
        navigationOptions: () => ({
            tabBarIcon: ({ tintColor }) => (
                <Icons
                  name="ios-contact"
                  color={tintColor}
                  size={size}
                />
            ),
        }),
    },
};

const navigationOptions = {
    tabBarOptions: {
        activeTintColor: Colors.brandColor,
        inactiveTintColor: Colors.lightBlack,
        showLabel: false,
        animation: true
    },
    headerMode: 'none'
};

const navigator = createBottomTabNavigator(routeConfigs, navigationOptions);

const AppContainer = createAppContainer(navigator);

export default MainTabNavigator;

I Want To navigate to AddCarPage which is there in the stacknavigator, On press of that Custom Tab Component Button , Like instagram plus icon opens new page.

Did you define AddCar both in the stack and in the tab for a reason? — Auticcat

displayname displayname · Accepted Answer · 2019-07-10T07:05:19

for the custom component, you can just call it under tabBarIcon

AddCars: {
        screen: AddCar,
        navigationOptions: () => ({
            tabBarIcon:
                <OpacityButton 
                name="ios-add-circle-outline" 
                size={size} 
                color={Colors.brandColor}
                containerStyle={{ borderWidth: StyleSheet.hairlineWidth, borderColor: Colors.light, backgroundColor: Colors.white }}
                />
        })
    },

TabNavigator CustomTabComponent onPress not navigating to AddCar page

1 Answers