How to open device's contact screen by swipe in react native

I'm using bottom navigation , and when I navigate from Dialer screen to contacts screen by swiping, at that time I want to open phone's contact screen directly.
Below I have shared the code of ContactComponent file and BottomNavigation file.
I'm new in React Native, so please help me in this.
Thanks in advance.

ContactComponent.js

 const ContactComponents = ({ navigation }) => {
useEffect(() => {
Linking.openURL("content://com.android.contacts/contacts")
}, []);
}
export default ContactComponents

BottomNavigation.js

const Tab = createMaterialTopTabNavigator();
export default function BottomNavigation() {
return (
<Tab.Navigator
tabBarPosition='bottom'
initialRouteName='Dialer'
screenOptions={{ 
tabBarLabelPosition: "beside-icon",
//tabBarLabelStyle: { fontWeight: "700", fontSize: 15, color : 'white'},
tabBarIconStyle: { display: "none" },
tabBarStyle :{backgroundColor : bottomTabBarColor},
tabBarIndicatorStyle : {position : 'relative', borderWidth : 2 , borderColor : bottomTabBarIndicatorColor}
}}>
<Tab.Screen 
name="Messages" 
component={MessageComponent} 
options = {{
tabBarLabel: ({focused, color, size}) => (
<Text style={ [styles.textStyle, {color: focused ? focusedLabelColor : unfocusedLableColor , fontWeight : focused ? 'bold' : 'normal' }] }>Messages </Text>
),
}}
/>
<Tab.Screen 
name="Last Ones" 
component={LastOnesComponent} 
options = {{
tabBarLabel: ({focused, color, size}) => (
<Text style={ [styles.textStyle, {color: focused ? focusedLabelColor : unfocusedLableColor , fontWeight : focused ? 'bold' : 'normal' }] }>Last Ones </Text>
),
}}
/>
<Tab.Screen 
name="Dialer" 
component={Dialpad} 
options = {{
tabBarLabel: ({focused, color, size}) => (
<Text style={ [styles.textStyle, {color: focused ? focusedLabelColor : unfocusedLableColor , fontWeight : focused ? 'bold' : 'normal' }] }>Dialer </Text>
),
}}
/>
<Tab.Screen 
name="Contacts" 
component={ContactComponents} 
options = {{
tabBarLabel: ({focused, color, size}) => (
//<View style={focused ?  styles.topTabLine : null}>
<Text style={ [styles.textStyle, {color: focused ? focusedLabelColor : unfocusedLableColor , fontWeight : focused ? 'bold' : 'normal' }] }>Contacts </Text>
//</View>
),
}}
/>
</Tab.Navigator>

For Android, you can use native Linking from react-native to open the contacts app.

const openContacts = () => {
  if (Platform.OS === 'android') {
    Linking.openURL('content://com.android.contacts/contacts');
  }
};

Now, if you want to open the contacts screen when the Dialer screen is focused, you can use the useFocusEffect hook from @react-navigation/native to perform that operation.

In the screen from which you want to navigate to contacts app, use this hook as shown.

import { useCallback } from 'react';
import { Linking, Platform } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

.
.
.

useFocusEffect(
  useCallback(() => {
    if (Platform.OS === 'android') {
      Linking.openURL('content://com.android.contacts/contacts');
    }
  }, [])
);

Here's a Snack for the implementation