Navigate back to the homepage

how to add two numbers in react native?

Infinitbility
React Native
July 15th, 2022 · 1 min read
how to add two numbers in react native?

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To add two numbers in react native, use the + addition operator it will add if your value datatype is a number else if your value datatype is string first convert it using parseInt() and then perform addition operation.

In the following example, we will take the sample numbers, and strings and perform add operation using the + addition operator.

Adding Two numbers example

1let num1 = 30;
2let num2 = 34;
3
4num1 + num2; // 64

Adding Two string numbers example

1let num1 = "30";
2let num2 = "34";
3
4parseInt(num1) + parseInt(num2); // 64

Today, I’m going to show you How do i add two numbers in react native, as mentioned above here, I’m going to use the + addition operator.

Let’s start today’s tutorial how do you add two numbers in react native?

In this example, we will do

  1. take an example of a number and string number state
  2. adding two numbers example
  3. adding two string numbers example
  4. print the output on the page screen
1import React, { useState, useEffect } from 'react';
2import { Text, View, StyleSheet } from 'react-native';
3
4const App = () => {
5 const [firstNum, setFirstNum] = useState(24);
6 const [secondNum, setSecondNum] = useState(24);
7
8 const [firstStr, setFirstStr] = useState("24");
9 const [secondStr, setSecondStr] = useState("24");
10
11 return (
12 <View style={styles.container}>
13 <Text style={styles.paragraph} >{`adding two numbers example`}</Text>
14 <Text style={styles.paragraph} >{firstNum + secondNum}</Text>
15 <Text style={styles.paragraph} >{`adding two string numbers example`}</Text>
16 <Text style={styles.paragraph} >{parseInt(firstStr) + parseInt(secondStr)}</Text>
17 </View>
18 );
19}
20
21const styles = StyleSheet.create({
22 container: {
23 flex: 1,
24 justifyContent: 'center',
25 backgroundColor: '#ecf0f1',
26 padding: 8,
27 },
28 paragraph: {
29 margin: 24,
30 fontSize: 18,
31 fontWeight: 'bold',
32 textAlign: 'center',
33 },
34});
35
36export default App;

In the above react native example, we have taken the sample numbers and string numbers state, and perform adding two numbers example, and adding two string numbers example.

React Native, add two numbers example
React Native, add two numbers example

Try it yourself

I hope it helps you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

how to check webpack version in react js?

how to check webpack version in react js?

An example of check webpack version in react js with step by step guide.

July 15th, 2022 · 1 min read
how to remove double quotes from string in react js?

how to remove double quotes from string in react js?

An example of remove double quotes from string in react js with step by step guide.

July 14th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]