React Native supports multiple classes format like we used in other programming languages like Java, C++, PHP etc. So in this tutorial we would going to create a react native application with multiple(2) classes and Call Another Class Function From Default Class on button onPress event.
Contents in this project Call Another Class Function From Default Class :
1. Import StyleSheet, View, Alert, Platform and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Alert, Platform, Button } from ‘react-native’;
|
2. Create another class named as Second and extends component to it. This class would be our another class. Now we would create 2 function in this class one function without argument and second function with argument. We would also print the Sample text in these functions using Alert message.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
class Second extends Component {
SecondClassFunction=()=>{
Alert.alert(“Second Class Function Without Argument Called”);
}
SecondClassFunctionWithArgument=(Value)=>{
Alert.alert(Value);
}
}
|
3. Create constructor in your project’s main class. For example my default class name is MyProject, so i am creating the constructor inside MyProject class. Inside this constructor we would create object of Second class named as Obj. Object is used to call the function from another class.
|
1
2
3
4
5
6
7
|
constructor(props) {
super(props)
Obj = new Second();
}
|
4. Create 2 Functions in your default class named as CallFunction_1 and CallFunction_2. We are calling the another class function using our main class functions using their object.
|
1
2
3
4
5
6
7
8
9
10
11
|
CallFunction_1=()=>{
Obj.SecondClassFunction() ;
}
CallFunction_2=()=>{
Obj.SecondClassFunctionWithArgument(“Hello Text”);
}
|
5. Create Root View with 2 Button component inside render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
render() {
return (
<View style={styles.MainContainer}>
<View style={{margin: 10}}>
<Button title=“Call Another Class Function Without Argument” onPress={this.CallFunction_1} />
</View>
<View style={{margin: 10}}>
<Button title=“Call Another Class Function With Argument” onPress={this.CallFunction_2} />
</View>
</View>
);
}
|
6. Create Style for Root View.
|
1
2
3
4
5
6
7
8
9
10
11
|
const styles = StyleSheet.create(
{
MainContainer: {
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
backgroundColor: ‘#F5FCFF’,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0
}
});
|
7. 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, Alert, Platform, Button } from ‘react-native’;
export default class MyProject extends Component {
constructor(props) {
super(props)
Obj = new Second();
}
CallFunction_1=()=>{
Obj.SecondClassFunction() ;
}
CallFunction_2=()=>{
Obj.SecondClassFunctionWithArgument(“Hello Text”);
}
render() {
return (
<View style={styles.MainContainer}>
<View style={{margin: 10}}>
<Button title=“Call Another Class Function Without Argument” onPress={this.CallFunction_1} />
</View>
<View style={{margin: 10}}>
<Button title=“Call Another Class Function With Argument” onPress={this.CallFunction_2} />
</View>
</View>
);
}
}
class Second extends Component {
SecondClassFunction=()=>{
Alert.alert(“Second Class Function Without Argument Called”);
}
SecondClassFunctionWithArgument=(Value)=>{
Alert.alert(Value);
}
}
const styles = StyleSheet.create(
{
MainContainer: {
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
backgroundColor: ‘#F5FCFF’,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0
}
});
|
Screenshots in Android device :
Screenshot in iOS device :
Also Read :
React Native Simple Modal Component iOS Android Example Tutorial
React Native JSON Parsing ListView From MySQL Database Android iOS
IF-Else & Nested IF-Else conditional statement in React Native example
React Native Show Image Icon Inside Activity Header Title Bar in React Navigation
React Native Set View Width Height in Fixed Dimensions Android iOS
