react native with expo addition of two numbers using 3 textinput 2 style class and function
commands
expo init myadd2num
cd myadd2num
npm start
press a for running on android emulator expo go
------------------------------------------------
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View,Button,TextInput } from 'react-native';
//import { TextInput } from 'react-native-web';
import { Component } from 'react/cjs/react.production.min';
export default class App extends Component {
constructor(props){
super(props);
this.state = {
number1 : 0,
number2 : 0,
result : 0
}
}
sum=()=>{
var x=parseInt(this.state.number1);
var y=parseInt(this.state.number2);
var z=x+y;
// this.setState({result : parseInt(this.state.number1) + parseInt(this.state.number2) });
this.setState({ result: z })
//alert(z);
}
render()
{
return (
<View style={styles.container}>
<Text>hello</Text>
<TextInput style={styles.tinp} placeholder='first number' onChangeText={number1=>this.setState(({number1}))}/>
<TextInput style={styles.tinp} placeholder='second number' onChangeText={number2=>this.setState(({number2}))}/>
<TextInput style={styles.tinp} placeholder='third number' value={this.state.result.toString()} readonly/>
<Button title="sum" onPress={this.sum}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
tinp:{
borderColor: '#9a73ef',
borderWidth: 1,
}
});
--------------------------------------------------------------------
second style
import React, { useState } from 'react';
import { StyleSheet, View, Button, Alert, TextInput, Image, Input } from 'react-native';
export default function App() {
const [number1, setNumber1] = useState(0);
const [number2, setNumber2] = useState(0);
const [number3, setNumber3]=useState("");
const [total, setTotal] = useState(number1 + number2);
function addTogether() {
const newTotal = number1 + number2;
Alert.alert('Alert', 'ans2: ' + newTotal); // total has the old value in the render
setNumber3('hi'+newTotal);
}
return (
<View style={styles.container}>
<TextInput
type="number" style={styles.input}
placeholder="0"
value={number1}
onChangeText={v => {
setNumber1(Number.parseInt(v)); // Use parsed value from onChangeText
}}
/>
<TextInput
type="number" style={styles.input}
placeholder="0"
value={number2}
onChange={e => {
setNumber2(Number.parseInt(e.nativeEvent.text)); // or get correct value from nativeEvent onChange
}}
/>
<TextInput
type="number" style={styles.input}
placeholder="0"
value={number3}
onChange={e => {
setNumber3(Number.parseInt(e.nativeEvent.text)); // or get correct value from nativeEvent onChange
}}
/>
<Button onPress={addTogether} title="Show output" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-evenly',
},
image: {
width: 250,
height: 100,
},
input: {
width: 200,
borderColor: 'gray',
backgroundColor:'white',
borderWidth: 2,
color: 'red',
bold: {fontWeight: 'bold'},
},
});
output
https://blog.logrocket.com/complete-guide-textinput-react-native/