Introduction To React Native⭐

In this article, we will delve into the world of React Native, exploring its core concepts, how it operates, and its transformative impact on mobile app development. React Native stands out as a revolutionary framework that streamlines the creation of mobile applications, making the process faster and more efficient. By the end of this read, you'll gain a comprehensive understanding of what React Native is, how it functions, and why it has become a favored choice for developers seeking a more effective and simplified approach to building mobile apps for multiple platforms.

Prerequisite for Learning React Native 🤔

Basic of HTML and CSS
Basic of JavaScript and Basic Understanding of Package managers Like Npm , Yarn etc.
Basic Understanding of React Terms Like JSX, components, state, props, and the component lifecycle.
Basic Understanding of Mobile App Development (Android, ios)

What is React Native?

React Native is an open-source framework for building mobile applications. It was created by Facebook and has quickly become one of the most popular frameworks in the mobile development world. React Native allows developers to build mobile apps using JavaScript and React, a library for building user interfaces. This approach offers a unique advantage – the ability to share code between iOS and Android platforms, significantly reducing development time and effort.

Core Concepts of React Native

When we come from React (web development) to React Native (mobile app development), it's helpful to draw parallels between the components and concepts in both frameworks. This comparison will make it easier for developers familiar with React to grasp the functionality and purpose of React Native components. Let's explore some key React Native components and their web counterparts:

View vs. Div

React Native: View
In React Native, the View component is a fundamental building block for UI components. It's similar to a container and supports layout, style, and touch handling. It's often used in place of the div tag from HTML. For example:

  import React from 'react';
  import {View, Text} from 'react-native';

  const ViewBoxesWithColorAndText = () => {
    return (
      <View
        style={{
          flexDirection: 'row',
          height: 100,
          padding: 20,
        }}>
        <View style={{backgroundColor: 'blue', flex: 0.3}} />
        <View style={{backgroundColor: 'red', flex: 0.5}} />
        <Text>Hello World!</Text>
      </View>
    );
  };

  export default ViewBoxesWithColorAndText;

React: Div
In React for web apps, div is the equivalent container element. It's used to group and style HTML elements with CSS.

Text vs. Span/P

React Native: Text
The Text component in React Native is used to display text. It can be styled similarly to text in web development and can nest other text or view components.

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

  const TextInANest = () => {
    const [titleText, setTitleText] = useState("Bird's Nest");
    const bodyText = 'This is not really a bird nest.';

    const onPressTitle = () => {
      setTitleText("Bird's Nest [pressed]");
    };

    return (
      <Text style={styles.baseText}>
        <Text style={styles.titleText} onPress={onPressTitle}>
          {titleText}
          {'\n'}
          {'\n'}
        </Text>
        <Text numberOfLines={5}>{bodyText}</Text>
      </Text>
    );
  };

  const styles = StyleSheet.create({
    baseText: {
      fontFamily: 'Cochin',
    },
    titleText: {
      fontSize: 20,
      fontWeight: 'bold',
    },
  });

  export default TextInANest;

React: Span/P
In web development, span and p tags are used for text. They serve a similar purpose, allowing text to be inserted and styled within a web page.

TouchableOpacity vs. Button/Anchor

React Native: TouchableOpacity
TouchableOpacity in React Native decreases the opacity of a view when pressed, providing visual feedback. It's used for elements that should respond to user interaction, similar to buttons or links.
```
  <TouchableOpacity onPress={this.onPress}>
    <Text>Tap me!</Text>
  </TouchableOpacity>
  Copy
```
React: Button/Anchor
In web development, button and a tags are used for clickable elements, performing actions or navigating to other pages.

TextInput vs. Input

React Native: TextInput
TextInput is the React Native component for input fields, allowing users to enter text. It's customizable and supports various keyboard types.

  <TextInput
    style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
    onChangeText={text => this.setState({ text })}
    value={this.state.text}
  />
  Copy

React: Input
On the web, the input element serves the same purpose, enabling users to type in data.

Image vs. Img

React Native: Image
The Image component in React Native is used to display different types of images. It supports various sources, including network images and local files.
```
  <Image
    source={{ uri: 'https://example.com/image.png' }}
    style={{ width: 200, height: 200 }}
  />
  Copy
```
React: Img
In web development, img is the standard tag for embedding images in a webpage.

