Displaying Image Icon in header bar is easy in latest 5.x react navigation version. This method is known as replacing header bar title bar Title with custom component in react native. Because by default only Title of activity screen will display on header bar but using headerLeft prop we can easily replace Title text with custom component. In this case our custom component is Image component which display my image from online URL. I am also cropping image in round shape because in many social chatting applications like Whats-app and Hike we have seen image in same size. We would also display the header title text using headerTitle prop. So in this tutorial we would React Navigation 5.x Show Image Icon in Header Bar React Native Android iOS Example Tutorial.
Contents in this project React Navigation 5.x Show Image Icon in Header Bar React Native Android iOS Example Tutorial:
1. Before getting started the coding part we have to install the latest version of React Navigation in our current react native project. To install all the compulsory packages read my this tutorial.
2. After finishing installation of React Native 5.x latest version open your project’s main App.js file and import react-native-gesture-handler, StyleSheet, Text, View, Image, NavigationContainer and createStackNavigator components.
|
1
2
3
4
5
6
7
8
9
|
import ‘react-native-gesture-handler’;
import * as React from ‘react’;
import { StyleSheet, Text, View, Image } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
|
3. Create a custom class function named as ActionBarIcon(). In this function we would create a Image component in return block. We would use this function component to replace the current title in action title bar. I’m calling my image from WordPress Gravatar website.
|
1
2
3
4
5
6
7
|
function ActionBarIcon() {
return (
<Image
source={{uri : ‘https://secure.gravatar.com/avatar/dbbab0050db2dbd84d4e2c844196ee0c?s=60&d=mm&r=g’}}
style={{ width: 40, height: 40, borderRadius: 40/2, marginLeft : 15 }} />
);
}
|
4. Creating another function named as HomeScreen. This is our main home screen for our application.
|
1
2
3
4
5
6
7
8
9
10
|
function HomeScreen({ navigation }) {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}> Home Screen </Text>
</View>
);
}
|
5. Creating a constant Stack of createStackNavigator() type. We would use this Stack to add all the screens.
|
1
|
const Stack = createStackNavigator();
|
6. Creating a function named as App. In this function we would make NavigationContainer -> Stack.Navigator -> Stack.Screen component. Now we would call the headerLeft prop in options and pass the ActionBarIcon component here to display the image icon in Action title bar.
- headerTitle : Used to display activity screen Title text in title bar.
- headerLeft : Used to display custom component in action title bar.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“Home”
component={HomeScreen}
options={{ headerTitle: ‘Home Activity’,
headerLeft : props => <ActionBarIcon {...props} /> }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
margin: 12,
fontSize: 22,
fontWeight: “100”,
},
});
|
8. Now we have to call our main Root App using export default syntax.
|
1
|
export default App;
|
9. Complete Source Code for App.js file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import ‘react-native-gesture-handler’;
import * as React from ‘react’;
import { StyleSheet, Text, View, Image } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
function ActionBarIcon() {
return (
<Image
source={{uri : ‘https://secure.gravatar.com/avatar/dbbab0050db2dbd84d4e2c844196ee0c?s=60&d=mm&r=g’}}
style={{ width: 40, height: 40, borderRadius: 40/2, marginLeft : 15 }} />
);
}
function HomeScreen({ navigation }) {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}> Home Screen </Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“Home”
component={HomeScreen}
options={{ headerTitle: ‘Home Activity’,
headerLeft : props => <ActionBarIcon {...props} /> }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
margin: 12,
fontSize: 22,
fontWeight: “100”,
},
});
export default App;
|
Screenshot:
Also Read :
React Native Set Gradient Effect Background on TextInput Android iOS
React Native Custom Common Toast for both Android iOS App Tutorial
React Native Create Multi Language Localization Support App iOS Android
React Native Creating Card View in Android iOS App Example Tutorial
How to use Multiple States in React Native Hooks Functional Component
