I'm trying to learn react native and I have a problem. Here I use tab navigation and I want to add an image in my headers right side and when the users touch that image I want use navigator, but it doesn't work.
import React, { useEffect, useState } from 'react'
import { View, StyleSheet, Image, TouchableOpacity } from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack';
const TabNavigation = ({ navigation }) => {
return (
enter code here
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: () => (<Image source={require('../Images/Floody.png')} />),
headerStyle: {
height: 100
},
headerTitleAlign: 'center',
headerRight: () => (
<TouchableOpacity>
<Image source={require('../Images/profile.jpg')} />
</TouchableOpacity>
),
tabBarIcon: ({ focused }) => focused ? <HomeImageColorfull /> : <HomeImageBlack />
}} />
The navigation object is passed by the navigation framework to the options of the screen. Hence, you can implement a onPress function for your TouchableOpacity of your headerRight component and use the navigation object from the options.
<Tab.Screen
name="Home"
component={HomeScreen}
options={({navigation}) => ({
headerTitle: () => (<Image source={require('../Images/Floody.png')} />),
headerStyle: {
height: 100
},
headerTitleAlign: 'center',
headerRight: () => (
<TouchableOpacity onPress={() => navigation.navigate("SomeScreenToNavigateTo")}>
<Image source={require('../Images/profile.jpg')} />
</TouchableOpacity>
),
tabBarIcon: ({ focused }) => focused ? <HomeImageColorfull /> : <HomeImageBlack />
})} />