ScrollView vs. Div with Overflow

React Native: ScrollView
ScrollView is used in React Native for scrollable content. It can host a variety of components and layouts.
```
  <ScrollView style={{ marginHorizontal: 20 }}>
    <Text>Scroll me!</Text>
  </ScrollView>
  Copy
```
React: Div with Overflow
In web development, a div with CSS property overflow: scroll is used to create a scrollable area.

StyleSheet vs. CSS

React Native: StyleSheet
While not a component, StyleSheet in React Native is used for styling components. It's a more structured way to define styles.

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    text: {
      fontSize: 20,
      color: 'blue',
    },
  });
  Copy

React: CSS
In React for web apps, standard CSS is used for styling components.

If you want to learn more about core concepts, check out : 👉here

Get Started with React Native👇

Now we Understand How Component is work in React Native Now Let Me Explain me about How you can create Your First React Native Project

There are primarily two ways to create a React Native app:

Expo CLI: Expo is a framework and platform for universal React applications. It simplifies the process of developing a React Native app with a managed workflow, providing a set of tools that help developers build, deploy, and quickly iterate on iOS, Android, and web apps. Expo is ideal for developers who want to avoid dealing with native code as much as possible.
React Native CLI: The React Native CLI (Command Line Interface) provides more control and flexibility. It's suitable for developers who need direct access to native code, as it allows you to create projects that include native modules that require linking. Using React Native CLI, you can configure every detail of your project, but it requires more setup and understanding of iOS and Android development environments.

Choosing between these two depends on your project's requirements, your familiarity with native mobile development, and the level of customization you need. Expo is often recommended for beginners or projects that don't require heavy native module usage, while React Native CLI is preferred for more complex applications that require deeper integration with the native layer of the mobile platforms.

Here I am Using Expo CLI to Create the App Follow this step to Create Your First React Native App

Initialize a New Project First, you need to create a new Expo project. You can do this by running the following commands in your terminal:

npx create-expo-app my-app

cd my-app

Start the Development Server Next, you'll start the development server. This is done by running the following command:

npx expo start -c

When you run this command, the Expo CLI starts the Metro Bundler, an HTTP server that compiles your app's JavaScript code using Babel and serves it to the Expo app. The Metro Bundler is a key part of the Expo development environment.

Open the App on Your Device To see your app live, you need to have the Expo Go app installed on your mobile device. Here's how to open your project:
- On an Android device: Open the Expo Go app, go to the "Scan QR Code" option on the Home tab, and scan the QR code displayed in your terminal.
- On an iPhone or iPad: Use the default Apple Camera app to scan the QR code shown in your terminal.

You can open the project on multiple devices simultaneously, so feel free to try it out on different phones if you have them available.

Make Your First Change in App.js Now that everything is set up, you can start coding. Open the App.js file in your code editor and modify the contents of the existing <Text> component. For example, change it to say "Hello, world!". As soon as you save the file, you should see the update on your device.

here is Demo of that: 👇

Advantages of React Native

Cross-Platform Development: Write one codebase and deploy it on both iOS and Android.
Community and Ecosystem: React Native has a large and active community, providing numerous libraries and tools.
Live Reloading: This feature allows developers to see the results of the latest changes immediately.
Performance: React Native’s approach to using native components results in high performance for mobile environments.
Hot Reloading: It enables developers to inject new versions of the files edited at runtime.

Resources for Further Learning

Conclusion

You've now taken the first steps into the world of React Native development using Expo. This journey marks the beginning of an exciting adventure in building cross-platform mobile applications. With the knowledge you've gained, you're well-equipped to dive into app development with greater ease and efficiency.

Remember, the key to successful React Native development lies in understanding its core components and how they interact within the mobile ecosystem. By leveraging the simplicity and power of Expo, you've bypassed the complex setup processes typically associated with mobile development, allowing you to focus on what truly matters – bringing your app ideas to life.

Congratulations on successfully Reading my Article Now You have Basic understanding of React Native

I hope you learned something from this blog. If you have, don't forget to drop a like, follow me on Hashnode , and subscribe to my Hashnode newsletter so that you don't miss any future posts. If you have any questions or feedback, feel free to leave a comment below. Thanks for reading and have a great day!

Introduction To React Native ⭐

Table of contents