1.0.5 โ€ข Published 6 months ago

react-native-simple-calculator v1.0.5

Weekly downloads
-
License
ISC
Repository
github
Last release
6 months ago

๐Ÿ“ฑ 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 NameTypeDefaultDescription
displayValuestring"0"Provide your initial value to the Calculator component.
updateDisplayValue(val: string) => voidundefinedFunction 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
1.0.5

6 months ago

1.0.4

6 months ago

1.0.3

6 months ago

1.0.2

6 months ago

1.0.1

6 months ago

1.0.0

6 months ago