Convert Figma logo to code with AI

jondot logoawesome-react-native

Awesome React Native components, news, tools, and learning material!

35,696
4,037
35,696
18
View on GitHub

Top Related Projects

react's avatar

react-native

126,244

A framework for building native applications using React

callstack's avatar

react-native-paper

14,395

Material Design for React Native (Android & iOS)

react-native-elements's avatar

react-native-elements

25,853

Cross-Platform React Native UI Toolkit

wix's avatar

react-native-navigation

13,183

A complete native navigation solution for React Native

infinitered's avatar

ignite

19,875

Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 9 years of continuous development and counting.

oblador's avatar

react-native-vector-icons

17,915

Customizable Icons for React Native with support for image source and full styling.

Quick Overview

The jondot/awesome-react-native repository is a curated list of awesome React Native components, libraries, and resources. It serves as a comprehensive guide for developers working with React Native, providing a wide range of tools, libraries, and best practices to help build high-quality mobile applications.

Pros

  • Comprehensive Collection: The repository covers a vast array of React Native-related resources, including UI components, state management libraries, navigation solutions, and more, making it a one-stop-shop for React Native developers.
  • Active Community: The project has a large and active community, with frequent updates and contributions from developers around the world, ensuring the content remains relevant and up-to-date.
  • Organized Structure: The repository is well-organized, with clear categorization and tagging, making it easy for developers to quickly find the resources they need.
  • Detailed Descriptions: Each entry in the repository includes a brief description, making it easier for developers to understand the purpose and functionality of the listed resources.

Cons

  • Overwhelming Choices: The sheer number of resources listed in the repository can be overwhelming for new React Native developers, making it challenging to identify the most suitable tools for their specific needs.
  • Varying Quality: While the repository aims to curate high-quality resources, the quality of the listed projects can vary, and some may not be actively maintained or well-documented.
  • Outdated Information: As with any curated list, there is a risk of some resources becoming outdated or no longer relevant over time, requiring regular maintenance to ensure the information remains current.
  • Subjective Curation: The selection of resources in the repository is inherently subjective, and developers may have different preferences or needs that are not fully represented in the list.

Code Examples

This repository is a curated list and does not contain any code examples. It is a reference guide for React Native developers to discover and explore various libraries, tools, and resources.

Getting Started

As this is a curated list and not a code library, there are no specific getting started instructions. However, developers can follow these general steps to make the most of the jondot/awesome-react-native repository:

  1. Browse the Repository: Explore the different categories and sections of the repository to get an overview of the available resources.
  2. Identify Your Needs: Determine the specific features, libraries, or tools you require for your React Native project.
  3. Explore Relevant Entries: Dive into the entries that match your requirements, read the descriptions, and investigate the provided links to learn more about the resources.
  4. Evaluate and Compare: Compare the listed resources, considering factors such as documentation, community support, and compatibility with your project's needs.
  5. Integrate and Experiment: Once you've identified the suitable resources, integrate them into your React Native project and experiment with their functionality.
  6. Contribute and Engage: If you find a resource that is not listed or have suggestions for improving the repository, consider submitting a pull request to contribute to the project.

Competitor Comparisons

react logo

react-native

126,244

A framework for building native applications using React

Error generating comparison

callstack logo

react-native-paper

14,395

Material Design for React Native (Android & iOS)

Pros of react-native-paper

  • Comprehensive UI component library specifically designed for React Native
  • Follows Material Design guidelines, ensuring a consistent and modern look
  • Actively maintained with regular updates and improvements

Cons of react-native-paper

  • Limited to Material Design aesthetics, which may not suit all app styles
  • Steeper learning curve for developers unfamiliar with Material Design principles
  • May increase app bundle size due to the inclusion of many components

Code comparison

react-native-paper:

import { Button } from 'react-native-paper';

const MyComponent = () => (
  <Button mode="contained" onPress={() => console.log('Pressed')}>
    Press me
  </Button>
);

