Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Steps to Create Your First App
2.1.
Modifying App.js as per our need
3.
Frequently Asked Questions
3.1.
What is the use of setTimeout() function in react-native?
3.2.
What is a class component in react-native?
3.3.
What is a functional component in react-native?
4.
Conclusion
Last Updated: Mar 27, 2024
Easy

First App on React Native

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

React Native is a Javascript framework that helps web developers to construct mobile apps with their existing Javascript skills. It promises to build a mobile app for both Android and iOS without compromising the end user's experience or the app's quality.

In this tutorial, we will build an app's simple screen using react-native. We assume that you have already done all the necessary downloads and setups, if you haven't, then it is strongly recommended that first, you set up the environment for yourselves. You can find all the instructions from the react-native official site, go with React Native CLI Quickstart

Also See, Hooks in React JS

Steps to Create Your First App

Since you have done all the setups so we will now quickly start creating a new app. There are some following steps:-

1. Open the command prompt in your machine and locate yourself in the folder where you want to create your project.

2. Now run the following command with your desired name of the project. This will download all the necessary files and folders for your app.

npx react-native init YourProjectName


You can provide a version also

npx react-native init YourProjectName --version X.XX.X

After you press enter, it will take some time to download all the required files and folders. You will get this screen after downloading.

3. Now, you can open the project in your favorite IDE. You can notice on the left side, you will have the entire project structure.

In this whole project structure, the main content, for now, is in the App.js file. It contains the design of the screen, and by default, react-native provides us the pre-written code in the App.js file.

Code:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const Section = ({children, title}): Node => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;


4. Now, in order to run your app on the android emulator, open your emulator from the 

android studio and create virtual device if you haven't already.

5. Now, to run your project execute the following command you run this either on your command prompt from the project's root directory or in your IDE's terminal, both the ways work the same. It will start the development server.

npx react-native start


6. To run your project in the current working android emulator on your machine, run the following command on the new terminal.

npx react-native run-android

Note: You can also directly run this command to see the output on the emulator without executing the previous command.

On the emulator, you will have the following output. All the codes are pre-written let's modify them.

 

Modifying App.js as per our need

So far, we got a fully designed screen, but all the codes were pre-written. Here we are going to modify the code to make the screen looks like how we want. We are about to create a simple screen with background color as "teal" there will be a heading "This is Coding Ninjas Studio" and with the bottom text "Powered By" and "Coding Ninjas".

App.js

Code:

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.heading}>This is Coding Ninjas Studio</Text>
        <Text style={styles.middleText}>Powered By</Text>
        <Text style={styles.bottomText}>Coding Ninjas</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "teal",
    alignItems: "center",
    justifyContent: "center"
  },
  heading: {
    flex: 1,
    fontWeight: "bold",
    justifyContent: "center",
    textAlign: "center",
    marginTop: 100,
    fontSize: 50,
  },
  middleText: {
    color: "black",
    fontSize: 20,
  },
  bottomText: {
    marginBottom: 30,
    color: "orange",
    fontWeight: "bold",
    fontSize: 30,
  }
});


Output:

Also see,  React Native Reanimated

Also Read, React Native Paper, React devtools

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

What is the use of setTimeout() function in react-native?

We may occasionally need to run code after a delay. In such circumstances, we use React Native's JavaScript API setTimeout. The setTimeout() method is to run a function after a certain period of time has passed.

 

What is a class component in react-native?

Class components are JavaScript classes that extend the React Component base class. This grants the class (say ActivityIndicatorDemo)  access to the parent's state/props functionality as well as React lifecycle methods like the render. In the example above, we have used the class component.  

 

What is a functional component in react-native?

Apart from using class components, we can also use functional components. The functional components are less complicated. They don't have control over their state or access to React Native's lifecycle functions. They're just plain old JavaScript functions, and they're also known as stateless components.

Conclusion

In this article, we have deeply discussed how to create a Basic App in React Native. We've discussed its setup and installation along with an example.

 We hope that this blog has helped you enrich your knowledge regarding the Basic App in React Native. Do check out the awesome content on the Coding Ninjas Website,  Android DevelopmentCoding Ninjas Studio Interview Experiences, Coding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio ContestsCoding Ninjas Courses,  and Coding Ninjas Studio Test SeriesDo not forget to upvote our blog to help other ninjas grow. 

Happy Coding!

Live masterclass