Projects in React Native: Learn By Building Real World Apps

Learn howReact Native lets you build real native apps with a single JavaScript codebase, using gsx-based components, state, and lifecycle methods across iOS and Android.

Install Android Studio and the Android SDK to test React Native apps on a virtual device, configuring Java, SDK Manager, and Marshmallow system images for 64-bit systems.

Install the React Native CLI globally with npm, initialize a new project named my app, then run on Android using an Android virtual device and the packager.

Learn to pass props to a Hello component, set default props, and manage state with a constructor and setState; toggle name display via a button in React Native.

Build a simple business landing page in a beginner React Native project, featuring an Android toolbar, image logo, text input, switch, and a scroll view; include a frontend contact form.

Scaffold a React Native business app with a landing page featuring welcome, about, and contact sections, and build and wire components for a front-end contact form.

Use a switch to toggle logo visibility by updating state on value change. Add an Android toolbar with a logo, title, and subtitle, enabling cross-platform use with iOS.

Build a React Native book finder using the Google Books API, with a search input that fetches results and a details view showing description and a web view preview.

Build a book finder app using the Google Books API volumes endpoint and a search query, and implement a toolbar component with a title for navigating between books and details.

Learn to implement a navigator in React Native to support multiple scenes, configure transitions, render a books page, and add a text input bound to state for searching.

Explore building a real-time search experience in React Native by fetching Google Books data as you type, wiring a ListView with a dynamic data source and render row.

Wrap each book row in a touchable highlight, use onPress to navigate to a details page passing the book data, and render a details component with title and image.

Begin the next React Native project by building a firebase-backed item list app (id and title); add, delete via a modal, view live updates, and style the status bar.

Set up a Firebase database, import items, and enable read/write access, then build a React Native item list app with a toolbar, status bar, and a shared style file.

Implement a React Native list view with a hard-coded item array, data source, render row, and touchable highlight, then prepare to pull items from firebase in a future step.

Build and wire an add button component in a React Native app to open a modal with a text input for adding items, styled with constants and TouchableHighlight.

Build a real world to-do or grocery list app in react native by adding items with a modal and syncing them to firebase, with live updates.

Build a React Native project management app called Project MGI with full CRUD, using async storage to persist projects with title, category, leader, due date, and description.

Retrieve projects from AsyncStorage, parse stored JSON, and render them in a list, replacing hard-coded data, then navigate to a details page for each project.

Navigate from the project list to a details page by tapping a row, pass the selected project data via the navigator, and render a Project Details screen in React Native.

Build a translation app using the Yandex Translate API in this project intro. Learn to fetch supported languages, submit translation requests with text and a target language, and test results.

Launch a React Native translation app by obtaining a free Yandex translation API key, scaffold three components—translate input, translate output, and language select—and run the app on Android.

Build a language select picker in a React Native app, enabling Russian, Spanish, French, and Chinese options and wiring state updates for future translation API calls.

Implement a real-time translation feature in a React Native app by parsing JSON from an API, updating state with the translated text, and rendering it in a styled output component.