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 :