4

I want to archive a dynamic tabs(can open and close) with ability to see tab overview like in any browser. Any idea where to start?

SomeUser
  • 1,976
  • 15
  • 42
  • 60

2 Answers2

6
  • you can control with count of Navigator Tabs with state & jsx like this.
//tabs state
const [tabs, setTabs] = React.useState(
  [
    {
      name : "tab-1",
      component : TabScreen,
    },
    {
      name : "tab-2",
      component : TabScreen,
    }
  ]
)

//render
<Tab.Navigator>
  {
    tabs.map(tab => <Tab.Screen name={tab.name} component={tab.component} />)
  }
</Tab.Navigator>
  • add or remove tab like this
const addNewTab = () => {
  setTabs(tabs => [
    ...tabs,
    {
      name : "tab-" + (parseInt(tabs.pop().name.replace("tab-", "")) + 1),
      component : TabScreen,
    }
  ])
}


const remove = (route) => {
  setTabs(tabs => tabs.filter(tab => tab.name !== route.name))
}
  • use custom tabbar to add icon close in tab label.
  • use react context or redux to share state between them.

here just simple example you can start from it. try snack here.

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';


const Tab = createMaterialTopTabNavigator();


export default function App() {


  const [tabs, setTabs] = React.useState([
      {
        name : "tab-1",
        component : TabScreen,
      }
  ])


  const addNewTab = () => {
    setTabs(tabs => [
      ...tabs,
      {
        name : "tab-" + (parseInt(tabs.pop().name.replace("tab-", "")) + 1),
        component : TabScreen,
      }
    ])
  }


  const remove = (route) => {
    setTabs(tabs => tabs.filter(tab => tab.name !== route.name))
  }


  function TabScreen({route}) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text onPress={addNewTab}>Add New Tab</Text>
        {
          route.name !== "tab-1" && <Text onPress={() => remove(route)}>close me</Text>
        } 
      </View>
    );
  }



  return (
    <NavigationContainer>
      <Tab.Navigator>
        {
          tabs.map(tab => <Tab.Screen key={tab.name} name={tab.name} component={tab.component} />)
        }
      </Tab.Navigator>
    </NavigationContainer>
  );
}

the result
enter image description here

Ahmed Gaber
  • 3,384
  • 2
  • 12
  • 18
  • In this code i am facing a issue. It is fine that Tab is added. But you are printing tabs on console anywhere is showing []. Also if i am showing tabs. count in the first tabs. Then it is not updating while using this. It will always showing the starting value. – Rambler Jan 02 '22 at 11:34
  • as i have checked it on console it is missing first 2 objects of tabs in the state. – Rambler Jan 02 '22 at 11:51
2

Different tab bar for different screens in react native :

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

It just help you have different tabs for different screens.

If it doesn't help please let me know.

AaYan Yasin
  • 566
  • 3
  • 15