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 :
