React Native Sample App for Beginners

React Native is a JavaScript framework for writing real and attractive mobile rendering. With the help of react native developer can easily make applications for iOS and Android. It is based on React, and this language made by Facebook's JavaScript library. Today we will make a simple mobile app with the help of React Native and together we will understand how React Native works.

With the help of React Native, we can create apps for both iOS and Android in the same code. With its help, we can make apps up to the production level. Some applications already built from this language are running between users, for example Facebook, Airbnb, Walmart, and Baidu.


React Native Sample App for Beginners

What is react native and react js?

React native and react js are both frameworks for JavaScript, and both are developed by Facebook. React Native is mainly built for creating mobile applications and ReactJS for making websites but both are based on JavaScript. React Native uses the React library and ReactJS also uses the React library. React Native is a very robust framework that helps web developers and app developers to build websites and apps. 

Developers can use their existing JavaScript knowledge to build great mobile applications. And this application provides very fast mobile performance. With the help of React Native, you can create an app for both iOS and Android simultaneously with the same code.

What is expo react native?

Expo react native, in a simple language, Expo is a mobile application, and with its help, the code of React Native can be easily tested. Let's see how to do it, first of all download the app named Expo in your mobile from play store. Expo react native, in a simple language, Expo is a mobile application, and with its help, the code of React Native can be easily tested. Let's see how to do it, first of all download the app named Expo in your mobile from play store. After this, open any browser on your computer or laptop and open this website https://snack.expo.dev/

What is expo react native?

As soon as this website opens, you will see four options in the right side corner Web, Android, iOS and My Device. You have to click in the option of My Device, you will see a QR code, now you have to open the expo app and scan, the output of the code written there will be visible in your phone after scanning.

React Native App Structure

  • App.js
  • assets
  • componenta
  • App.test.js
  • README.md
  • app.json
  • node_modules
  • package.json
  • yarn.lock
After setting up react native, you will see similar file structure. We will understand about these files slowly, now the only thing that is necessary is that all our code will be inside the App.js file, and almost all of our code will be inside this file.

React Native Expo Tutorial for Beginners

Well, if you have read the above information, then you must have understood what is React Native and what is Expo, you must have got some idea about it. Today we will make a simple app with the help of Expo React Native. follow the steps given below-
  1. Open this link-https://snack.expo.dev/.
  2. Download Expo App from Play Store.
  3. In snak.expo site, click My Device which is in the corner of the right side.
  4. Open your Expo app and Scan QR Code, which was open on clicking in the option of my device. 

How to Add Two TextInput Value in React Native?

import React from 'react';
import {StyleSheet,Text,View,TextInput,Button} from 'react-native';
import { useState } from 'react';

const Add2Number=()=>{
const [text1, setFstText] = useState('');
const [text2, setScndText] = useState('');
const [result, setResult] = useState('');
const Addition=()=>{
    setResult(parseInt(text1)+parseInt(text2))
}
return(
   <View style={{margin:30}}>
<View><Text style={{textAlign:"center", fontSize:20}}>Welcome to Our first Mobile App</Text></View>
<View><Text style={{textAlign:"center", fontSize:20}}>My Addition App</Text></View>
<View>
<Text>Enter the first number</Text>
<TextInput style={{borderWidth:1}} onChangeText={text1 => setFstText(text1)} value={text1} />
<Text>Enter the second number</Text>
<TextInput style={{borderWidth:1}} onChangeText={text2 => setScndText(text2)} value={text2}/>
<View style={{marginTop:10}}>
<Button title="Submit" onPress={Addition}/>
<Text>The Result is </Text>
</View>
<TextInput>{result}</TextInput>
</View>
   </View>
 )
}
export default Add2Number;

Output of above code

How to Add Two TextInput Value in React Native

Conclusion 

Well, we understood what is React Native and ReactJS and what libraries they use, and also we saw how is the App structure of React Native. We saw above how to add the value of two text inputs. Yes, I agree that there will be a lot of confusions as to how all this code works, what is the role of other files in the app structure other than app.js. Don't worry, we will clear all the confusions in the next few blog posts. The motive of this post was only to understand a little introduction about React Native. We made an app in which you are adding the value of two text inputs and getting it to show in the third. Mainly, we were making React Native an excitement by building the first app.