// App.js
import React from 'react';
import {
View, Text,
StyleSheet, StatusBar
} from 'react-native';
import ScientificCalculator
from 'react-native-scientific-calculator';
const App = () => {
const onOperationPress = (operation) => {
console.log(`Operation pressed: ${operation}`);
};
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<View style={styles.header}>
<Text style={styles.title}>
???? Scientific Calculator
</Text>
</View>
<View style={styles.calculatorContainer}>
<ScientificCalculator
onOperationPress={onOperationPress}
theme={{
backgroundColor: '#ffffff',
primaryTextColor: '#333333',
secondaryTextColor: '#666666',
buttonBackgroundColor: '#61dafb',
buttonTextColor: '#ffffff',
}}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f0f0f0',
},
header: {
backgroundColor: '#90EE90',
paddingVertical: 20,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 28,
fontWeight: 'bold',
color: '#ffffff',
},
calculatorContainer: {
flex: 1,
margin: 10,
padding: 10,
borderRadius: 10,
backgroundColor: '#ffffff',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 3,
elevation: 5,
},
});
export default App;