This tutorial is very important for react native beginners who wish to create calculator application. Because in this tutorial we would going to create a react native application which would find Calculate Square Cube and Square Root Cube Root of a given number inside TextInput on button click and show the result using Alert dialog.
Contents in this project Calculate Square Cube and Square Root Cube Root using React Native App :
1. Import StyleSheet, Alert, TextInput, View and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Alert, TextInput, View, Button } from ‘react-native’;
|
2. Create constructor() in your class and inside it we would create a State named as Holder. This state is used to store the TextInput entered value.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(){
super();
this.state={
Holder : ”
}
}
|
3. Create a function named as FindSquare(). This function is used to find and show Square of any entered value using Math.pow(Value_1, Value_2) function. This function would automatically return the Value_1 the number Power of Value_2(Value_1 * Value_1)
|
1
2
3
4
5
6
7
8
9
|
FindSquare=()=>{
var A = this.state.Holder ;
var B = Math.pow(A, 2);
Alert.alert(“Square = “ + B.toString());
}
|
4. Create a function named as FindCube(). This function would calculate the Cube of given number using Math.pow(Value_1, Value_2) function (Value_1 * Value_1 * Value_1).
|
1
2
3
4
5
6
7
8
9
|
FindCube=()=>{
var A = this.state.Holder ;
var B = Math.pow(A, 3);
Alert.alert(“Cube = “ + B.toString());
}
|
5. Create a function named as FindSquareRoot(). This function would calculate Square Root of given value using Math.sqrt(Value) function.
|
1
2
3
4
5
6
7
8
9
|
FindSquareRoot=()=>{
var A = this.state.Holder ;
var B = Math.sqrt(A)
Alert.alert(“SquareRoot = “ + B.toString());
}
|
6. Create a function named as FindCubeRoot(). This function would show us the Cube Root of given value using Math.cbrt(Value).
|
1
2
3
4
5
6
7
8
9
|
FindCubeRoot=()=>{
var A = this.state.Holder ;
var B = Math.cbrt(A)
Alert.alert(“CubeRoot = “ + B.toString());
}
|
7. Create a Root View in render’s return block . This View is used to show TextInput component and All 4 buttons. Now we would Add A TextInput and 4 Button component in this view. We would call each function on each button onPress event.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Value here”
keyboardType={‘numeric’}
onChangeText={ TextInputValue => this.setState({ Holder : TextInputValue }) }
style={styles.TextInputStyle}
/>
<View style={{marginTop: 5}}>
<Button title=” Find Square Of Given Number “ onPress={this.FindSquare} />
</View>
<View style={{marginTop: 5}}>
<Button title=” Find Cube Of Given Number “ onPress={this.FindCube} />
</View>
<View style={{marginTop: 5}}>
<Button title=” Find Square Root Of Given Number “ onPress={this.FindSquareRoot} />
</View>
<View style={{marginTop: 5}}>
<Button title=” Find Cube Root Of Given Number “ onPress={this.FindCubeRoot} />
</View>
</View>
);
}
|
8. Create Style Classes .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
margin: 20
},
TextInputStyle:{
textAlign: ‘center’,
height: 50,
width: ‘95%’,
marginBottom: 10
},
});
|
9. 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
import React, { Component } from ‘react’;
import { StyleSheet, Alert, TextInput, View, Button } from ‘react-native’;
export default class App extends Component<{}> {
constructor(){
super();
this.state={
Holder : ”
}
}
FindSquare=()=>{
var A = this.state.Holder ;
var B = Math.pow(A, 2);
Alert.alert(“Square = “ + B.toString());
}
FindCube=()=>{
var A = this.state.Holder ;
var B = Math.pow(A, 3);
Alert.alert(“Cube = “ + B.toString());
}
FindSquareRoot=()=>{
var A = this.state.Holder ;
var B = Math.sqrt(A)
Alert.alert(“SquareRoot = “ + B.toString());
}
FindCubeRoot=()=>{
var A = this.state.Holder ;
var B = Math.cbrt(A)
Alert.alert(“CubeRoot = “ + B.toString());
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Value here”
keyboardType={‘numeric’}
onChangeText={ TextInputValue => this.setState({ Holder : TextInputValue }) }
style={styles.TextInputStyle}
/>
<View style={{marginTop: 5}}>
<Button title=” Find Square Of Given Number “ onPress={this.FindSquare} />
</View>
<View style={{marginTop: 5}}>
<Button title=” Find Cube Of Given Number “ onPress={this.FindCube} />
</View>
<View style={{marginTop: 5}}>
<Button title=” Find Square Root Of Given Number “ onPress={this.FindSquareRoot} />
</View>
<View style={{marginTop: 5}}>
<Button title=” Find Cube Root Of Given Number “ onPress={this.FindCubeRoot} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
margin: 20
},
TextInputStyle:{
textAlign: ‘center’,
height: 50,
width: ‘95%’,
marginBottom: 10
},
});
|
Screenshot in android device :
Screenshot in iOS device :
Also Read :
React Native open website URL in default browser iOS Android Example
React Native Material Design Button Android iOS Example Tutorial
React Native Create Ellipsis Clipped Text in React Native iOS Android
Add Rounded Corners Border to Text Component in React Native iOS Android
React Native Enable Disable TextInput Programmatically Android iOS
