1.0.5 โข Published 6 months ago
react-native-simple-calculator v1.0.5
๐ฑ react-native-simple-calculator
A simple and customizable calculator component for React Native that performs basic arithmetic operations.
Supports addition (+), subtraction (-), multiplication (*), and division (/) with a clean UI and customizable styling options.
๐ฆ Installation
For React Native CLI
npm install react-native-simple-calculator
or with Yarn:
yarn add react-native-simple-calculator
For Expo
expo install react-native-simple-calculator
Expo will install the compatible dependencies automatically.
๐ Usage Example
import { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { Calculator } from "react-native-simple-calculator";
export default function App() {
const [value, setValue] = useState<string>("");
return (
<View style={styles.container}>
<Text style={styles.value}>Value: {value}</Text>
<Calculator
displayValue={value}
updateDisplayValue={(val) => setValue(val)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
justifyContent: "center",
},
value: {
fontSize: 16,
marginVertical: 24,
fontWeight: "bold",
},
});
๐ฅ DEMO
๐จ Customization
You can customize the initial display value, button styles, and text styles.
๐น Available Props
Prop Name | Type | Default | Description |
---|---|---|---|
displayValue | string | "0" | Provide your initial value to the Calculator component. |
updateDisplayValue | (val: string) => void | undefined | Function executed when the result is calculated. |
buttonStyle? | ViewStyle \| ViewStyle[] | {} | Custom styles for calculator buttons. |
buttonTextStyle? | TextStyle \| TextStyle[] | {} | Custom styles for button text. |
๐ง Example with Custom Props
<Calculator
displayValue="10"
updateDisplayValue={(val) => console.log("New Result:", val)}
buttonStyle={{ backgroundColor: "#FF5733", borderRadius: 10 }}
buttonTextStyle={{ color: "#FFF", fontWeight: "bold" }}
/>
๐ก Compatibility
โ
React Native >=0.64.0
โ
React >=17.0.0
โ
Expo Support โ
๐ ๏ธ Development & Contribution
Feel free to open issues or contribute by creating a pull request.
To test the package locally:
git clone https://github.com/your-username/react-native-simple-calculator.git
cd react-native-simple-calculator
๐ License
This project is MIT Licensed.
You are free to use, modify, and distribute it.
โญ Support
If you find this package useful, please โญ star the repo to support the project!
๐ Links
๐ Summary
- โ Simple calculator for basic arithmetic (+, -, ร, รท)
- โ Fully customizable UI (theme, buttons, colors, styles)
- โ Works with React Native CLI & Expo
- โ Supports props for display value, result updates, and button styling