react-native-calculator
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.2 • Public • Published

    React Native Calculator

    npm version build status

    Simple react native calculator and calculator input component.

    Installation

    Using npm:

    npm i -S react-native-calculator
    

    or yarn:

    yarn add react-native-calculator
    

    Demo

    Calculator Component

    react-native-gifted-chat react-native-gifted-chat

    Usage

    import React from 'react'
    import { View } from 'react-native'
    import { Calculator } from 'react-native-calculator'
     
    export default class App extends React.Component {
      render() {
        return (
          <View style={{ flex: 1 }}>
            <Calculator style={{ flex: 1 }} />
          </View>
        )
      }
    }

    Props

    All props in common props and...

    Prop Name Data Type Default Value Description
    hasAcceptButton boolean false Show accept button after calculate.
    style ViewStyle Container style.
    onCalc (value : number , text : string ) => void Calculate button click event.
    onAccept (value : number , text : string ) => void Accept button click event.
    hideDisplay boolean false Hide display text field.

    Calculator Input Component

    react-native-gifted-chat

    Usage

    import React from 'react'
    import { View } from 'react-native'
    import { CalculatorInput } from 'react-native-calculator'
     
    export default class App extends React.Component {
      render() {
        return (
          <View>
            <CalculatorInput
              fieldTextStyle={{ fontSize: 24 }}
              fieldContainerStyle={{ height: 36 }}
            />
          </View>
        )
      }
    }

    Props

    All props in common props and...

    Prop Name Data Type Default Value Description
    modalAnimationType 'none' 'slide' 'fade'
    modalBackdropStyle ViewStyle Style of modal backdrop.
    fieldContainerStyle ViewStyle Text field container style.
    fieldTextStyle TextStyle Text style.
    onChange (value : number , text : string ) => void Value change event.
    prefix string Prefix.
    suffix string Suffix.
    onBeforeChange (value : number , text : string ) => boolean Called before changes applied. Return true if changes are accepted.
    onBeforeChangeAsync (value : number , text : string ) => Promise<boolean> Called asynchronously before changes applied. Resolve with true if changes are accepted.

    Common Props

    Prop Name Data Type Default Value Description
    decimalSeparator string . Decimal separator sign.
    thousandSeparator string , Thousand separator sign.
    numericButtonBackgroundColor string #ffffff Numeric button background color.
    numericButtonColor string #aaaaaa Numeric text button color.
    actionButtonBackgroundColor string #e7e5e3 Action button background color.
    actionButtonColor string #000000 Action text button color.
    calcButtonBackgroundColor string #ff8d00 Calculate button background color.
    calcButtonColor string #ffffff Calculator text button color.
    acceptButtonBackgroundColor string #14CC60 Accept button background color.
    acceptButtonColor string #ffffff Accept text button color.
    displayBackgroundColor string #ffffff Digit display background color.
    displayColor string #000000 Digit display text color.
    borderColor string #52525B Border color.
    fontSize number 18 Button text font size.
    value number 0 Initial value.
    width number (auto) Calculator component width.
    height number (auto) Calculator component height.
    displayHeight number (auto) Digit display container height.
    keyboardHeight number (auto) Keyboard container height.
    onTextChange (text: string) => void Text change event.
    displayTextAlign "auto" / "left" / "right" / "center" / "justify" "left" Digit align display.
    noDecimal boolean false Hide decimal separator button to disable decimal value.
    roundTo number 2 How many decimal places to round the value

    License

    MIT

    Install

    npm i react-native-calculator

    DownloadsWeekly Downloads

    306

    Version

    0.5.2

    License

    MIT

    Unpacked Size

    81.7 kB

    Total Files

    23

    Last publish

    Collaborators

    • budiadiono