awesome-react-native:

// No direct code comparison available as awesome-react-native is a curated list,
// not a component library. It would typically link to various libraries or components.

Summary

react-native-paper is a comprehensive UI component library for React Native, following Material Design guidelines. It offers a wide range of ready-to-use components but is limited to Material Design aesthetics.

awesome-react-native, on the other hand, is a curated list of resources, libraries, and tools for React Native development. It provides a broader overview of the React Native ecosystem but doesn't offer components directly.

Developers should choose based on their specific needs: react-native-paper for a complete Material Design UI kit, or awesome-react-native for discovering various tools and libraries in the React Native ecosystem.

react-native-elements logo

react-native-elements

25,853

Cross-Platform React Native UI Toolkit

Pros of React Native Elements

  • Provides a comprehensive set of pre-built UI components
  • Offers consistent styling and theming across components
  • Regularly updated and maintained by an active community

Cons of React Native Elements

  • Limited flexibility for highly customized designs
  • Larger bundle size due to inclusion of all components
  • Learning curve for customizing components beyond basic props

Code Comparison

React Native Elements:

import { Button } from 'react-native-elements';

<Button
  title="Click me"
  buttonStyle={{ backgroundColor: 'blue' }}
  onPress={() => console.log('Button pressed')}
/>

Awesome React Native (using a typical button component):

import { TouchableOpacity, Text } from 'react-native';

<TouchableOpacity
  style={{ backgroundColor: 'blue', padding: 10 }}
  onPress={() => console.log('Button pressed')}
>
  <Text style={{ color: 'white' }}>Click me</Text>
</TouchableOpacity>

React Native Elements provides a more streamlined approach with pre-styled components, while Awesome React Native offers a curated list of resources and libraries, allowing for more flexibility but requiring additional setup and customization.

wix logo

react-native-navigation

13,183

A complete native navigation solution for React Native

Pros of react-native-navigation

  • Dedicated navigation solution with native performance
  • Extensive customization options for navigation UI
  • Strong community support and regular updates

Cons of react-native-navigation

  • Steeper learning curve compared to curated list approach
  • Focused solely on navigation, lacking broader React Native ecosystem coverage
  • May require additional setup and configuration

Code Comparison

react-native-navigation:

Navigation.setRoot({
  root: {
    stack: {
      children: [
        {
          component: {
            name: 'Home'
          }
        }
      ]
    }
  }
});

awesome-react-native (using react-navigation):

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Summary

react-native-navigation is a specialized navigation library offering native performance and extensive customization. awesome-react-native, on the other hand, is a curated list of React Native resources, including various navigation solutions. While react-native-navigation provides a more focused and optimized navigation experience, awesome-react-native offers a broader overview of the React Native ecosystem, allowing developers to choose from multiple navigation options and other related tools.

infinitered logo

ignite

19,875

Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 9 years of continuous development and counting.

Pros of Ignite

  • Provides a complete boilerplate and CLI tool for React Native projects
  • Includes pre-configured best practices and common libraries
  • Offers a standardized project structure and development workflow

Cons of Ignite

  • Less flexibility compared to choosing individual components
  • Steeper learning curve for developers new to the Ignite ecosystem
  • May include unnecessary dependencies for simpler projects

Code Comparison

Ignite (project setup):

npx ignite-cli new MyAwesomeApp
cd MyAwesomeApp
npx react-native run-ios # or run-android

Awesome React Native (manual setup):

npx react-native init MyAwesomeApp
cd MyAwesomeApp
# Manually add desired libraries and configurations
npx react-native run-ios # or run-android

Key Differences

  • Awesome React Native is a curated list of resources, while Ignite is a project generator and boilerplate
  • Awesome React Native offers more flexibility in choosing individual components and libraries
  • Ignite provides a more opinionated and structured approach to React Native development

