React Native Calculator

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

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

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