showing navigation bottom bar in screens which are not part of bottom tabs in react native

user_2114326 0
Viewed 4933

I have three tabs and 8 screens in react native app. I have created bottom tab navigator as follows and I have 5 more screens which i dont want in tabs but on those screens the normal three tabs bottom bar navigator is required. Exact help is appreciated. 

const TabNavigation = createBottomTabNavigator(
{
    Scan: {
        screen: ScanScreen,
        navigationOptions: {                
            tabBarLabel: 'Scan',
            tabBarIcon: () => <Ionicons name="ios-qr-scanner-outline" size={32} color="blue" />
            ,
        },
    },
    Patient: {
        screen: PatientStack,
        navigationOptions: {                
            tabBarLabel: 'Patients',
            tabBarIcon: () => <Ionicons name="ios-people" size={32} color="blue" />
            ,
        },
    },
    Setting: {

        screen: SettingScreen,
        navigationOptions: {            
            tabBarLabel: 'Setting',
            tabBarIcon: () => <Ionicons name="ios-settings" size={32} color="blue" />
            ,
        },
    },        
},
{
    lazyLoad: true,
    animationEnabled: false,
    tabBarPosition: 'bottom',
    tabBarOptions: {

        showIcon: true,
        showLabel: true,
        activeTintColor: '#7117ea',
        inactiveTintColor: '#7117ea',
        style: {
            backgroundColor: '#eff0f1'
        },
        iconStyle: {
            width: 40

        },
        tabStyle: {
            height: 60
        }

    },
},
);
navigator react-native
1 Answers

This is an Example code which will solve your problem (Hope so) In this there are three scenes and in bottom bar two screens are rendered and the third scenes is rendered after clicking a link but the bottom bar will be there. 

import React from 'react';
import { Button, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
        <Button
          title="Go to Settings"
          onPress={() => this.props.navigation.navigate('Settings')}
        />
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Details!</Text>
      </View>
    );
  }
}

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Details: { screen: DetailsScreen },
});

const SettingsStack = createStackNavigator({
  Settings: { screen: SettingsScreen },
  Details: { screen: DetailsScreen },
});

export default createBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'red',
      inactiveTintColor: 'gray',
    },
  }
);
user_98398250
Related