Use Cases

  • Awesome React Native: Ideal for developers who want to explore various options and customize their stack
  • Ignite: Best for teams looking for a standardized, pre-configured React Native development environment

Community and Maintenance

  • Both projects have active communities and are well-maintained
  • Awesome React Native has more stars and contributors due to its nature as a curated list
  • Ignite has regular releases and updates to its boilerplate and included libraries
oblador logo

react-native-vector-icons

17,915

Customizable Icons for React Native with support for image source and full styling.

Pros of react-native-vector-icons

  • Focused specifically on providing vector icons for React Native projects
  • Offers a wide variety of icon sets out of the box
  • Provides an easy-to-use API for implementing icons in React Native apps

Cons of react-native-vector-icons

  • Limited in scope compared to the broader resource collection in awesome-react-native
  • May require additional setup and configuration for some projects
  • Doesn't cover other aspects of React Native development beyond icons

Code Comparison

react-native-vector-icons:

import Icon from 'react-native-vector-icons/FontAwesome';

const MyComponent = () => (
  <Icon name="rocket" size={30} color="#900" />
);

awesome-react-native: This repository doesn't provide direct code examples but instead offers links to various React Native resources, including icon libraries. A typical usage might involve exploring the list and choosing appropriate tools:

// No direct code example available
// Users would typically browse the curated list and select relevant resources

Summary

react-native-vector-icons is a specialized library for adding vector icons to React Native projects, offering a straightforward API and multiple icon sets. awesome-react-native, on the other hand, is a comprehensive collection of React Native resources, covering a wide range of topics beyond just icons. While react-native-vector-icons provides immediate value for icon implementation, awesome-react-native serves as a broader reference for various aspects of React Native development.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README


awesome react native

Awesome

Awesome React Native is a curated list of the best libraries, tools, and learning resources for building React Native apps today. Every entry is checked for maintenance and relevance — if it's here, it works with modern React Native. PRs are welcome, see contributing.

Contents

Getting Started

  • React Native - Official documentation, including environment setup, guides, and API reference.
  • Expo - The recommended framework for building React Native apps: file-based routing, native modules, builds, and updates out of the box.
  • React Native Directory - Searchable, filterable directory of React Native libraries with maintenance and New Architecture compatibility signals.
  • Upgrade Helper - Web tool that shows the exact diff between two React Native versions for painless upgrades.
  • rn-diff-purge - The raw version-to-version diffs powering Upgrade Helper.
  • Expo Examples - Example projects demonstrating Expo APIs and integrations.

AI-Assisted Development

Tools for building React Native apps with AI agents, and for putting AI inside your apps.

Agents & Skills

  • Expo AI Agents Guide - Expo's official documentation for AI-native development: agent setup, llms.txt, and best practices.
  • Claude Code + Expo - Official guide for building, debugging, and deploying Expo apps with Claude Code.
  • Expo Skills - Agent skills that give coding agents Expo-specific knowledge and best practices.
  • Agent Skills - Anthropic's public repository of agent skills, usable with Claude Code and other agents.

MCP Servers

  • Expo MCP - Expo-hosted MCP server: EAS logs, documentation search, and deployment workflows from any MCP-capable agent.
  • mobile-mcp - MCP server for mobile automation on iOS, Android, emulators, simulators, and real devices.
  • ios-simulator-mcp - MCP server for driving the iOS simulator: interact with UI, take screenshots, inspect the view hierarchy.
  • Maestro - E2E testing framework with a built-in MCP server, letting agents run flows and control devices.

On-Device AI

  • react-native-executorch - Declarative on-device AI inference powered by ExecuTorch, from Software Mansion.
  • llama.rn - React Native binding of llama.cpp for running LLMs on device.
  • react-native-fast-tflite - High-performance TensorFlow Lite inference with GPU acceleration.
  • AI SDK - The AI toolkit for TypeScript; works in Expo and React Native apps for chat, streaming, and tool use.

