https://reactnavigation.org/docs/material-top-tab-navigator

example - https://reactnavigation.org/docs/tab-based-navigation


import React from "react";
import { SafeAreaView, ScrollView, Text, View, StyleSheet } from "react-native";
import { useRoute } from "@react-navigation/native";
import { Styles } from "../../styles";
import { useFocusEffect, useNavigation } from "@react-navigation/native";
import { SvgXml } from "react-native-svg";
import { SvgImageData } from "../../lib/SvgData";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import Physical from "../../components/lifeVitals/Physical";
import Mental from "../../components/lifeVitals/Mental";

const LifeVitalsDetails = () => {
const route = useRoute();
const { singleLifeVital } = route.params;

const Tab = createMaterialTopTabNavigator();

return (
<SafeAreaView style={{ flex: 1 }}>
<View style={Styles.container}>
<View
style={{
alignItems: "center",
width: "100%",
backgroundColor: Styles.LIGHT,
paddingVertical: 5,
}}
>
<SvgXml xml={SvgImageData.Login.LoginLogo} width={120} height={40} />
</View>

<View style={Styles.subContainer}>
<View style={{ flex: 1, height: 100 }}>
<Tab.Navigator
screenOptions={{
// lazy: true,
tabBarScrollEnabled: true,
tabBarActiveTintColor: 'blue',
tabBarInactiveTintColor : "#000000"
}}
>
<Tab.Screen name="Vitals" component={Physical} />
<Tab.Screen name="Physiological" component={Mental} />
<Tab.Screen name="Mental" component={Physical} />
<Tab.Screen name="Physical" component={Mental} />
<Tab.Screen name="General Risks" component={Physical} />
<Tab.Screen name="Metabolic Risks" component={Mental} />
<Tab.Screen name="Blood Biomarkers" component={Physical} />
<Tab.Screen name="Overall" component={Mental} />
<Tab.Screen name="Surveys" component={Mental} />
</Tab.Navigator>
</View>
</View>
</View>
</SafeAreaView>
);
};

export default LifeVitalsDetails;

const styles = StyleSheet.create({});