How to add click listener on Image View and on onPress() method call function from same class and show alert message on application screen.
Image buttons is very popular between developers because using them Android and iOS both developers can create simple cool looking buttons. So in this tutorial we would going to set onPress method on Image using TouchableOpacity. Because by default Image dose not support proper onPress method. So let’s get started .
Contents in this project Set onPress onClick to Image :-
- Start a fresh React Native project. If you don’t know how then read my this tutorial.
- Add Image, StyleSheet, View and TouchableOpacity component in import block.
- Create folder for image inside your project’s folder and put your image in it.
- Add View tag in render’s return block.
- Add TouchableOpacity in render’s return block inside View tag.
- Add Image tag inside TouchableOpacity block.
- Create function inside your Main class named as callFun .
- Add activeOpacity and onPress on TouchableOpacity.
- Calling callFun function on onPress on TouchableOpacity.
- Add Source attribute in Image tag and Assign image path using require.
- Create StyleSheet just above the AppRegistry.registerComponent line.
- Inside StyleSheet create two styles Container for complete View and BorderClass for Image.
- Call css class into both View and Image tag.
- Complete Source Code.
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add Image, StyleSheet, View and TouchableOpacity component in import block.
|
1
2
3
|
import {
AppRegistry, Image, StyleSheet, View, TouchableOpacity
} from ‘react-native’;
|
3. Create folder for image inside your project’s folder and put your image in it.
- Open your project folder for example my project name is Myproject -> Create a folder inside your project folder like i did in below screenshot name as images.
- Place your image inside images folder.
4. Add View tag in render’s return block.
|
1
2
3
4
5
6
7
8
9
|
render() {
return (
<View>
</View>
);
}
|
5. Add TouchableOpacity in render’s return block inside View tag.
|
1
2
3
4
5
6
|
<View>
<TouchableOpacity>
</TouchableOpacity>
</View>
|
6. Add Image tag inside TouchableOpacity block.
|
1
2
3
4
5
6
7
8
9
10
|
<View>
<TouchableOpacity>
<Image>
</Image>
</TouchableOpacity>
</View>
|
7. Create function inside your Main class named as callFun .
|
1
2
3
4
5
6
7
|
// Binding function with this class.
callFun = () =>
{
alert(“Image Clicked!!!”);
}
|
8. Add activeOpacity and onPress on TouchableOpacity.
|
1
2
3
4
5
6
7
8
9
10
11
|
<View>
<TouchableOpacity activeOpacity = { .5 } onPress={ }>
<Image>
</Image>
</TouchableOpacity>
</View>
|
9. Calling callFun function on onPress on TouchableOpacity.
|
1
2
3
4
5
6
7
8
9
10
|
<View>
<TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }>
<Image>
</Image>
</TouchableOpacity>
</View>
|
10. Add Source attribute in Image tag and Assign image path using require.
|
1
2
3
4
5
6
7
8
|
<View>
<TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }>
<Image source={require(‘./images/sample_image_button.png’)} />
</TouchableOpacity>
</View>
|
11. Create StyleSheet just above the AppRegistry.registerComponent line.
|
1
2
3
4
5
|
const styles = StyleSheet.create(
{
});
|
12. Inside StyleSheet create two styles Container for complete View and ImageClass for Image.
|
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
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
// Set content’s vertical alignment.
justifyContent: ‘center’,
// Set content’s horizontal alignment.
alignItems: ‘center’,
backgroundColor: ‘#FFF8E1’,
},
ImageClass:
{
// Setting up image width.
width: 250,
// Setting up image height.
height: 44
}
});
|
13. Call css class into both View and Image tag.
|
1
2
3
4
5
6
7
8
|
<View style = {styles.MainContainer}>
<TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }>
<Image source={require(‘./images/sample_image_button.png’)} style = {styles.ImageClass} />
</TouchableOpacity>
</View>
|
14. Complete Source Code for index.android.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
|
import React, { Component } from ‘react’;
import {
AppRegistry, Image, StyleSheet, View, TouchableOpacity
} from ‘react-native’;
export default class Myproject extends Component {
// Binding function with this class.
callFun = () =>
{
alert(“Image Clicked!!!”);
}
render() {
return (
<View style = {styles.MainContainer}>
<TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }>
<Image source={require(‘./images/sample_image_button.png’)} style = {styles.ImageClass} />
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
// Set content’s vertical alignment.
justifyContent: ‘center’,
// Set content’s horizontal alignment.
alignItems: ‘center’,
backgroundColor: ‘#FFF8E1’,
},
ImageClass:
{
// Setting up image width.
width: 250,
// Setting up image height.
height: 44
}
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshots:
Also Read :
React Native Detect App is in Background or Foreground using AppState
React Native Create Custom Rectangle Square Shape View Dynamically
React Native KeyboardAvoidingView with TextInput Example Tutorial
React Native Creating Card View in Android iOS App Example Tutorial
React Navigation 5.x Call External JS Screen Files in App.js File React Native
