I am using bottom navigation and when I navigate from dialer screen to contacts screen by swiping, at that time I want to open the contacts screen of my phone directly. Below I have shared the code of ContactComponent file and BottomNavigation file. I'm new to React Native so please help me. 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> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
For Android, you can open the Contacts app using native
Linkinginreact-native.const openContacts = () => { if (Platform.OS === 'android') { Linking.openURL('content://com.android.contacts/contacts'); } };Now, if you want to open the contact screen when the dialer screen is focused, you can use the
useFocusEffecthook in@react-navigation/nativeto do that.In the screen where you want to navigate to the Contacts application, 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'); } }, []) );This is a snack for implementation