Skip to main content

10 React Native Projects for Intermediate Developers

· 4 min read
Dopebase
Engineering Team

Use portfolio projects to demonstrate production skills such as offline data, authentication, push notifications, native APIs, testing, and release automation. This revised guide emphasizes supported APIs, production tradeoffs, and an upgrade-friendly path without tying the advice to a calendar year.

react native projects intermediate developers

Modern implementation baseline​

Use portfolio projects to demonstrate production skills such as offline data, authentication, push notifications, native APIs, testing, and release automation.

Use TypeScript, the New Architecture, supported public APIs, and libraries that publish an explicit compatibility policy. Prefer framework-managed native dependencies when that reduces upgrade risk, and verify behavior in release builds on both platforms.

  • Define one measurable reliability or performance goal per project.
  • Ship a release build and document architecture tradeoffs.
  • Include tests and observability instead of screenshots alone.

Production checklist​

  • Test on representative Android and iOS devices, not only simulators.
  • Profile startup, interaction latency, memory, and network failure states.
  • Keep native dependencies compatible with the active React Native release line.

Authoritative references​

Introduction​

What is React Native?​

React Native is an open-source framework for building mobile applications using JavaScript and React. It allows developers to write code once and deploy it on multiple platforms, such as iOS and Android. React Native combines the best of both worlds by providing a native-like user experience while using a single codebase.

Why use React Native for mobile app development?​

There are several reasons why React Native is a popular choice for mobile app development:

  1. Code reusability: With React Native, you can write code once and reuse it across different platforms, saving time and effort.

  2. Native-like performance: React Native uses native components, ensuring a smooth and responsive user experience.

  3. Large community support: React Native has a vast community of developers who actively contribute to its growth. This means that you can find plenty of resources, libraries, and tools to help you in your development journey.

Now that we have a basic understanding of React Native, let's dive into the projects!

Project 1: Weather App​

Description​

The Weather App is a simple application that fetches weather data from an API and displays it to the user. It allows users to search for a specific location and view the current weather conditions, including temperature, humidity, and wind speed.

Features​

  • Search for weather by location
  • Display current weather conditions
  • Refresh weather data

Technologies Used​

  • React Native
  • OpenWeatherMap API

Code Example​

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

const WeatherApp = () => {
  const [location, setLocation] = useState('');
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    // Fetch weather data from API
    // Set weather state
  }, [location]);

  const handleSearch = () => {
    // Trigger weather data fetching
  };

  return (
    <View>
      <TextInput value={location} onChangeText={setLocation} />
      <Button title="Search" onPress={handleSearch} />
      {weather && (
        <View>
          <Text>Location: {weather.location}</Text>
          <Text>Temperature: {weather.temperature}</Text>
          <Text>Humidity: {weather.humidity}</Text>
          <Text>Wind Speed: {weather.windSpeed}</Text>
        </View>
      )}
    </View>
  );
};

export default WeatherApp;

The code above demonstrates a basic implementation of the Weather App. It uses React Native's useState and useEffect hooks to manage the component's state. The location state holds the user's input for the desired weather location, while the weather state holds the fetched weather data.

In the useEffect hook, we fetch the weather data from the OpenWeatherMap API whenever the location state changes. The fetched data is then stored in the weather state.

The handleSearch function is triggered when the user clicks the search button. It initiates the weather data fetching process by updating the location state.

The rendered JSX displays an input field for the user to enter a location and a button to trigger the search. If the weather state is not null, it displays the fetched weather data.

Stay tuned for the next project, an E-commerce App!