This is what we are going to require in terms of React and React Native
React Native + .63
React 16+
If you haven’t worked with RN before, I suggest you follow the guide below to get you up to speed. Remember to do it with react-native cli since we are not using expo this time. Also make sure you select the right OS.
https://reactnative.dev/docs/environment-setup
Here’s what you’ll need:
- node 8+
- [Homebrew](https://brew.sh/)
- [Watchman](https://facebook.github.io/watchman)
- Xcode
- Android Studio
- CocoaPods
If you need any further help or a closer look into this, the repo for this implementation is available here: https://github.com/c3sarr0driguez/rn_basic_calculator
Let’s get started.
npx react-native init {ProjectName} && cd {ProjectName}
Example:
npx react-native init BasicCalculator && cd BasicCalculator
After this, we are going to follow best practices and start building. First, we need a folder structure like this:
This is what we are going to build today.
## Folder Structure
src | |_ assets |_ components |_text... |_calcButton... |_ pages | |_main |_ utils | |_constants | |_styles |_contexts
<strong> Since this is a technical tutorial, I won’t spend time explaining styling. But, I will include them in this exercise. </strong>
We are going to use yarn to install dependencies
First we are going to integrate everything speaking about developer environment
To have a good linter we need to install
yarn add --dev eslint prettier @react-native-community/eslint-config
And then add to your eslint config (`.eslintrc`, or `eslintConfig` field in `package.json`):
{
"extends": "@react-native-community",
"settings": {
"import/resolver": {
"babel-module": {}
}
},
}
this will install prettier and eslint configurations so you can be now able to detect issues and code styling issues in your code , for this step we are going to include then
{
"scripts": {
...
"lint": "eslint ./src"
}
}
After that we are going to install babel module resolver to make absolute imports in our project
yarn add –dev eslint-plugin-import eslint-import-resolver-babel-module
babel-plugin-module-resolver
and compliment your `.babelrc`or `babel.config.js` with
{
"plugins": [
["module-resolver", {
"root": ["./src"],
}]
]
}
Finally for the development you will add the proper config for our editor to visualize the imports correctly by adding a file ‘jsconfig.json’ With the following content
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["src/*"]
}
}
}
Before we start, we are going to install the libs we missed
responsive 'yarn add react-native-responsive-screen'
# Hands on
We are going to first add a screen to pages under the name of main.js and the style file main.styles.js with empty content
pages |__main |__main.js |__main.styles.js ```
### App.js
import React from 'react';
import Main from 'screens/main/main';
function App() {
return (
<Main/>
);
}
export default App;
### Components
We are going to start developing our shared(universal components) which are text calcButton and mainButton
### Important!
All components we are going to build will have more or less the very same structure. If our styles are complex to add, we need to abstract that separation of concern into a separate function. For example, let’s say that you have a button component that you need to have different behaviors through properties:
const SIZE = {
SM: 'sm',
MD: 'md',
}
const STYLE = {
BOLD: 'bold',
ITALIC: 'italic',
UPPERCASE: 'uppercase',
}
const VARIANT = {
PRIMARY: 'primary',
SECONDARY: 'secondary',
SOMETHING: 'something',
}
This is how we should abstract all the logic. Otherwise, the button will be hard to read. So, this hypothetic function should deliver all the styles compounded. If you have a complex component with subcomponents that can be themselves customized, then you should not deliver just one compounded object but several like
componentStyles = {
text: textStyles,
button: buttonStyles
}
return componentStyles
Then assign this to the right components
Let’s take the following function
function mapStateAndPropsToStyles({color, textColor, style}) {
const componentStyles = [styles.calcButton];
if (color) {
componentStyles.push({backgroundColor: color});
}
if (textColor) {
componentStyles.push({color: textColor});
}
if (style) {
if (Array.isArray(style)) {
componentStyles.push(...style);
} else {
componentStyles.push(style);
}
}
return componentStyles;
}
So, as we can see, we start assigning the baseStyles.
`const componentStyles = [styles.calcButton];`
If you are going to have more stuff like the variants we mentioned earlier, you can make use of optionalParameters. With this, you can set a default value and have assurance that your style will have all the properties you want (may not be explicit)
Let’s say
function mapStateAndPropsToStyle({variant=VARIANT.PRIMARY, size=SIZE.MD}) {
...
}
Or, you can use defaultProps to do the same thing.
So, remember that all of our components will use the same technique.
Finally, all of our components may or may not have a drill props function in case we are aliasing or controlling how children components behave. Let’s say that under our button we have a text that has its own properties like size and color variants because we have 3 different combination of variables that we do not want our users to experiment with, at least not freely due to style concerns or requirements. Then we are going to have another abstraction of those to decorator that ask for a property.
Let’s say
const TEXT_VARIANT = {
PRIMARY: 'FIRST',
SECONDARY: 'SECONDARY'
}
Let’s suppose now that the first variant will have
* size sm
* variant bold
* color white
You see the problem?
This is why we are going to map our state/props to text props, to control the text children
function drillProps({variant}) {
if(variant === VARIANTS.PRIMARY) {
return {
color: 'red',
size: 'md'
};
} else if() {
return {
color: 'blue',
size: 'sm'
};
} else {
throw TypeError(`Not implemented variant ${variant}`
}
}
So, let’s recap.
Since the structure of all of these components is the very same, we are not going to explain any more about these capabilities.
We have a function to translate state and props to complex styles that could return one object for the root component, and if needed more to be mapped to several components
‘function mapStateAndPropsToStyles’
The function to decorate other component’s through an interface that will take control over the children elements but will expose certain functionalities to change the content like inner text
‘function drillDownStateAndProps’
Do not get stuck with the names, just be consistent.
###CalcButton.js
function CalcButton({
color,
textColor,
onPress,
children,
textProps = {},
style,
}) {
return (
<TouchableOpacity
onPress={onPress}
style={mapStateAndPropsToStyles({
color,
textColor,
style,
})}>
<Text {...drillsDownStateAndprops({textColor})} {...textProps}>
{children}
</Text>
</TouchableOpacity>
);
}
Simple right?
We are making use of ‘drillsDownStateAndprops’ and ‘mapStateAndPropsToStyles’ as we discussed. So, this is the complete code.
// libs
import React, {useContext, memo} from 'react';
import PropTypes from 'prop-types';
import {TouchableOpacity} from 'react-native';
import Text from 'components/text';
import ThemeContext from 'contexts/themes';
// styles
import styles from './calcButton.styles';
function mapStateAndPropsToStyles({color, textColor, style}) {
const componentStyles = [styles.calcButton];
if (color) {
componentStyles.push({backgroundColor: color});
}
if (textColor) {
componentStyles.push({color: textColor});
}
if (style) {
if (Array.isArray(style)) {
componentStyles.push(...style);
} else {
componentStyles.push(style);
}
}
return componentStyles;
}
function drillDownStateAndProps({textColor}) {
return {
color: textColor,
};
}
function CalcButton(color,
textColor,
onPress,
children,
textProps = {},
style) {
return (
<TouchableOpacity
onPress={onPress}
style={mapStateAndPropsToStyles({
color,
textColor,
style,
})}>
<Text {...drillDownStateAndProps({textColor})} {...textProps}>
{children}
</Text>
</TouchableOpacity>
);
}
// We make use of proptypes to provide a strong component signature
CalcButton.propTypes = {
onPress: PropTypes.func,
textColor: PropTypes.string,
textProps: PropTypes.object,
color: PropTypes.string,
style: PropTypes.oneOfType([
PropTypes.number,
PropTypes.object,
PropTypes.arrayOf(PropTypes.number),
PropTypes.arrayOf(PropTypes.object),
]),
};
export default memo(CalcButton);
### CalcButton.styles.js
import {StyleSheet} from 'react-native';
import {COLOR} from 'utils/styles';
const baseStyles = {
calcButton: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
color: COLOR.BLACK,
},
};
const styles = StyleSheet.create(baseStyles);
export default styles;
Let´s move on with next component common text
Text.js
import React from 'react';
import PropTypes from 'prop-types';
import {Text, TextPropTypes} from 'react-native';
import {COLOR} from 'utils/styles';
import styles from './text.styles';
function mapStateAndPropsToStyle({size, color}) {
const componentStyles = [styles.text];
if (size && styles[size]) {
componentStyles.push(styles[size]);
}
if (color) {
componentStyles.push({color});
}
return componentStyles;
}
export default function CalcText({size, color, children, ...rest}) {
return (
<Text {...rest} style={mapStateAndPropsToStyle({size, color})}>
{children}
</Text>
);
}
CalcText.propTypes = {
...TextPropTypes,
size: PropTypes.string,
};
CalcText.defaultProps = {
size: 'md',
color: COLOR.BLACK,
};
Let’s summarize. We again make use of the function masStateAndPropsToStyle to calculate dynamic styles.
Besides that, everything else is self explanatory. One more thing we did is that we supplied defaultProps to have a default behavior in case the developer delivers a plain props object.
### Text.styles.js
import {StyleSheet} from 'react-native';
import {widthPercentageToDP as wp} from 'react-native-responsive-screen';
const baseStyles = {
text: {
fontFamily: 'Audiowide-Regular',
},
xs: {
fontSize: wp(2),
},
sm: {
fontSize: wp(4),
},
md: {
fontSize: wp(6),
},
lg: {
fontSize: wp(8),
},
};
const styles = StyleSheet.create(baseStyles);
export default styles;
Finally, let’s start with mainButton.js
This is the very same as our normal button but, a gradient version of it, Since gradient has no support, by default we are going to install another dependency.
'yarn add react-native-linear-gradient
Please do not forget to follow this tutorial for a good installation https://github.com/react-native-community/react-native-linear-gradient
For ‘iOS’, it is as simple as run ‘npx pod-install ios’ but for ‘android’ it is more complex. Remember that in this version of rn you are no longer required to add the pod line. rn will take care of it dynamically. However, if you are using a lower version please make sure you add the pod line in podfile.
Now,
### mainButton.js
import React, {useContext} from 'react';
import {TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';
import LinearGradient from 'react-native-linear-gradient';
import Text from 'components/text';
import ThemeContext from 'contexts/themes';
import styles from './mainButton.styles';
function mapStateAndPropsToStyles({style, linearGradientStyle}) {
const componentStyles = {
mainButton: [styles.mainButton],
linearGradient: [styles.linearGradient],
};
if (style) {
if (Array.isArray(style)) {
componentStyles.mainButton.push(...style);
} else {
componentStyles.mainButton.push(style);
}
}
if (linearGradientStyle) {
if (Array.isArray(linearGradientStyle)) {
componentStyles.linearGradient.push(...linearGradientStyle);
} else {
componentStyles.linearGradient.push(linearGradientStyle);
}
}
return componentStyles;
}
function drillProps({textColor}) {
return {
color: textColor,
};
}
function MainButton(props) {
const [theme] = useContext(ThemeContext);
const {mainButton: themeMainButtonProps = {}} = theme;
const mixedProps = {...themeMainButtonProps, ...props};
const {
colors,
textColor,
onPress,
children,
textProps = {},
style,
} = mixedProps;
const {
mainButton: mainButtonStyle,
linearGradient: linearGradientStyle,
} = mapStateAndPropsToStyles({style});
return (
<TouchableOpacity style={mainButtonStyle} onPress={onPress}>
<LinearGradient colors={colors} style={linearGradientStyle}>
<Text {...drillProps({textColor})} {...textProps}>
{children}
</Text>
</LinearGradient>
</TouchableOpacity>
);
}
MainButton.propTypes = {
onPress: PropTypes.func,
textColor: PropTypes.string,
textProps: PropTypes.object,
colors: PropTypes.arrayOf(PropTypes.string),
style: PropTypes.oneOfType([
PropTypes.number,
PropTypes.object,
PropTypes.arrayOf(PropTypes.number),
PropTypes.arrayOf(PropTypes.object),
]),
linearGradientStyle: PropTypes.oneOfType([
PropTypes.number,
PropTypes.object,
PropTypes.arrayOf(PropTypes.number),
PropTypes.arrayOf(PropTypes.object),
]),
};
export default MainButton;
Nothing else to explain ver implementation other than the components
### mainButton.styles.js
import {StyleSheet} from 'react-native';
const baseStyles = {
mainButton: {
flex: 1,
},
linearGradient: {
height: '100%',
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
};
const styles = StyleSheet.create(baseStyles);
export default styles;
Now we are at the fun part. Let’s analyse how we are going to do the hard part. We are going to have a data structure like this:
{
left: '9',
op: '*',
right: '4324'
}
A binary structure, if this was another languages other than js we could add an operator overload to achieve what we want, since operators are binary operators like 9 * 8, or 7 / 2
So we are going to always have a left value, our initial would be 0. If the user clicks something that is a number, we will be adding
entries to that number, because it is zero. Since it has no value we will replace it for the first digit. Notice that ‘.’counts as a new digit and cannot be set twice.
For example
If user presses 9, then 8, then ‘.’ ,and then 9 again.
We will be
* replacing 0 by 9
* adding 8
* adding .
* adding 9
* and ignoring ‘.’
<strong><em>However, we need to make sure we are writing on the right side. Are on the left side or on the right side???</em></strong>
To answer this question is going to be simple. We only need to check if the operator is set. We need to write on the right side or on the left operator.
So let’s start.
This is the react tree structure:
function debug() {
return JSON.stringify({left, op, right}, null, '\t');
}
const {
mainScreen: mainScreenStyles,
lowerContainer: lowerContainerStyles,
} = mapStateAndPropsToStyles({
style,
lowerContainerStyle,
});
<View style={mainScreenStyles}>
<View style={styles.upperContainer}>
{/* <View>
<Text>{debug()}</Text>
</View> */}
</View>
<Text size="lg">{right || left}</Text>
<View style={lowerContainerStyles}>
<View style={styles.row}>
<Button onPress={() => restart(0)}>C</Button>
<Button onPress={() => handlePressSwitchSign()}>+/-</Button>
<Button onPress={() => handlePressPercentage()}>%</Button>
<Button onPress={() => handlePressOp('/')}>/</Button>
</View>
<View style={styles.row}>
<Button onPress={() => handlePressDigit('7')}>7</Button>
<Button onPress={() => handlePressDigit('8')}>8</Button>
<Button onPress={() => handlePressDigit('9')}>9</Button>
<Button onPress={() => handlePressOp('*')}>x</Button>
</View>
<View style={styles.row}>
<Button onPress={() => handlePressDigit('4')}>4</Button>
<Button onPress={() => handlePressDigit('5')}>5</Button>
<Button onPress={() => handlePressDigit('6')}>6</Button>
<Button onPress={() => handlePressOp('+')}>
+
</Button>
</View>
<View style={styles.row}>
<Button onPress={() => handlePressDigit('1')}>1</Button>
<Button onPress={() => handlePressDigit('2')}>2</Button>
<Button onPress={() => handlePressDigit('3')}>3</Button>
<Button onPress={() => handlePressOp('-')}>
-
</Button>
</View>
<View style={styles.row}>
<Button onPress={() => handlePressDigit('0')}>
0
</Button>
<Button onPress={() => handlePressDigit('.')}
.
</Button>
<MainButton style={styles.mainButton} onPress={equal}>
=
</MainButton>
</View>
</View>
</View>
We can uncomment the debug piece so all the time you will be able to see the behavior of our state <strong><em>which is skipped for brevity</em></strong>
So, this is what we will see at all times.
left: ‘0’,
op: null,
right: null,
lastOp: null,
Notice the <strong><em>lastOp</em></strong> function. This is important since we are going to use that to repeat operations if the user keeps pressing ‘=’
Let’s suppose the user clicks 5 then + then 5 then =, and from there =, =
That way the first operation performed + 5 will be added to the result every time.
### Important!!!
Since we are going to present all data in calculator to the user, we always need to convert our results to string. That way, any entry can be concatenated.
So, let’s start with the function of numbers and the dot:
### handlePressDigit Method
function handlePressDigit(digit) {
const newState = {};
if (op) {
if (right === '0' && digit === '0') {
return;
}
const isDot = digit === '.';
if (isDot && right && right.indexOf('.') !== -1) {
return;
}
newState.right =
right === '0' || !right ? (isDot ? '0.' : digit) : `${right}${digit}`;
} else {
if (left === '0' && digit === '0') {
return;
}
if (digit === '.' && left.indexOf('.') !== -1) {
return;
}
newState.left =
left === '0' || !left ? (isDot ? '0.' : digit) : `${left}${digit}`;
}
// mix between prevstate and new state
setState((prevState) => ({
...prevState,
...newState,
}));
}
We start with a new empty state, from where we are going to prepare. If left side is already taken, we know the op value otherwise it means that we are on the left side. If the digit is zero and we have zero or is a dot and we already have a dot we are going to escape. If not we have two courses of action:
if current side (left or right accordingly) is empty
- then check if is dot
- will be `0.` something
else
will replace the 0/null for the digit in question
else
will add at the end the new digit `${left}${digit}`;
So far so good. We are almost done. The other important thing will be the calculations. This is more complex, so pay attention. We are close to end.
Lets pass to operators
### handlePressOp Method
function handlePressOp(nextOp) {
let nextState = {};
if (op && right) {
const result = calc(left, op, right);
nextState = {
right: null,
left: result,
};
}
setState((prevState) => ({
...prevState,
...nextState,
op: nextOp,
}));
}
Operation can be one of ‘*’ ‘/’ ‘+’ ‘-‘
If left op already exists, We will proceed to make the calculation between left , op and right, meaning the result. For example:
9 * 9, otherwise it will only register the nextOp to perform, for example if you have
* left = 90 and no op
* then press `*`
* then press `+`
Nothing will happen , only we are going to change ‘*’ with ‘+’ as next operation. Remember that when op is set, you can start typing and whatever you start typing is going to be redirected to right, and if by chance you try ‘=’ or ‘*’ or any operator again <strong><em>you will end up doing the calculation, then empty right side and pass the result to left side, and so on and so forth</em></strong>
Let’s pass to calc method
### Calc Method
function calc(left, op, right) {
if (!left || !op || !right) {
return;
}
const maxDecimals =
(left.split('.')[1]?.length || 0) + (right?.split('.')[1]?.length || 0);
switch (op) {
case '*': {
return getRidOfRightZeroes(multiply(left, right, maxDecimals));
}
case '/': {
return getRidOfRightZeroes(divide(left, right, maxDecimals));
}
case '+': {
return getRidOfRightZeroes(add(left, right, maxDecimals));
}
case '-': {
return C(substract(left, right, maxDecimals));
}
default:
throw new Error(`${op} Not implemented`);
}
}
First we are going to check if we have everything we need to perform a calc which is ‘left’ , ‘op’ and ‘right’.
After that, since we are managing decimal operations we need to make sure we retrieve the right number of decimals. For this we are going to emulate our computer’s calculator behavior. Just Add both decimal numbers, left and right.
If we have
* 98089.9 * 89.10
then our max number of decimals is 3
Then we are going to check if operation is registered. If not, we throw an error and finally just get rid of the extra zeroes and perform the operation <strong><em>Remember what we discussed. All operations will convert to number perform operation’s and then get back to strings</em></strong>
Let’s say we have 59.09000
In that case we only care about 59.09 right? That is what the getRidOfRightZeroes does. Let’s take a closer look .
### getRidOfRightZeroes Method
function getRidOfRightZeroes(result) {
const [, decimals] = result.split('.');
if (!decimals) {
return result;
}
let charsToRemove = 0;
const len = result.length - 1;
for (let i = len; i > -1; i--) {
const lastChar = result[i];
if (lastChar === '0') {
charsToRemove++;
} else if (lastChar === '.') {
charsToRemove++;
break;
} else {
break;
}
}
if (!charsToRemove) {
return result;
}
return result.slice(0, -charsToRemove);
}
We are going to look for decimals. If not then return the same result.
But, if there are decimals, we sit at the right side and start moving to the left side until we hit a number other than 0 or .
If we have `89.00` then it will become `89`
Almost done. Let’s look at the operations implementation.
### Operations Methods
function divide(left, right, decimals = 0) {
if (left === '0' || right === '0') {
return '0';
}
return (+left / +right).toFixed(decimals);
}
function multiply(left, right, decimals = 0) {
if (left === '0' || right === '0') {
return '0';
}
return (+left * +right).toFixed(decimals);
}
function add(left, right, decimals = 0) {
return (+left + +right).toFixed(decimals);
}
function substract(left, right, decimals = 0) {
return (+left - +right).toFixed(decimals);
}
Just one thing to explain here: if we use the operator ‘+’ before any variable, it will try to convert to a number even when their is a negative number like ‘-89’ will be converted to ‘-89’
Last but not least, let’s examine the equal functionality.
function equal() {
let nextState = null;
if (op && right) {
nextState = {
left: calc(left, op, right),
right: null,
lastOp: {
op,
right,
},
};
} else if (lastOp) {
const {op, right} = lastOp;
nextState = {
left: calc(left, op, right),
right: null,
};
} else if (op) {
nextState = {
left: calc(left, op, left),
right: null,
lastOp: {
op,
right: left,
},
};
}
if (!nextState) {
return;
}
setState((prevState) => ({
...prevState,
...nextState,
}));
}
- First we are creating a ref to nextState
- If there is an op to perform, it is done by checking the presence of ‘right’ and ‘op’ same thing as operator handling. If those elements are present we proceed to calc and assign that to ‘left’ side and empty ‘right’ side
- But if there is a ‘lastOp’ registered, we go with that one.
- If their are none but there is a left value and an ‘op’ then we finally go with duplicating the left value to the right value and calculating
Full code for Main.js
import React, {useState, useEffect, useContext} from 'react';
import {View, TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';
import Button from 'components/calcButton';
import MainButton from 'components/mainButton';
import Text from 'components/text';
import {COLOR} from 'utils/styles';
import LinearGradient from 'react-native-linear-gradient';
import ThemeContext from 'contexts/themes';
import {THEME} from 'utils/themes';
import styles from './main.styles';
const INITIAL_STATE = {
history: [],
left: '0',
op: null,
right: null,
lastOp: null,
};
function mapStateAndPropsToStyles({isDarkish, style, lowerContainerStyle}) {
const componentStyles = {
lowerContainer: [styles.lowerContainer],
mainScreen: [styles.mainScreen],
};
if (isDarkish) {
componentStyles.lowerContainer.push(styles.darkish);
}
if (lowerContainerStyle) {
if (Array.isArray) {
componentStyles.lowerContainer.push(...style);
} else {
componentStyles.lowerContainer.push(style);
}
}
if (style) {
if (Array.isArray) {
componentStyles.mainScreen.push(...style);
} else {
componentStyles.mainScreen.push(style);
}
}
return componentStyles;
}
function MainScreen(props) {
const [theme, setTheme] = useContext(ThemeContext);
const {mainScreen: themeMainScreenProps = {}} = theme;
const [{left, op, right, history, lastOp}, setState] = useState(
INITIAL_STATE,
);
const mixedProps = {...themeMainScreenProps, ...props};
const {isDarkish, style, lowerContainerStyle} = mixedProps;
function calc(left, op, right) {
if (!left || !op || !right) {
return;
}
const maxDecimals =
(left.split('.')[1]?.length || 0) + (right?.split('.')[1]?.length || 0);
switch (op) {
case '*': {
return getRidOfRightZeroes(multiply(left, right, maxDecimals));
}
case '/': {
return getRidOfRightZeroes(divide(left, right, maxDecimals));
}
case '+': {
return getRidOfRightZeroes(add(left, right, maxDecimals));
}
case '-': {
return getRidOfRightZeroes(substract(left, right, maxDecimals));
}
default:
throw new Error(`${op} Not implemented`);
}
}
function handlePressDigit(digit) {
const newState = {};
const isDot = digit === '.';
if (op) {
if (right === '0' && digit === '0') {
return;
}
if (isDot && right && right.indexOf('.') !== -1) {
return;
}
newState.right =
right === '0' || !right ? (isDot ? '0.' : digit) : `${right}${digit}`;
} else {
if (left === '0' && digit === '0') {
return;
}
if (digit === '.' && left.indexOf('.') !== -1) {
return;
}
newState.left =
left === '0' || !left ? (isDot ? '0.' : digit) : `${left}${digit}`;
}
setState((prevState) => ({
...prevState,
...newState,
}));
}
function getRidOfRightZeroes(result) {
const [, decimals] = result.split('.');
if (!decimals) {
return result;
}
let charsToRemove = 0;
const len = result.length - 1;
for (let i = len; i > -1; i--) {
const lastChar = result[i];
if (lastChar === '0') {
charsToRemove++;
} else if (lastChar === '.') {
charsToRemove++;
break;
} else {
break;
}
}
if (!charsToRemove) {
return result;
}
return result.slice(0, -charsToRemove);
}
function divide(left, right, decimals = 0) {
if (left === '0' || right === '0') {
return '0';
}
return (+left / +right).toFixed(decimals);
}
function multiply(left, right, decimals = 0) {
if (left === '0' || right === '0') {
return '0';
}
return (+left * +right).toFixed(decimals);
}
function add(left, right, decimals = 0) {
return (+left + +right).toFixed(decimals);
}
function substract(left, right, decimals = 0) {
return (+left - +right).toFixed(decimals);
}
function restart(initialValue = '0') {
setState({
...INITIAL_STATE,
left: '' + initialValue,
});
}
function handlePressOp(nextOp) {
let nextState = {};
if (op && right) {
const result = calc(left, op, right);
nextState = {
right: null,
left: result,
history: [1],
};
}
setState((prevState) => ({
...prevState,
...nextState,
op: nextOp,
}));
}
function handlePressSwitchSign() {
const nextState = {};
if (op) {
if (right === '0') {
return;
}
nextState.right = right.startsWith('-') ? right.slice(1) : '-' + right;
} else {
if (left === '0') {
return;
}
nextState.left = left.startsWith('-') ? left.slice(1) : '-' + left;
}
setState((prevState) => ({
...prevState,
...nextState,
}));
}
function handlePressPercentage() {
const nextState = {};
if (op && right) {
nextState.right = `${+right / 100}`;
} else {
nextState.left = `${+left / 100}`;
}
setState((prevState) => ({
...prevState,
...nextState,
}));
}
function equal() {
let nextState = null;
if (op && right) {
nextState = {
left: calc(left, op, right),
right: null,
lastOp: {
op,
right,
},
};
} else if (lastOp) {
const {op, right} = lastOp;
nextState = {
left: calc(left, op, right),
right: null,
};
} else if (op) {
nextState = {
left: calc(left, op, left),
right: null,
lastOp: {
op,
right: left,
},
};
}
if (!nextState) {
return;
}
setState((prevState) => ({
...prevState,
...nextState,
}));
}
function debug() {
return JSON.stringify({left, op, right}, null, '\t');
}
function handlePressPinkishTheme() {
setTheme(THEME.PINKISH);
}
function handlePressGreenishTheme() {
setTheme(THEME.GREENISH);
}
const {
mainScreen: mainScreenStyles,
lowerContainer: lowerContainerStyles,
adornment: adornmentStyles,
} = mapStateAndPropsToStyles({
isDarkish,
style,
lowerContainerStyle,
});
return (
<View style={mainScreenStyles}>
<View style={styles.themesContainer}>
<TouchableOpacity onPress={handlePressPinkishTheme}>
<LinearGradient style={styles.theme} colors={COLOR.PINKISH} />
</TouchableOpacity>
<TouchableOpacity onPress={handlePressGreenishTheme}>
<LinearGradient style={styles.theme} colors={COLOR.GREENISH} />
</TouchableOpacity>
</View>
<View style={styles.upperContainer}>
{/* <View>
<Text>{debug()}</Text>
</View> */}
<View style={styles.historyContainer}>
{history.map((result, i) => {
return (
<Text
size="sm"
key={`${i}-${result}`}
onPress={() => restart(result)}>
{result}
</Text>
);
})}
</View>
<Text size="lg">{right || left}</Text>
<View style={adornmentStyles} />
</View>
<View style={lowerContainerStyles}>
<View style={styles.row}>
<Button onPress={() => restart(0)}>C</Button>
<Button onPress={() => handlePressSwitchSign()}>+/-</Button>
<Button onPress={() => handlePressPercentage()}>%</Button>
<Button onPress={() => handlePressOp('/')}>/</Button>
</View>
<View style={styles.row}>
<Button onPress={() => handlePressDigit('7')}>7</Button>
<Button onPress={() => handlePressDigit('8')}>8</Button>
<Button onPress={() => handlePressDigit('9')}>9</Button>
<Button onPress={() => handlePressOp('*')}>x</Button>
</View>
<View style={styles.row}>
<Button onPress={() => handlePressDigit('4')}>4</Button>
<Button onPress={() => handlePressDigit('5')}>5</Button>
<Button onPress={() => handlePressDigit('6')}>6</Button>
<Button onPress={() => handlePressOp('+')}>+</Button>
</View>
<View style={styles.row}>
<Button onPress={() => handlePressDigit('1')}>1</Button>
<Button onPress={() => handlePressDigit('2')}>2</Button>
<Button onPress={() => handlePressDigit('3')}>3</Button>
<Button onPress={() => handlePressOp('-')}>-</Button>
</View>
<View style={styles.row}>
<Button onPress={() => handlePressDigit('0')}>0</Button>
<Button onPress={() => handlePressDigit('.')}>.</Button>
<MainButton style={styles.mainButton} onPress={equal}>
=
</MainButton>
</View>
</View>
</View>
);
}
MainScreen.propTypes = {
style: PropTypes.oneOfType([
PropTypes.number,
PropTypes.object,
PropTypes.arrayOf(PropTypes.number),
PropTypes.arrayOf(PropTypes.object),
]),
lowerContainerStyle: PropTypes.oneOfType([
PropTypes.number,
PropTypes.object,
PropTypes.arrayOf(PropTypes.number),
PropTypes.arrayOf(PropTypes.object),
]),
};
export default MainScreen;
By – Cesar Rodriguez Chavez, Senior Software Engineer, DigitalOnUs
