any way to have multiple tabs(screens) in react native with a preview like in a browsers do for example?

• 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

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.