Function also known as Method is a very important part of any Programming Language. Because using Functions developer can use break its code into Modules. Each module holds a different task and it reduce the code redundancy. So in this tutorial we would going to create a react native Android iOS app with 2 functions 1st is Function without Parameter, 2nd is Function with Parameter and we would Calling Function on Button onPress-onClick.
Contents in this project Creating & Calling Function From Same Class Tutorial :
1. Import StyleSheet, Text, View, Button, Alert components in your App.js file.
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button, Alert } from ‘react-native’;
|
2. Create a function named as SampleFunction1() in your project’s class. This function is Function Without Argument type function. We are just printing a Alert message in this function.
1
2
3
4
5
|
SampleFunction1(){
Alert.alert(“Function Without Argument”);
}
|
3. Create SampleFunction2() in your class. This function is Function With Argument type function and receives a argument(Value) send from calling time.You can set any name inside the brackets it will automatically get the value inside the variable. We are also printing the received value using Alert in this function.
1
2
3
4
5
|
SampleFunction2(StringHolder){
Alert.alert(StringHolder);
}
|
4. Create a Root View in render’s return block.
1
2
3
4
5
6
7
8
|
render() {
return (
<View style={styles.container}>
</View>
);
}
|
5. Create 1st Button in Root View and Call the SampleFunction1() on Button onPress.
The method to call the function is this.FunctionName.bind(this) ,Here bind tell us that this function belongs to our same class.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.container}>
<View style={{margin: 10}}>
<Button onPress={ this.SampleFunction1.bind(this) } title=” Click Here To Call Function – 1 “ />
</View>
</View>
);
}
|
6. Create 2nd Button in Root View and call the SampleFunction2() on Button onPress , Now pass any value as argument just after the this. You can also send multiple arguments on Function calling time.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
render() {
return (
<View style={styles.container}>
<View style={{margin: 10}}>
<Button onPress={ this.SampleFunction1.bind(this) } title=” Click Here To Call Function – 1 “ />
</View>
<View style={{margin: 10}}>
<Button onPress={ this.SampleFunction2.bind(this, “Function With Argument Text”) } title=” Click Here To Call Function – 2 “ />
</View>
</View>
);
}
|
7. Create CSS Style class :
1
2
3
4
5
6
7
8
|
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
margin: 10
}
});
|
8. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button, Alert } from ‘react-native’;
export default class App extends Component<{}> {
SampleFunction1(){
Alert.alert(“Function Without Argument”);
}
SampleFunction2(StringHolder){
Alert.alert(StringHolder);
}
render() {
return (
<View style={styles.container}>
<View style={{margin: 10}}>
<Button onPress={ this.SampleFunction1.bind(this) } title=” Click Here To Call Function – 1 “ />
</View>
<View style={{margin: 10}}>
<Button onPress={ this.SampleFunction2.bind(this, “Function With Argument Text”) } title=” Click Here To Call Function – 2 “ />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
margin: 10
}
});
|
Screenshots in Android mobile device :
Screenshot in iOS mobile device :