AI App Builders

  • a0.dev - Generates complete React Native apps from a prompt and ships them to the app stores.
  • Rork - AI app builder that generates Expo/React Native projects compiling to native iOS, Android, and web.

Components

UI

Lists

  • FlashList - Shopify's fast and performant list, a drop-in replacement for FlatList.
  • Legend List - High-performance list in pure JS, built for the New Architecture.
  • recyclerlistview - The recycling listview that pioneered high-performance lists in React Native.

Navigation

Sheets, Menus & Toasts

Forms & Keyboard

Text & Rich Content

Image & Camera

Video & Audio

Maps & Location

Charts

Animation & Gestures

Styling & Design Systems

Internationalization

System & Device

Notifications

Web & WebViews

Other Platforms

Data

State Management

  • Zustand - Bear necessities for state management.
  • Jotai - Primitive and flexible atomic state.
  • Redux Toolkit - The official, batteries-included Redux toolset.
  • Legend State - Super fast state with fine-grained reactivity and built-in sync.

Storage & Databases

  • react-native-mmkv - The fastest key/value storage for React Native, ~30x faster than AsyncStorage.
  • AsyncStorage - Simple, asynchronous, persistent key-value storage.
  • op-sqlite - The fastest SQLite library for React Native.
  • expo-sqlite - SQLite database access in Expo, with support for Drizzle ORM.
  • Drizzle ORM - TypeScript ORM with first-class Expo/React Native SQLite support.
  • WatermelonDB - Reactive and asynchronous database for powerful apps that scale.
  • RxDB - Local-first, reactive database that replicates with your backend.
  • Realm - Mobile object database, an alternative to SQLite.

Networking

Services & Integrations

Payments & Monetization

Development Tools

Tooling & IDE

  • Radon IDE - VSCode/Cursor extension that turns your editor into a full-featured React Native IDE with an embedded simulator.
  • EAS CLI - Build, submit, and update iOS and Android apps from the command line.
  • react-native-rename - Rename a React Native app with one command.
  • react-native-bundle-visualizer - See which packages inflate your bundle size.
  • Re.Pack - Webpack/Rspack-based toolkit with code splitting and Module Federation for React Native.

Debugging

  • Reactotron - Desktop app for inspecting React Native apps: state, API requests, performance.
  • Buoy - Devtools that live in your app — and answer to your AI agent.

Testing

  • Maestro - Painless declarative E2E automation for mobile.
  • Detox - Gray-box end-to-end testing and automation framework.
  • React Native Testing Library - Testing utilities that encourage good practices.
  • Loki - Visual regression testing for Storybook.

Builds, Deployment & OTA Updates

  • EAS - Expo Application Services: cloud builds, app store submission, and OTA updates.
  • hot-updater - Self-hostable OTA update solution, a CodePush alternative.
  • Fastlane - Automate building, screenshots, and releasing for iOS and Android.

Building Libraries

Starters & Boilerplates

  • Ignite - Infinite Red's battle-tested boilerplate with CLI and generators.
  • react-native-boilerplate - TheCodingMachine's template for solid, scalable applications.
  • Expo Templates - Official Expo templates, from blank to tabs to full navigation setups.

Open Source Apps

Production apps you can learn from.

  • Bluesky - The Bluesky social app for web, iOS, and Android.
  • Expensify - New Expensify: financial collaboration, chat-centered.
  • Joplin - Privacy-focused note-taking app with sync, on every platform.
  • Mattermost - Mattermost's mobile apps.
  • Rocket.Chat - Rocket.Chat's mobile client.
  • Artsy - The art world in your pocket.
  • YouTrack Mobile - JetBrains' YouTrack client for iOS and Android.

Learning

Staying Up to Date

Contributing

Contributions are welcome! Please read the contribution guidelines first: entries should be actively maintained, work with current React Native, and be genuinely useful to most developers.

Many thanks to everyone on the contributor list :)