explaingit

fangwei716/30-days-of-react-native

★ 6,879JavaScriptAudience · developerComplexity · 2/5Setup · hard

TLDR

Thirty self-contained React Native demo apps showcasing common mobile UI patterns, stopwatch, swipe cards, Touch ID, drag-to-reorder lists, and more, as a learning reference for iOS development.

Mindmap

mindmap
  root((repo))
    UI patterns
      Swipe cards
      Drag reorder
      Animated transitions
      Push notifications
    iOS integrations
      CocoaPods libs
      Native search bar
      Image viewer
      Touch ID
    Data viz
      D3.js in web view
      Chart rendering
    Learning format
      30 daily demos
      Self-contained days
      Reference collection
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Study working React Native examples for specific UI patterns like swipe-to-dismiss cards or drag-and-reorder lists.

USE CASE 2

Learn how to recreate familiar iOS interface elements like a stopwatch or animated splash screen in React Native.

USE CASE 3

See how to integrate native iOS components like a search bar or image viewer into React Native using CocoaPods.

Tech stack

React NativeJavaScriptCocoaPodsD3.jsOpenGL

Getting it running

Difficulty · hard Time to first run · 1h+

Targets React Native 0.34, an older version, many third-party libraries are iOS-only and may need updates to run today.

In plain English

This repository contains 30 small demo apps built with React Native, a JavaScript toolkit for creating mobile apps that run on both iOS and Android from a single codebase. Each day's entry is a self-contained example focused on a specific technique or UI pattern. The project was inspired by similar challenge-style repositories in the Swift community. The 30 examples cover a wide range of common mobile features. Early days recreate familiar iOS interface patterns: a stopwatch that mirrors the system clock app, a weather app with animated transitions, and the Twitter splash screen animation. Later entries get more specialized, including gesture-based unlocking, Touch ID authentication, drag-and-reorder lists, chart rendering, a Tinder-style swipe card interface, and push notifications. Some days focus on integrating third-party libraries. Day 11 shows how to use OpenGL for visual effects, Day 23 loads a D3.js data visualization inside a web view, and several days demonstrate how to connect native iOS components (like a search bar or image viewer) into a React Native project using CocoaPods, a package manager for iOS dependencies. The project targets iOS and was built against an older version of React Native. Android support is noted as incomplete, with most third-party libraries used here being iOS-only at the time the project was written. The repository has not received major updates since targeting RN version 0.34. A Kotlin node modules branch is available if the standard installation fails. This is primarily a learning and reference collection rather than a production-ready toolkit. Each numbered entry can be read as a standalone illustration of one React Native concept, making it useful for someone who wants to see concrete working examples of specific mobile UI features.

Copy-paste prompts

Prompt 1
Show me how the Tinder-style swipe card UI is implemented in the 30-days-of-react-native project.
Prompt 2
Walk me through the Touch ID authentication example in 30-days-of-react-native and how to adapt it.
Prompt 3
How does the 30-days project connect a native iOS search bar into React Native using CocoaPods?
Prompt 4
Explain the weather app animated transition effect from 30-days-of-react-native and recreate it in a new screen.
Open on GitHub → Explain another repo

← fangwei716 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.