Explore

React Native Lab 01

React Native app that displays a scrollable list of fruits (apple, orange, mango, pineapple, kiwi):

⁠

First, make sure you have React Native and necessary dependencies installed.

Then, follow these steps:

Step 1: Create a new React Native project

npx react-native init FruitsApp cd FruitsApp Step 2: Install dependencies

npm install react-navigation react-navigation-stack react-native-gesture-handler

Step 3: Create the FruitList component

Create a new file called FruitList.js and paste the following code:

It is recommended to keep the FruitList.js file in the same directory as the package.json file. Generally, all the source code files for a React Native project are placed within the project directory. This helps maintain a well-organized project structure and makes it easier to manage and locate the files.

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

const fruits = ['apple', 'orange', 'mango', 'pineapple', 'kiwi'];

const FruitList = () => { return ( <View style={styles.container}> <Text style={styles.heading}>List of Fruits:</Text> <FlatList data={fruits} renderItem={({ item }) => ( <View style={styles.item}> <Text>{item}</Text> </View> )} keyExtractor={(item) => item} /> </View> ); };

const styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: '#fff', }, heading: { fontSize: 18, fontWeight: 'bold', marginBottom: 10, }, item: { backgroundColor: '#f9c2ff', padding: 10, marginVertical: 5, }, });

export default FruitList;

Step 4: Configure navigation

Introduction to Metro Bundler and its Role in React Native Development

The Metro bundler is an essential tool used in React Native development for bundling and serving JavaScript code to your application.

It is responsible for transforming and packaging your JavaScript source code, assets, and dependencies into a format that can be understood and executed by the JavaScript runtime in your application.

In this lecture, we will explore the role of the Metro bundler and how to start it in a React Native project.

I. What is Metro Bundler? A. Metro bundler is the default JavaScript bundler used in React Native projects. B. It is a development server that combines and bundles your JavaScript code, assets, and modules into a single file. C. It optimizes the code and assets for performance and delivers them to the running React Native application.

II. Starting the Metro Bundler: A. Open a terminal or command prompt in your React Native project directory. B. To start the Metro bundler, run the command `npx react-native start`. C. After executing the command, the bundler will start running and display logs and information in the terminal.

III. Role of Metro Bundler: A. Transforming JavaScript: 1. The Metro bundler takes your React Native code, including JavaScript files, JSX, and other assets. 2. It uses Babel to transpile modern JavaScript syntax and JSX into backward-compatible JavaScript code that can run on supported platforms. 3. This transformation process allows you to use the latest JavaScript features and syntax in your React Native code.

B. Resolving and Bundling Dependencies: 1. The bundler analyzes your imports and resolves the required modules. 2. It creates a dependency graph that includes all the modules required by your application. 3. The bundler then bundles these modules and dependencies into a single JavaScript bundle that can be efficiently loaded by the React Native application.

C. Serving Assets: 1. The Metro bundler not only processes JavaScript but also handles the asset (image) management. 2. It identifies and bundles images, fonts, CSS files, and other non-JavaScript assets used in your project. 3. These assets are optimized and transformed, making them accessible and usable in the React Native application.

D. Hot Reloading and Fast Refresh: 1. The bundler enables hot reloading and fast refresh functionalities in React Native development. 2. Hot reloading allows you to see the changes you make in your code immediately reflected in the running application without manually restarting it. 3. Fast refresh is an improved version of hot reloading that preserves the app's state during code changes for a faster and smoother development experience.

E. Debugging Support: 1. The bundler provides debugging support by generating source maps. 2. Source maps map the original source code to the transformed code, allowing for easier debugging and error tracking in development.

IV. Conclusion: The Metro bundler plays a vital role in React Native development, serving as a development server, bundling and optimizing JavaScript code and assets, resolving dependencies, and enabling hot reloading and fast refresh.

Starting the Metro bundler in your project allows you to bundle and serve your application code during development.

By understanding the role of the bundler, you can effectively utilize it to streamline your React Native development workflow.

In this lecture, we explored the Metro bundler, its role in React Native development, and how to start it in a project. With this knowledge, you are equipped to use the Metro bundler to bundle and serve your JavaScript code, assets, and dependencies during React Native development. Happy coding!

If you are encountering issues with running your React Native app, here are a few steps you can try to resolve the problem:

1. Ensure that you have an Android emulator or a physical device connected via USB for running your app.

2. Make sure that the emulator or device is correctly set up and running. You can verify this by opening the Android emulator or checking the device's connection.

3. Ensure that you have started the Metro bundler for your app. You can do this by opening a new terminal window, navigating to your project directory, and running the command `npx react-native start`.

4. Check that your Android emulator or device is properly recognized by your development machine. You can do this by running the command `adb devices` in the terminal. If the device is listed, it means it is recognized and connected.

