Skip to content
React Native Calculator and Calculator Input Component
Branch: master
Clone or download
Latest commit b08161d Feb 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
example
src
.babelrc
.gitignore
.npmignore
.travis.yml travis ci Jun 12, 2018
README.md
package.json Release version 0.5.2 Feb 22, 2019
release.sh v0.0.1 Jun 12, 2018
tsconfig.json initial commit Jun 12, 2018
tslint.json initial commit Jun 12, 2018
yarn.lock

README.md

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

You can’t perform that action at this time.