Image icon in activity action bar is used to mostly display user image while creating a social chatting application in react native. We are using many social apps like Whats’App and Hike and all of them usages this feature. When we open our friends profile then it will show us his picture at the top left side of screen inside Title bar. We can render the image using headerLeft property of static navigationOptions. So in this tutorial we would going to add Show Image Icon Inside Activity Header Title Bar at left side in React Navigation android iOS react native application. So let’s get started .
Contents in this project Show Image Icon Inside Activity Header Title Bar in React Navigation iOS Android react native app:
1. Before going further we need to install the latest version of React Navigation library in our react native project. So open your project folder in command prompt like i did in below screenshot and execute below command.
|
1
|
npm install —save react–navigation
|
2. Screenshot of Command prompt after successfully installed React Navigation library.
3. Import StyleSheet, View, Text, Image component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Image } from ‘react-native’;
|
4. Import StackNavigator module from react navigation library.
|
1
|
import { StackNavigator } from ‘react-navigation’;
|
5. Create a new class named as ActionBarImage, We would used this class to render Image Profile Icon at the top left side of Header in react navigation. I am using my image from Gravatar URL.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
class ActionBarImage extends Component {
render() {
return (
<View style={{flexDirection: ‘row’}}>
<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}}
/>
</View>
);
}
}
|
6. Create your main class named as MainActivity, This class is our main class and used as our Main Application screen.
|
1
2
3
4
5
6
7
|
class MainActivity extends Component {
}
|
7. Create static navigationOptions in your MainActivity class, This method is inbuilt method of React Navigation and used to main header style options.
title : Used to set Header Title.
headerLeft : We would call the ActionBarImage class as render component, This would render the Image icon inside Action bar.
backgroundColor : Used to set background color of Header.
headerTintColor : Used to set Header Title text color.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
headerLeft : <ActionBarImage />,
headerStyle: {
backgroundColor: ‘#FF9800’
},
headerTintColor: ‘#fff’,
};
}
|
8. Create render’s return block in MainActivity and render your components inside it.
|
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
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
headerLeft : <ActionBarImage />,
headerStyle: {
backgroundColor: ‘#FF9800’
},
headerTintColor: ‘#fff’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 23}}> Hello Friends </Text>
</View>
);
}
}
|
9. Create StackNavigator project activity calling method and define your Activity as FirstScreen. You need to define all of your Activity classes inside this block to navigate them correctly.
|
1
2
3
4
5
6
7
|
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity }
});
|
10. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10,
backgroundColor: ‘#fff’
}
});
|
11. 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
66
67
68
69
70
71
72
73
74
75
76
77
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Image } from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
class ActionBarImage extends Component {
render() {
return (
<View style={{flexDirection: ‘row’}}>
<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}}
/>
</View>
);
}
}
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
headerLeft : <ActionBarImage />,
headerStyle: {
backgroundColor: ‘#FF9800’
},
headerTintColor: ‘#fff’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 23}}> Hello Friends </Text>
</View>
);
}
}
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity }
});
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10,
backgroundColor: ‘#fff’
}
});
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
React Navigation 5.x Hide Navigation Bar Open Full Screen Modal in React Native
Create PDF File using HTML Text in React Native Android iOS Example
React Native Community Blur Background View Android iOS Example
React Native Vertical ScrollView Android iOS Example Tutorial
React Native Get Android iOS Device Unique ID Dynamically Example
