React native – How to call a Function from Another Component

I have a plus icon on my tabnavigator component and i want that when user press that icon it display the Create component on the Home screen, What can be the best approach to make this possiblble? in react native? like instead of display the create component on a separate new screen how can i display it in home screen or current screen in which user is.

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Foundation from 'react-native-vector-icons/Foundation';
import Feather from 'react-native-vector-icons/Feather';
import Entypo from 'react-native-vector-icons/Entypo';
import Home from '../screens/Home';;
import { View } from 'react-native';

const Tab = createBottomTabNavigator();

const TabNavigator = () => {

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarInactiveTintColor: 'gray',
        tabBarActiveTintColor: 'white',
        tabBarStyle: {
          backgroundColor: 'black',
          borderTopWidth: 0,
          height: '10%',
          marginTop: '-10%'
        },
      })}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          headerShown: false,
          tabBarLabelStyle: { fontSize: 12, bottom: '12%' },
          tabBarIcon: ({ focused, color, size }) => (
            <Foundation
              name="home"
              size={33}
              color={focused ? "white" : "gray"}
            />
          )
        }}
      />
      <Tab.Screen
        name="plus"
        component={Create}
        options={{
          headerShown: false,
          tabBarLabelStyle: { display: 'none', },
          tabBarIcon: ({ focused, color, size }) => (
            <View style={{ top: 10, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', borderRadius: 10, height: 30, width: 40 }}>
              <Entypo
                name="plus"
                size={28}
                color='black'
              />
            </View>
          )
        }}
      />
    </Tab.Navigator>
  );
};

export default TabNavigator;

Home:

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { SafeAreaView } from 'react-native-safe-area-context'

type Props = {}

const Home = (props: Props) => {
  return (
    <SafeAreaView>
       <Text>Hello, World</Text>
    </SafeAreaView>
  )
}

export default Home

const styles = StyleSheet.create({})

Create component:

import React from 'react';
import { View, StyleSheet } from 'react-native';

interface CreateProps {
    isVisible: boolean;
}

const Create: React.FC<CreateProps> = ({ isVisible }) => {
    console.log(isVisible)
    return (
        isVisible ? (
            <View style={{
                height: 60,
                // position: 'absolute',
                bottom: 10,
                right: 50,
                left: 16,
                borderRadius: 16,
                backgroundColor: 'white',
                alignItems: 'center',
            }}>

            </View>
        ) : (
            <></>
        )
    );
};

const styles = StyleSheet.create({
    textStyle: {
        fontSize: 12,
        color: 'blue'
    },
});

export default Create;