As it is pretty obvious, there are three different kinds of programs available for development based on platforms Android, iOS, and Windows. There are many options available for application development, starting from Java and Kotlin for Android, Swift for iOS, and many more while using these types of technologies, you’ll be able to develop applications for only one platform, for others, you need their respective technology.
This “React Native Tutorial For Beginners” is all about one of those hybrid frameworks called React Native. I think we have enough background now, quickly check out the topics to be covered in the blog, and let’s get started.
Points to be covered
Before going for React Native, you should have a glimpse of React.Js, check out our Youtube video:
All about React Native
This React Native tutorial will tell you a lot about React Native stick together till the end, and here we go now. React Native is one of the most promising technologies in the field of hybrid application development. React Native is used to develop a very intuitive, user-friendly, and native application.
It was just a very crisp introduction to React Native, check out the below-mentioned points for detailed information about React Native.
- React Native is a type of cross-platform mobile application development technology that works on the principles of JavaScript and Object Oriented Programming.
- By the use of React Native, you will be able to develop the front end of any mobile application, irrespective of the platform chosen.
- React Native uses the native components for development purposes.
- React Native is a very popular hybrid technology for cross-platform application development. It has outshined its other alternatives, including the newly developed flutter framework by Google, which works on Dart programming language.
- The key benefit of React Native is that since it only uses JavaScript for development, you can maintain a single code base for both Android and iOS.
Covering the prerequisites of React Native, check out our React JS certification course on React JS Training Course.
React Native is truly a game changer, don’t you think? Let’s find out more about React Native. In the coming section, we are going to discuss the prerequisites that you should have by your side.
Pre-Requisites of React Native
Considering a real-life example, suppose we want to cook something special before preparing for the same you must have some cookery skills to make yourself comfortable in the kitchen, like how to turn on the gas stove, what utensils to use, how the taste of the different spices, similarly while working with React Native you should be some prerequisites the beforehand knowledge. To know more about them, check out the below-mentioned points.
- A strong grip on JavaScript and introductory knowledge of TypeScript is a must. React Native only uses JavaScript for its whole functioning.
- Core concepts of OOPs-based programming language should be on your side before you even start learning to React Native.
- React Native is almost similar to React, knowing React is preferred as this depresses the learning curve.
- Prior experience in OOPs-based general programming helps a lot while learning to React Native as the core concepts of React Native are based on them.
- Having intermediate knowledge of computer fundamentals won’t hurt as this will make your learning journey smooth, as the concept of the command line, API integration, different screens integration, connection with the web, data storage-connectivity, and many more.
- Familiarity with application development IDEs, namely, VS Code or Android Studios, gives you relief from frequent googling for the IDE’s working.
- Most of the components of React Native are available on git, so before React Native, knowledge about version control systems is a must.
Didn’t have enough of React JS? Check out our complete ReactJS Tutorial.
Scared? Don’t be, JavaScript is a revolutionary language. The whole web works on JavaScript, and a special thanks to Brendan Eich for providing us with such an unfailing weapon.
History of React Native
To be the master of the art, you should know about its origin, from where the whole thing started. This helps us to know about challenges faced by the developers while the development of React Native, how they overcame them, and how the new updates are pushed while maintaining the previous versions.
- React Native was first introduced by Facebook, also known as Meta, in 2013 later, it was first publicly available on git in 2015, and the latest stable released version is 0.70.0 in Oct 2022.
- React Native was introduced for iOS platforms in the beginning, but as time passed and demand increased later, it was also released for Android.
- The framework was developed in multiple OOPs-based general programming languages named JavaScript, CPP, Objective C, Java, and Python.
- Now React Native is the most prominent option available in the field of cross-platform application development.
- Tech giants like Microsoft and Samsung are trying their best to introduce React Native for Desktops.
What conclusion can you get on after reading about the history of React Native? Let me help you, React Native is Awesome.
Basics of React Native
Now it’s the time to discuss the basics of React Native and push you a little towards your goal of mastering React Native. Below mentioned are the topics with their basic definition, examples, and syntax where ever necessary.
States
- In React Native, we use the state for data that will change in the future.
- The data or details about the component are stored in the state.
- It establishes how the component will render and behave.
- The component using the state can be changed, that is, it is mutable, if changes are necessary, they can be made afterward.
Get 100% Hike!
Master Most in Demand Skills Now !
Props
- Properties are abbreviated as “props.” Different parameters, referred to as props, can be used to alter the components at the time of creation.
- Data is transferred across containers by way of props, which are transmitted from one to the next.
- The majority of components in React Native can be modified at the time of construction using various parameters.
- Proper names for these parameters are, they are unchangeable and cannot be altered.
Views
- An essential part of React Native for creating a user interface is the view; it is a container that enables style, touch handling, flexbox layout, and accessibility controls.
- Following whatever platform the React Native app is running on, it translates seamlessly to the native view.
- The core element of React Native for creating a user interface is the view.
- It is a container that enables style, touch handling, flexbox layout, and accessibility controls.
- View components can include other views inside of them and can be nested. It may have zero to numerous children of any type.
Style
- In React Native, the style is used to define how components should be visually rendered. Styles in React Native are similar to CSS stylesheets, but they use JavaScript objects instead of CSS syntax.
- The style object can include properties such as backgroundColor, color, fontSize, margin, padding, and many more.
- Styles can be applied directly to individual components using the style prop, or they can be defined in a separate JavaScript module and imported into the component.
- Styles can also be dynamically changed or updated based on state or other conditions.
import React from 'react';
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>Hello!</Text>
<Text>I am here to help you</Text>
<Text style={{ color: 'green', fontSize: 18 }}>What help do you need?</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 25,
alignItems: 'center',
fontWeight: 'bold',
color: 'red',
},
});
export default App;
Whoa! Finally, it’s over, what do you think is a thing to be scared from? I hope you’ll agree with my statement from the previous section about React Native. In the next section, we are going to check out the features of React Native.
Features of React Native
In this section, we’ll talk about React Native’s features that set it apart from competing products—even those that are quite recent and could serve as a substitute.
- React Native is a well-settled framework that works on JavaScript which happens to be a game changer for many.
- Furthermore, React Native is based on OOPs. It is a concept on which 90% plus of the programming languages works, which provides a better and stable future as OOPs are not going anywhere.
- The major reason for React Native’s existence is its rich community support, it is actively maintained and developed by Meta and many communities, and even many tech giants are up for collaborating. The best example is Microsoft.
- React Native is a hybrid technology which means a single code base is enough for the development of cross-platform mobile applications.
- React Native is constantly evolving, and stable updates are released after a lot of hard work and background checks, which in the end, enhances its performance and thus gains the trust of the developers.
- The concept of hot reload is present in React Native. In simple words, hot reload is a button that allows the developers to reflect the changes made in the code on the output screen immediately after a click.
Still, doubt your React JS concepts? Check out our blog on React Interview Questions and Answers.
Applications of React Native
We are at the penultimate section of our React Native tutorial. This section will help you understand the application of React Native.
- Social Media Applications: React Native has become the go-to choice for developing social media applications like Facebook, Instagram, and Snapchat. Its ability to deliver a seamless UX, faster performance, and code reusability across multiple platforms makes it an ideal framework for such applications.
- E-commerce Applications: React Native is highly suitable for constructing e-commerce applications, enabling businesses to expand their reach to a broader audience. Benefiting from its real-time update capability, seamless navigation, and exceptional performance, React Native empowers developers to craft captivating and interactive e-commerce applications akin to those of Amazon and Walmart.
- Travel and Hospitality Applications: The travel and hospitality industries demand visually appealing and feature-rich applications. React Native’s ability to integrate with third-party plugins and APIs makes it an excellent choice for building travel and hotel booking applications. It enables developers to create apps with seamless booking experiences, geolocation services, and personalized recommendations.
- On-Demand Service Applications: React Native has emerged as a preferred framework for on-demand service applications like Uber and Airbnb. Its robust development ecosystem allows developers to build feature-rich applications with real-time tracking, secure payment gateways, and push notifications, enhancing the overall user experience.
- Health and Fitness Applications: In health and fitness applications, synchronizing real-time data and providing interactive user interfaces play a crucial role. React Native, with its performance optimization and smooth integration of native components, emerges as a highly favorable option for developing health and fitness apps like Nike Training Club and Strava. Leveraging React Native, developers can seamlessly incorporate essential features such as health-tracking capabilities, social sharing functionalities, and customized workout routines. This framework empowers the creation of immersive and efficient mobile applications that cater to the diverse needs of health-conscious individuals.
- Banking and Finance Applications: React Native provides a secure and scalable framework for developing banking and finance applications. With its ability to handle complex UI components and implement high-level security measures, React Native ensures a smooth user experience while managing transactions, account information, and authentication processes.
- Education Applications: React Native has also made its mark in the education sector by enabling the creation of interactive learning applications. Its rich UI libraries and extensive community support offer developers the tools needed to build engaging educational apps with features like gamification, multimedia content, and progress tracking.
Even know how to use gradient in React Native with our React Native Linear Greadient blog.
Advantages of React Native
React Native is a robust and widely adopted framework for developing cross-platform mobile applications. With its ability to build native-like experiences for iOS and Android platforms, React Native offers several benefits that make it a popular choice among developers.
- Cross-Platform Compatibility: React Native allows developers to build applications compatible with multiple platforms, including iOS and Android. By leveraging a single codebase, businesses can save time, effort, and resources, reducing development costs significantly. Reaching a wider audience through multiple platforms ensures maximum market penetration for mobile applications.
- Faster Development and Time-to-Market: React Native enables rapid development by offering a hot-reloading feature that allows developers to view changes instantly without rebuilding the entire application. The availability of reusable components and libraries further accelerates development cycles. Consequently, businesses can quickly bring their applications to market, gaining a competitive edge in the fast-paced mobile industry.
- Code Reusability and Efficiency: React Native utilizes a “learn once, write anywhere” approach, allowing developers to write code in JavaScript and share it across different platforms. This code-sharing capability significantly reduces development efforts and maintenance costs. Moreover, a unified codebase ensures consistent user experiences across platforms, eliminating the need for separate development teams for iOS and Android.
- Native-Like Performance: React Native employs a bridge that enables seamless communication between JavaScript code and native components, resulting in native-like performance. The framework utilizes native rendering APIs, ensuring the applications deliver a responsive and smooth user interface. React Native’s architecture allows it to leverage the device’s GPU, providing end-users with a highly performant and engaging experience.
- Strong Community Support: React Native benefits from a vibrant and active community of developers. This community actively contributes to the framework by sharing code snippets, components, and knowledge through open-source platforms. The availability of extensive documentation, tutorials, and forums facilitates problem-solving and learning, reducing development time and ensuring up-to-date solutions.
- Cost-Effectiveness: With React Native, businesses can significantly reduce the costs associated with app development. By utilizing a single codebase and sharing resources between platforms, development and maintenance efforts are streamlined. Moreover, the faster development cycles and time-to-market enable cost savings while ensuring efficient resource allocation.
- Easier Maintenance and Updates: React Native simplifies the maintenance process by enabling developers to make updates in real-time without requiring users to download new versions of the application. It reduces user frustration and minimizes the burden of app updates. Additionally, since the codebase is shared across platforms, bug fixes, feature enhancements, and performance optimizations can be implemented simultaneously, ensuring a consistent user experience across devices.
A Simple Calculator Using React Native
Below is a simple calculator web app built with React Native. We will provide the code for the necessary components and installation commands for the required dependencies.
Before you begin, ensure that you have Node.js and npm (Node Package Manager) properly installed on your computer. Once you have installed them, you can follow these steps:
Step 1: Create a new React Native project in your environment. Open your terminal and run the following command:
npx react-native init CalculatorApp
This command creates a new React Native project called “CalculatorApp”.
Step 2: Install the required dependencies. Navigate to the project directory:
cd CalculatorApp
Now, install the required dependencies by running the following command:
npm install react-native-eval --save
Step 3: Replace the default code. Open the App.js file in the root directory of your project and replace its content with the following code:
import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
export default function App() {
const [result, setResult] = useState('');
const handleButtonPress = (text) => {
if (text === '=') {
calculateResult();
} else if (text === 'C') {
clearResult();
} else {
setResult(result + text);
}
};
const calculateResult = () => {
let calculation = '';
if (result.includes('--')) {
calculation = result.replace('--', '+');
} else {
calculation = result;
}
try {
setResult(eval(calculation));
} catch (error) {
setResult('Error');
}
};
const clearResult = () => {
setResult('');
};
return (
<View style={styles.container}>
<Text style={styles.result}>{result}</Text>
<View style={styles.row}>
<TouchableOpacity
style={styles.button}
onPress={() => handleButtonPress('1')}
>
<Text style={styles.buttonText}>1</Text>
</TouchableOpacity>
{/* Add more buttons for digits 2-9 */}
{/* Add more buttons for operations: +, -, *, / */}
{/* Add a button for clearing the result: C */}
{/* Add a button for calculating the result: = */}
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
},
result: {
fontSize: 40,
textAlign: 'right',
padding: 10,
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 20,
paddingHorizontal: 10,
},
button: {
backgroundColor: '#DDDDDD',
borderRadius: 5,
padding: 20,
},
buttonText: {
fontSize: 24,
},
});
Step 4: Add more buttons. Inside the View component, you’ll notice placeholders for buttons. You can add buttons for digits 2 to 9, operations (+, -, *, /), clearing the result (C), and calculating the result (=). Here’s an example of adding the button for digit 2:
<TouchableOpacity
style={styles.button}
onPress={() => handleButtonPress('2')}
>
<Text style={styles.buttonText}>2</Text>
</TouchableOpacity>
You can add similar code for other buttons.
Step 5: Run the app. You’re now ready to run your calculator app. Also, make sure you have an emulator running or a physical device connected to your machine. Run the following command in your project directory:
npx react-native run-android
This npx command will start the development server and install the application on your connected device or emulator. You should be able to see and interact with your calculator app.
That’s it! You’ve successfully created a simple calculator web app using React Native. Feel free to explore and customize the app further based on your requirements.
In this code, we define a functional component app that serves as the main component of our calculator app. We use the useState hook to create a state variable result that stores the current result of the calculator.
The handleButtonPress function is called when any button is pressed. It checks the pressed button’s text and performs the corresponding action. If the button is ‘=’, it calls the calculateResult function to evaluate the current calculation. If the button is ‘C’, it calls the clearResult function to clear the result. Otherwise, it concatenates the pressed button’s text with the current result.
The calculateResult function handles the evaluation of the calculation. It checks if there are any double negatives (‘–‘) in the result and replaces them with an addition (‘+’). Then it uses the eval function to evaluate the calculation string. If there is an error during evaluation, it sets the result to ‘Error’.
The clearResult function simply sets the result to an empty string, effectively clearing the calculator.
Inside the return statement, we render the result text using a Text component with the style styles.result. Below the result, we have a View component that holds the buttons. Each button is represented by a TouchableOpacity component. You can add more buttons for digits 2-9, operations (+, -, *, /), clearing the result (C), and calculating the result (=) by following the provided examples.
The styles object encompasses styling details for a range of components, including container, result, row, button, and buttonText. This grants you the flexibility to personalize these styles and align them with your preferred design. Tailoring these styles allows you to achieve a cohesive and visually pleasing aesthetic that matches your specific design requirements.
Once you’ve added the necessary buttons and completed any additional customization, you can run the app using the instructions provided in the previous response.
Congratulations on making it to the last section! In the last section of the blog, we are going to conclude our learning while revising our teachings.
Conclusion
Ahoy! reader, we made it to the last. For our farewell words, I would like to say that React Native is the most widely used framework for creating mobile applications is React Native, and I can bet you that it is here to stay for a long period. Due to the growing popularity of the framework, there is a sizable demand for React Native development, and this trend doesn’t seem to be slowing down. In the world of creating mobile applications, React Native is steadily gaining in popularity. The digital world needs more knowledgeable developers in the field of React Native development as React Native adoption rises.
As a result, when compared to other front-end engineers, React Native developer salaries are on the higher end of the pay scale. Despite being a relatively new product in the world of app development, React Native has already gained widespread adoption. By this, we end the blog here, I hope you learned something new.
Catch with fellow learners and get your queries resolved on our community page.