import {useState} from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {TextInput} from 'react-native-paper';
export default function App() {
const [screenText, setScreenText] = useState('');
return (
<View >
<TextInput value = {screenText}/>
<View style={{flexDirection:'row'}}>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'1')}>
<Text style = {styles.text}>1</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'2')}>
<Text style = {styles.text}>2</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'3')}>
<Text style = {styles.text}>3</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'4')}>
<Text style = {styles.text}>4</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row'}}>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'5')}>
<Text style = {styles.text}>5</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'6')}>
<Text style = {styles.text}>6</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'7')}>
<Text style = {styles.text}>7</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'8')}>
<Text style = {styles.text}>8</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row'}}>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'9')}>
<Text style = {styles.text}>9</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'.')}>
<Text style = {styles.text}>.</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'0')}>
<Text style = {styles.text}>0</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'+')}>
<Text style = {styles.text}>+</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row'}}>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'*')}>
<Text style = {styles.text}>*</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'/')}>
<Text style = {styles.text}>/</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(screenText+'-')}>
<Text style = {styles.text}>-</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => setScreenText(eval(screenText))}>
<Text style = {styles.text}>=</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: 'blue',
width: 70,
margin:5,
},
text: {
color: 'white'
}
});