5. If you are using an Android emulator, try restarting it. Sometimes, the emulator can encounter issues that can be resolved by restarting it.

6. Double-check that your app's entry file (`index.js`) is properly configured and linked to the correct component (`App.js`).

7. If the issue persists, you can try killing the running Metro bundler process and restarting it. To do this, press `Ctrl + C` in the terminal where the Metro bundler is running and then run the command `npx react-native start` again.

By following these steps, you should be able to resolve the issue and successfully run your React Native app on the Android emulator or device.

Here are some instructions on how to ensure that you have an Android emulator or a physical device connected via USB for running your React Native app:

1. Android Emulator: - If you don't have Android Studio installed, download and install it from the official Android Studio website:

https://developer.android.com/studio⁠

- Launch Android Studio and click on the "Configure" button. - Select "AVD Manager" from the dropdown menu. - In the AVD Manager, click on "Create Virtual Device". - Choose the desired device configuration (e.g., Pixel 3) and click on "Next". - Select the desired system image and click on "Next". - Review the configuration and click on "Finish". - Wait for the AVD (Android Virtual Device) to be created. - Once the AVD is ready, select it from the AVD Manager and click on the "Play" button to start the emulator.

2. Physical Device: - Connect your Android device to your computer using a USB cable. - On your Android device, enable Developer Options. To do this, go to "Settings" > "About phone" > "Software information" > Tap on "Build number" multiple times until it says "You are now a developer". - Go back to the main Settings screen and select "Developer Options". - Enable USB debugging by toggling the switch. - On your computer, open a terminal or command prompt and run the following command to check if your device is connected: ``` adb devices ``` You should see your device listed along with a device ID.

3. Start Metro Bundler: - Open a new terminal window or command prompt. - Navigate to your project directory using the `cd` command. - Once in your project directory, run the command `npx react-native start` to start the Metro bundler.

By following these instructions, you should ensure that you have an Android emulator or a physical device connected via USB for running your React Native app.

Once the emulator/device is set up and the Metro bundler is running, you will proceed with running your app.

Open the App.js file and replace its content with the following code:

The App.js file should also be placed in the same directory as the package.json file. Typically, in a React Native project, the App.js file serves as the entry point for the application and contains the root component. It is responsible for initializing the application and rendering the main component tree.

By convention, the App.js file is usually located in the root directory of the project along with other essential configuration files like package.json, index.js, etc. Placing it in the root directory makes it easily accessible and allows it to be imported and used in other parts of the project.

import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import FruitList from './FruitList';

const AppNavigator = createStackNavigator( { Home: FruitList, }, { initialRouteName: 'Home', } );

export default createAppContainer(AppNavigator); ```

Metro configuration Documentation:

https://facebook.github.io/metro/docs/configuration⁠

// metro.config.js

The `metro.config.js` file should be placed in the root directory of your React Native project. The root directory is usually the top-level directory that contains your application source code, assets, and other project files.

When you create or add the `metro.config.js` file, make sure it is placed at the same level as other files such as `package.json`, `index.js`, and `App.js` (or any other entry point file of your application). This ensures that Metro bundler can locate and use the configuration file when running your React Native project.

Here's an example directory structure of a React Native project with the `metro.config.js` file:

my-react-native-app ├─ android/ ├─ ios/ ├─ src/ ├─ node_modules/ ├─ metro.config.js ├─ package.json ├─ index.js ├─ App.js └─ ... ```

In this example, the `metro.config.js` file is placed directly in the root directory alongside other project files.

By placing the `metro.config.js` file in the root directory of your React Native project, Metro bundler will automatically pick up and use the configuration when you start the bundler using the `npx react-native start` command.

module.exports = {

// Add your custom Metro configuration here

};

Having an empty metro.config.js file with the provided code snippet module.exports = {} is enough to make the Metro bundler work for your FruitList app.

The empty configuration file acts as a placeholder, indicating that you don't have any specific custom configuration options to add at the moment. React Native will use its default configuration settings when running the Metro bundler.

In most cases, the default configuration provided by React Native's Metro bundler is sufficient for developing a basic React Native app. If you don't encounter any specific issues or have any specific configuration requirements, you can proceed with running the Metro bundler using the command npx react-native start in your project directory.

However, if you encounter any specific issues or have custom configuration requirements in the future, you can add the necessary options and settings in the metro.config.js file to tailor the Metro bundler behavior for your specific needs.

So, for now, the empty metro.config.js file you provided should work fine, and you can proceed with starting the Metro bundler for your FruitList app.

Step 5: Run the app

npx react-native run-android

This will install the app on your device or emulator, and you should see the list of fruits displayed in a scrollable view.

Note: This simple example uses the basic React Navigation stack and a FlatList component. For more advanced functionality or design, you can explore additional libraries or customize the code further.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.