How can I run the 30 Days of React Native demos on Android?

The README lists Android setup as 'TODO', so you'll need to manually configure it using modern React Native CLI. Check the referenced libraries for Android compatibility, but be prepared for potential issues due to outdated code.

Is 30 Days of React Native still good for learning in 2024?

While the visual demos are insightful for understanding UI patterns, the code is based on React Native v0.40, which is obsolete. For current best practices, supplement with official React Native documentation and newer tutorials.

30 Days of React Native vs Expo – which is better for beginners?

Expo offers a more beginner-friendly, up-to-date environment with managed workflows and extensive documentation, whereas this project requires manual setup and uses older code. For starters, Expo is generally recommended.

How to update the demos to the latest React Native version?

You'd need to upgrade dependencies, refactor deprecated APIs (e.g., Navigator to React Navigation), and test each demo thoroughly. This can be time-consuming due to major changes in React Native since v0.40.

What libraries are used for animations in 30 Days of React Native?

It references libraries like react-native-linear-gradient and react-native-scrollable-tab-view for specific effects. However, check their current versions and compatibility, as they might be outdated or deprecated.

Can I use these demos directly in my production app?

Not recommended, as the code is outdated and demos are for learning purposes only. Use them as inspiration and reimplement features with current libraries and React Native best practices.

Open-Awesome

30-days-of-react-native

JavaScript

A collection of 30 React Native example apps and demos covering UI, animations, gestures, and native features.

GitHub

6.9k stars1.4k forks0 contributors

What is 30-days-of-react-native?

30 Days of React Native is a collection of 30 small demo applications built with React Native, each demonstrating a specific mobile development concept. It provides practical examples of UI animations, native integrations, and real-world app features to help developers learn React Native through hands-on projects. The project covers topics like gesture handling, maps, Touch ID, push notifications, and complex UI layouts.

Target Audience

Mobile developers learning React Native, particularly those seeking practical, visual examples of animations, native features, and UI patterns. It's also useful for developers looking for reference implementations of common mobile app functionalities.

Value Proposition

It offers a structured, daily approach to learning React Native with complete, runnable examples. Unlike generic tutorials, it focuses on building real app-like demos, providing immediate visual feedback and practical code snippets for common mobile development challenges.

Overview

30 days of React Native demos

Use Cases

Best For

Learning React Native animations and gesture handling
Exploring native module integrations like Touch ID and OpenGL
Building reference implementations of popular app UIs (e.g., Twitter, Tinder, iMessage)
Practicing cross-platform mobile development with React Native
Finding ready-to-run demo code for specific React Native features
Understanding complex UI layouts and navigation patterns in mobile apps

Not Ideal For

Developers needing up-to-date, production-ready code with current React Native versions
Teams building for Android who require complete, tested setup instructions and full compatibility
Learners who prefer guided tutorials with step-by-step explanations over code-only examples

Pros & Cons

Pros

Visual Demo Collection

Each day includes animated gifs showing the functionality, making it easy to grasp UI animations and gestures visually without running the code immediately.

Hands-on Code Examples

Provides runnable, self-contained projects for various features like native integrations (e.g., Touch ID, maps) and complex layouts, encouraging practical learning by doing.

Library References

Cites specific React Native libraries (e.g., gl-react-native, react-native-touch-id) in many examples, helping users discover and explore tools for their own projects.

Cross-Platform Focus

Demos are designed for iOS and Android using React Native's cross-platform components, though the README notes limitations like removed Android-incompatible libraries.

Cons

Outdated React Native Version

Targets React Native v0.40, which is severely outdated; using it with current versions requires significant modifications due to breaking changes in APIs and dependencies.

Incomplete Content

Multiple days are marked 'TO BE UPDATED' (e.g., Days 4, 6, 12), and Android setup is listed as 'TODO', reducing the promised 30-day learning value and reliability.

Lack of Explanatory Content

No tutorials, code walkthroughs, or detailed explanations in the README; users must decipher implementations from source code alone, which can be challenging for beginners.

Frequently Asked Questions

Related Projects

F8 App 2017

Source code of the official F8 app of 2017, powered by React Native and other Facebook open source projects.

Stars13,884

Forks2,461

Last commit3 years ago

react-native-nw-react-calculator

Mobile, desktop and website Apps with the same code

Stars5,202

Forks860

Last commit5 years ago

GitPoint

GitHub in your pocket :iphone:

Stars4,768

Forks772

Last commit2 years ago

Status.im

a free (libre) open source, mobile OS for Ethereum

Stars4,022

Forks990

Last commit1 month ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub