Discover React Native for creating rich, cross-platform mobile apps with reusable components. Gain insights into UI components, styling, navigation, Hooks, state, and database management.

native.tar.gz

reactNative

React Native is a well-known mobile application development framework that allows developers to create rich, cross-platform mobile application UI using reusable components. It's ideal for building mobile applications and supports multi-platform reusable code, pre-built components, and a rich UI. Most well-known social media platforms, such as Facebook and Instagram, have been built using React Native. 

In this course, you’ll start with a brief introduction to React Native and then cover various built-in components of React Native categorized into different categories such as basic, user interface, user interaction, and list view components. Next, you’ll learn about concepts such as application styling, navigation, Hooks, state management, and database management. You’ll find interactive quizzes and challenges throughout the course to test your understanding.

By the end of this course, you’ll be able to develop mobile applications and kickstart your journey as a React Native developer.

Getting Started with Mobile App Development with React Native

The `FlatList` component is an efficient way to display lengthy lists of data that are too big to fit on a single screen. It improves the application's performance since the data is only rendered when it appears on the screen. This contrasts with the `ScrollView` component that renders all the data at once. The `FlatList` component comes with many built-in useful features, such as pull-to-refresh, scroll loading, and multi-column support.

# Usage

To implement and use the `FlatList` component, we first have to import it from the `react-native` library.

Once the `FlatList` component has been imported, we can use it inside our application using the `<FlatList/>` tag. The following props must be passed to the `FlatList` component:

- `data`: This is the source of elements to be rendered by the `FlatList`. This prop accepts an array of items to be rendered.

- `renderItem`: This prop takes one item or element from the `data` and returns a React Native component that is rendered on the screen.

- `keyExtractor`: Each item inside the `FlatList` should have a unique key. This key is provided to the `data` prop along with the list of items to be rendered. The `keyExtractor` prop default extracts the key from the `data` prop if it is named `key` or `id`. However, if the `data` contains some other name for the key, such as `trackingID`, then we have to manually specify it inside the `keyExtractor` prop. Otherwise, `FlatList` will throw a warning.


Learn how to render data with infinite scrolling using the FlatList component.

Before We Begin

Introduction to React Native

Basic Components

User Interface and User Interaction

List View

Android Components and APIs

Miscellaneous Components and APIs

Application Styling

Navigation

Hooks

State Management

Database Management

Appendix

FlatList

Usage