CODEWITHSUNDEEP
react-nativereact-navigation
CoolMAn
CoolMAn

Reputation: 1861

react native how to create a dummy bottom tab bar

I am just trying to add a dummy bottom nav bar with four buttons that don't really do anything. I know it's a weird question...

Here is my App.js

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import Home from './screens/HomeScreen';
const AppNavigator = createStackNavigator({

  HomeScreen: { screen: Home,
    navigationOptions: ({ navigate })=> ({
      header: null,
    }),
  }

});

const App = createAppContainer(AppNavigator);

export default App;

It doesn't need to do anything, it just needs to show up on every screen

Upvotes: 0

Views: 407

Answers (1)

Tuan Luong
Tuan Luong

Reputation: 4162

You could try this one

import React, { Component } from 'react';
import { View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Home from './screens/HomeScreen';

const Dummy = () => {
  return <View />;
};

const HomeNavigator = createStackNavigator({
  HomeScreen: { screen: Home,
    navigationOptions: ({ navigate })=> ({
      header: null,
    }),
  },
});

const AppNavigator = createBottomTabNavigator({
  Tab1: {
    screen: HomeNavigator,
  },
  Tab2: {
    screen: Dummy,
  },
  Tab3: {
    screen: Dummy,
  },
  Tab4: {
    screen: Dummy,
  },
});


const App = createAppContainer(AppNavigator);

export default App;

Upvotes: 1

Related Questions