React Native

2022/05/27 (增加連結)

官方文件

• Getting Started - react native

簡介

• You are NOT a React Native noob (from React to React Native)

• React Native: How to Setup Your First App

• Getting Started with React Native in 2019: Build Your First App

• App development with React Native. Develop a native app for both iOS and Android using one code base

• Deep dive into React Native’s New Architecture

  • JavaScript Interface(JSI)

  • Fabric

  • Turbo Modules

  • CodeGen

• Why React Native? — Mobile App Development Part 0

• Props & State

  • Props and State in React Native explained in Simple English

• Working with Objects in React

教學

• React Native教學 Part 1 - 詳盡新手入門 (2018)

  • 傳統Native版：iOS和Android的App entry point分開，但App裡面可以共用Component，以及可以安裝各自平台的Native package（最重要的分別）

  • CRNA版：只有一個App.js，基本上iOS和Android都是同一個App，不用處理平台間的分別，甚至不用安裝XCode或Android Studio，但一些有Native dependencies的library不能用。

  • Expo版：不屬於官方版本，但本人推薦使用，以下會詳述。

• React Native教學 Part 2 - Project Structure

• React Native教學 Part 2.5 - 選擇Navigation (推薦React Navigation)

• React Native教學 Part 3 - Component

• React Native教學 Part 3.5 - 概念分析：Declarative Programming

• React Native教學 Part 4 - Props & States

• React Native教學 Part 4.5 - This Binding和Arrow Function（箭頭函式）

• React Native教學 - Part 5 Component Lifecycle

開發環境

• Android Studio

• XCode

• Visual Studio Code with Node.js

  • React Native IDE 使用VS Code

    • 採用react native tool & react-native-cli

  • React Native Environment Setup

    • 採用react native tool & react-native-cli (on Mac)

  • Learning React Native: where to start (2017)

    • STEP 1: Get the right equipment

      • 建議採用 VS Code

    • STEP 2: Read React Native Express

    • STEP 3: Learn Navigation

    • STEP 4: Dive into the framework

  • VSCode for React Native (2017)

  • Setting up React Native with Expo, TypeScript, Jest and Visual Studio Code (2017)

  • Learn Once, Write Anywhere – 在 Visual Studio Code 開發 ReactNative 應用程式 (2016)

• GUI Tool

  • Laska

    • 可以把設計好的內容匯出到react native的專案

  • Deco (IDE, open source, for Mac)

    • 可以直接設計react native app

  • builderX (web based) (30天免費試用)

• 7 Best React Native Development Tools for Mobile Developers

  • Visual Studio Code

  • Flipper

  • React Native Debugger

  • Expo

  • Redux

  • Ignite

  • Nuclide

• Building Serverless Mobile Applications with React Native & AWS

• Create a React Native App on an Android emulator

• React Native's re-architecture in 2020

• What’s New in React Native 0.63? (2020/05/18 RC0)

  • Native Colors

  • LogBox

  • Pressable

• What’s New With React Native v0.64

• Enable the new JSX Transform in React Native 0.64

• Upgrading to React Native 0.64.1 without headaches

• What’s New in React Native 0.69 — How to Upgrade and Why it Matters

Expo

• https://snack.expo.io/ 是個不錯的起點，先下載expo到你的手機上，接下來在https://snack.expo.io/寫的程式碼，就可以直接在你的手機上看成果了 (詳參: Snack — A Playground for React Native)。

• Get Started With Expo / Expo document

  • Expo --- 跨平台 App 開發從零到上架系列

    • Expo DAY1 --- Introduction

    • Expo DAY2 --- Pros v.s Cons (未完成)

    • Expo DAY3 --- Installation

    • Expo DAY4 --- Hello Expo!

    • Expo DAY5 --- Writing Comments, Open Project & Snack

    • Expo DAY6 --- Debugging (未完成)

    • Expo DAY7 --- View, Text & Assets (只完成 View)

    • 這系列的主要參考來源

      • React Native Documents (官方網站)

      • React Native Core Components and APIs (官方網站)

      • Expo JDK (官方網站)

• Expo APIs (SDK) (source code)

  • Expo SDK

• Building React Native Apps — Expo or not?

  • When and Why Should I Use Expo?

    • Fastest way to build React Native Apps

    • You don’t need to know Native Mobile coding

    • No Xcode, No Android Studio

    • Publish Over The Air (OTA) Updates Instantly

    • In-built access to Native APIs

    • It is FREE and Open Source

  • Why Not Expo?

    • If you are a native mobile developer, or have native developers on the team

    • Adds another layer of abstraction — Too much magic

    • Not all iOS and Android APIs are available yet

    • Can’t pick your choice of Push Notification service

  • You can always Eject from Expo

    • You may have to rewrite your push notification code

    • Refactor code to use other libraries that are not a part of Expo ecosystem

    • Navigation changes and general code refactoring

• Speeding up the build of a surprise dinner app in React Native using Expo (part 1)

• Battle testing a ridesharing API and React Native’s MapView in Expo (part 2)

• Supporting multiple languages in React Native with Expo’s Localization module (part 3)

• The intricacies of nesting navigators in React Native using react-navigation (part 4)

• Creating a Multi-Language App in React Native

  • react-native-localize

  • i18n-js

• Building a React Native App using Expo and Typescript (Part 1)

• Building a React Native App using Expo and Typescript (Part 2)

• Accessing Geo-location and App Permissions in React Native and Expo

• React Native: How to Load and Play Audio

• Expo SDK 38 is now available

  • New Notifications API in Managed workflow

  • Build-time Updates in Bare workflow

  • Faster Tooling, Better Performance

  • Revamped tabs template: simpler, dark mode support, TypeScript

  • New Features

    • Authentication

    • Google Fonts

    • Screen Capture

    • Status Bar

    • Linking

    • Slider

    • Picker

    • Storage

  • API improvements and additions

  • Dropping SDK 34; will drop SDK 35 next release

  • ExpoKit → Bare workflow

• Expo SDK 41

• Expo SDK 41 beta is now available

• What’s new in Expo modules infrastructure : A look into the history of Expo modules and why “react-native-unimodules” is being replaced with the “expo” package (Expo 43)

• How to Build and Distribute Any React Native App With New Expo Services

Form

• How to Create Forms for Your React/React Native App

  • Controlled vs Uncontrolled Forms

  • How to choose a form library?

  • Popular Form Libraries

    • Formik -React and React Native

    • Formsy React -React and React Native

    • React Hook Form -React and React Native

    • Redux Forms -React and React Native

• How to Validate Forms in React Native — a Personal Approach

  • with react-native-form-validation

• Validating Forms in React Native

  • with validate.js

• React Native and Forms Redeux: Part 1

• React Native and Forms Redeux: Part 2

• React Native text input forms simplified with useReducer hook

資料連接

JSON

Networking (存取JSON資料) (更多資料: Using Fetch API)

Firebase

• react native with firebase

Database

• React Native Insert Update Display Delete CRUD Operations MySQL DB (with PHP)

• How to build a real-time todo app with React Native with Elasticsearch

• Employee Directory: Sample Application with React Native and Node.js (on heroku)

Redux

• Redux 入門

• Redux & React (《從0到100打造一個React Native boilerplate》系列 )

• Tutorial 1: React Native Redux Boilerplate

• Tutorial 2: React Native Redux with CRUD operations

• Getting Started with React Native & Redux

• How to integrate Redux into your application with React Native and Expo

• Using React & React Native without State management library

  • Approach 1: Global Store — Single Source of Truth

    • Context

    • Export method setState

  • Approach 2: Manage state in services

相關的程式庫(library)

• 15+ React Native Component Libraries You Should Know in 2020

  • NativeBase

  • Teaset

  • Material Kit React Native

  • React Native Elements

  • Lottie for React Native

  • React Native Vector Icons

  • Ignite CLI

    • Ignite CLI is a solid starter kit for React Native apps.

  • React Native Mapview

  • React Native Gifted Chat

  • React Native UI Kitten

  • React Native Paper

  • React Native Material Kit

  • React Native Material UI

  • RNUILIB

  • Nachos UI

  • Shoutem

• 11 React Native Component Libraries you Should Know in 2019

  • NativeBase

  • React Native Elements

  • Shoutem

  • UI Kitten

  • React Native Material UI

  • React Native Material Kit

  • Nachos UI

  • React Native UI Library

  • React Native Paper

  • React Native Vector Icons

  • Teaset

• Top 10 React Native Frameworks/ libraries for Your Cross-Platform Mobile App (2019)

  • NativeBase

  • React Native Elements

  • React Native Maps

  • UI Kitten

  • React Native Material UI

  • React Native Fabric

  • Lottie-web

  • React Native UI Library

  • React Native Paper

  • React Native Vector Icons

• The Beginner’s Guide to React Native UI Libraries (2018) ** 很有用 **

  • React Native Icons

    • React Native Vector Icons

  • React Native Components

    • NativeBase

      • NativeBase KitchenSink

        • It is an example app with all the UI components of NativeBase.

  • React Native Forms

    • TComb Form Native

      • Snowflake

        • Snowflake is a React Native starter mobile app for iOS and Android. It uses and showcases different tools and libraries from React Native, TComb, Redux, Parse.com, Jest. Mainly it is a great example app for TComb, if not the best, as it covers around 88% of the TComb Forms Native Library components.

  • React Native Elements

    • The aim of React Native Elements is to provide an all-in-one UI kit for creating apps in React Native. There are many great UI components made by developers all around open source. React Native Elements takes the hassle of assembling these packages together by giving you ready-made kit with consistent API, and look and feel.

  • React Native Resources

    • React Native Docs

    • React Native Community

    • React Native Blog

• React Native App Stack, March 2017

  • React Native - Full Pack

  • Libraries

    • React Native

    • Redux architecture following the Ducks pattern

    • redux-observable for side effects

    • redux-persist for offline caching

    • react-navigation for navigation

    • styled-components for UI styling

      • Styling your React Native App with Styled-Components

      • How to Use Styled Components in React Native

  • Tooling

    • Yarn for dependency management

    • Flow for static type checking

    • Jest and Enzyme for testing

    • Prettier for code formatting

    • Storybook for component style guide

• React Native Libraries / react native directory (數字更新時間:2020/07/17)

  • formik (Starts: 23,372 )

  • react native elements (Stars: 19,023 ) (EXPO)

    • Introducing React Native Elements

  • react navigation (被推薦 & Stars: 18,451 ) (EXPO)

    • React navigation from Daniel Merril

      • Routing and Navigation (行動裝置程式設計課程教材)

  • react-native-pose (Stars:17,726 )

  • react-native-web (Stars:16,938 )

  • native-base (Stars:14,037 ) (EXPO)

    • 支援react native及vue native

    • New NativeBase Update! Now at v2.3.8!

    • React Native — How to create a Multi-Select list with highlight options based on Nativebase

  • react-native-vector-icons (被推薦 & Stars: 13,621 ) (EXPO)

  • lottie react native (被推薦 & Stars: 13,178 ) AirBnb的手機Animation程式庫 (EXPO)

    • Using Lottie with React Native (sample on snack.expo.io)

    • Boost Your User Experience with Lottie for React Native

    • Lottie React Native Tutorial

    • How to create a beautifully animated loader in React Native

      • Use Airbnb’s Lottie library to jazz up your loaders.

    • Lottie Animations in React Native: Implementation Guide

  • react-native-windows (Stars:12,294 )

  • reactotron (Stars:12,140 ) (EXPO)

  • ** 以下只列被推薦 **

  • react-native-navigation (被推薦 & Stars: 11,552 )

    • Before you start (官方文件，最新版本7.0.0 2020/09/27)

    • React Native Navigation (V2) by Wix — Getting Started (2018)

    • User Authentication with React Native & AWS using React Native Navigation (V2)

  • react-native-maps (被推薦 & Stars: 11,241 ) (EXPO)

    • How to use Google Autocomplete Search API and React Native Maps in React Native to fetch user location ?

  • react-native-animatable (被推薦 & Stars: 8,029) (EXPO)

  • react-native-calendars (被推薦 & Stars: 5,717 ) (EXPO)

    • How to Integrate Custom Calendar Event Creation In a React Native App

  • react-native-tab-view (被推薦 & Stars: 3,965 ) (EXPO)

  • react-native-onesignal (被推薦 & Stars: 1,184 )

  • react-native-root-siblings (被推薦 & Stars: 477 ) (EXPO)

  • @expo/vector-icons (被推薦 & Stars: 382) (EXPO)

  • react-native-drawer-layout (被推薦 & Stars: 253 ) (EXPO)

範例

• react-native-elements-app (source code)

  • react native elements

• How to build a news app with React Native

  • News API, Fetch API, FlatList, Pull down to refresh, Linking

• React Native YouTube Replica

• Simple Ratings View in React Native

• Use Facebook SDK like a pro in React Native — 1x06

• React Native 簡介：以 JavaScript 建構 iOS App ( Introduction to React Native: Building iOS Apps with JavaScript ) 使用Google Books API的範例 (2015年4月)

• How to add app icons and splash screens to a React Native app in staging and production

• Building a Lightweight Speedometer in React Native

• Mark a Coordinate on Mapbox Map in React Native

• Google Map and Places in a Real-World React Native App (Part 1): A complete React Native guide for building an app from scratch using Expo on Android

• Google Maps and Places in a Real-World React Native App (Part 2): Implementing navigation, a search bar, and MapView

  • react-native-maps

  • react-native-dotenv

  • UI kits: Native Base and React Native Elements

    • Installing React Native Elements and Native Base

  • Designing Screens and Components

  • Navigator Component

    • React Navigation 4.x

• How to make your React Native apps still look good on phones with notches

  • React-native-safe-area-view

Tips & Tricks

• What makes Hermes engine (React Native) fast?

  • Hermes will send a precompiled optimised byte code instead of plain javascript source so it reduces startup time, decrease TTI by nearly half, and does much more!

• 5 Best Practices for React Native Development You Probably Don’t Know

  • Directory resolution with package.json on every directory (works with any javascript beside react-native).

  • Use ternary operators when necessary, not all time.

  • Lock dependencies, prevent the breaking changes.

  • Modify project level or app level build.gradle, not inside node_modules.

  • Create Class Based Components instead simpler Functional Components, for either stateless or stateful component, you can use PureComponent.

• Authentication

• • First experiences with React Native: bridging an iOS native module for app authentication

  • React Native: User Authentication Flow Explained: How to handle in-house authentication in React Native apps, with AsyncStorage

  • A Complete Flow for Social Login with React Native, Expo, and Amplify

  • How To Add Authentication to Your React Native App: Authenticate your users the modern way: with React Hooks and the React Context API using Expo or React Native CLI

  • React Native: Sign in with Apple

• Bluetooth

  • Using Redux for Bluetooth communication in a React Native App

  • How to build a bluetooth low energy scanner using react native

• Internet connection

  • Check for an Internet Connection in a React Native App

    • react-native-netInfo

• Context

  • A Practical React Native Problem Solved with the Context API

• Performance

• • React Native Performance: Arrow Functions & Binding

    • 在render裡盡量不要用arrow function

  • How We Improved React Native List Performance by 5X

  • React Native Performance: Do and Don't

  • How to Optimize a React Native App for Better Performance?

    • Upgrade Packages

    • Using better Navigation Libraries

    • Redux or Flux — Common State Management

    • Upgrade React Native to the latest version

    • Upgrade dependency packages

    • Upgrade to React-Native to have better access to libraries

  • How we reduced our React Native app size by 60% with a few simple fixes

    • Optimizing assets with the Android Size Analyzer

    • Optimizing our React Native JavaScript bundle

  • 6 Simple ways to speed up your react native app.

  • Improve Performance of React-Native App

  • Ways To Reduce the JS Bundle size in React Native

• What I learned from developing iOS and Android apps with React Native

• Scaling React Native apps for Tablets

• Organizing a React Native Project

• Using React Native: One Year Later

• After building my first React Native app, I’m now convinced it’s the future.

• Conditional rendering in React Native

• • Approach 1: use ternary expression (inline solution)

  • Approach 2: assign the view to a value and return it

  • Approach 3: create separate function and delegate the logic to that function

• Using Sensors in React Native

• How to deliver a React Native app to the client

• React Native at Airbnb: The Technologysel

• What’s Next for Mobile at Airbnb

• React is not the new JQuery

• Building a Cross-Platform Mobile Team

• Five React Native gotchas you need to know about

• • Redux will make things easier, learn it

  • React-native-maps is really hard to get working

  • Don’t use Typescript if you’ve already gotten into the habit of a particular build process

  • The iOS release to the App store process even more complicated than normal

  • Use SSH with Fastlane

• Handling Network APIs in React-Native : My Approach

  • React-Native Docs Approach — Using Fetch

  • My Approach

    • Axios

    • But with complexity in App I created a central file for all the handling of networking. It would also be easy to handle response codes and other errors at a same place rather then in each Component.

• How to use Babel macros with React Native

• Pointers for your ‘next’ React Native project.

• Using Expo, Gulp, and Webpack to Create and Publish React Components to NPM

• Import local packages in React Native using NPM Link and Haul

• Turn Any* JavaScript Library into a React Native Component

• React Native FAQ

  • React Native Business Questions

    • Does React Native save money?

    • How much code-reuse do I get with React Native?

    • What about alternatives to React Native, like Flutter?

    • What product/company is a good fit for React Native?

  • React Native Technical Questions

    • How “JavaScript” is React Native really?

    • What will be difficult in React Native?

    • Can I develop iOS apps from Windows or Linux?

• Multilingual React Native app with Redux

• Using Bitrise CI for React Native apps

• Migrating a Web-Based React Tic-Tac-Toe Game to React Native

• How I built my first React Native app for my first freelance client

• React Native: Working with Notification Badges

• React Native: Working with Error Boundaries

• Deep Linking

  • Deep Linking in React Native with Universal Links and URL Schemes

  • Easy Deep Linking with React Native and Expo

• The Best React Native Templates for 2020: Get your project started with clean, working codebases that you can modify to your heart’s desire

• Lessons learned

• • Things about React Native I found the hard (but rewarding) way

  • Lessons I learned while building in React Native

  • What I’ve Learned Building 4 React Native Apps Over 3 Years

  • Deciding on React Native

Tools

• Top 9 Tools for Easy & Speedy React Native App Development

• Setting up ESLint and EditorConfig in React Native projects

Typescript

• Building a React Native App using Expo and Typescript (Part 1)

• Using React Native with TypeScript just became simple

• How to set up typescript with react-native

• Unofficial React Native TypeScript

• Typescript + React Native = 💖

User Interface

• Custom Icons and Typographies in React Native

• Building an app in Views and React (Part 1)

• responsive

  • Building a Fast and Responsive UI in React Native

  • How to develop responsive UIs with React Native — 1x03

  • Build responsive React Native views for any device and support orientation change

  • Responsive Inputs in React Native

• Animation

  • What the React Native docs forgot to tell you about animations

  • React Native Animation Challenge #1 (with react-navigation-fluid-transitions)

  • React Native ActivityIndicator for a Quick & Easy Loading Animation

  • Animated Transition in React Native!

  • Animating Gradients in React Native

  • Animated Graph in React Native

  • React Native Reanimated Switch

  • Reanimated 2.0 stable release is out!

  • React Native: Swipe Cards : using PanResponder and the Animated API.

• Button

  • So I Built my own React Native Button

  • Using Buttons in React Native

    • If your goal is to simply render a string of text then a Button element is an easy choice to go with, however, if you plan on creating a heavily stylized button it may be a good idea to think about using the TouchableOpacity wrapper.

• Carousel

  • React Native Zoom Carou

  • React Native Carousel

• Chart

  • 10 Best React Native Chart Libraries

  • Top 10 React Native Chart Libraries in 2020 (似乎沒有花時間去檢查一下更新的狀況)

    • react-native-charts-wrapper (expo ?)

      • This library is React Native wrapper of popular Native charting library MPAndroidChart and Charts

    • Anychart (與expo相容)

    • react-native-svg-charts (expo ?)

      • How to Build React Native Charts With Dynamic Tooltips : Create beautiful charts with react-native-svg-charts

    • react-native-pathjs-charts (停止維護)

    • react-native-highcharts (與expo相容)

    • react-native-pure-chart (很久沒更新)

    • clchart (很久沒更新)

    • react-native-chart-android (很久沒更新)

    • react-native-pie-chart (很久沒更新)

    • react-native-chart-kit

      • 7 Type of Graph using React Native Chart Kit

      • React Native – Graph Using Chart Kit

      • expo-chart-kit (與expo相容)

  • Top 12 React Native Chart Libraries in 2020 (似乎沒有花時間去檢查一下更新的狀況)

    • React Native Plotly

      • react-native-plotly is just a webview that has plotly.js injected into it

    • React Native F2chart (很久沒更新)

    • React Native Echarts Wrapper

      • 透過webview

    • React Native Clchart (很久沒更新)

    • React Native Rheostat (很久沒更新)

    • React Native Responsive Linechart

    • react-native-charts-wrapper (expo ?)

      • This library is React Native wrapper of popular Native charting library MPAndroidChart and Charts

    • React Native Pie (很久沒更新)

    • React Native Pure Chart (很久沒更新)

    • React Native Speedometer Chart

    • React Native Svg Charts (expo?)

    • React Native React Vis

    • React Native Charts (很久沒更新)

  • 根據react native directory

    • victory-native (支援expo)

      • react-native-svg

    • React Native Responsive Linechart (支援expo)

• List

  • How to build a React Native FlatList with realtime searching ability

  • How to Use the SectionList Component — React Native Basics

• Material Design

  • Super Cool Material UI components in React Native!

  • Getting Started With Material-UI For React (Material Design For React)

• Modal

  • Better modals in React Native

• Style

  • A Tale of Three Buttons: Exploring React Native Styling

  • How to use the Style Transfer API in React Native with Fritz

  • Theming in React Native Explained

  • React Native Dark Mode and Theming

• Webview

  • Creating an embedded browser with React-Native using react-native-webview

• A first look at firstBorn, React Native’s new component framework

Image

• Smart Images in React Native

• Caching images in React Native

  • React Native Cache Control: The big caveat here is that, at the time of writing, cache-control is supported only for iOS. On top of that, it does not always work as it should, providing a less-than-optimal solution.

  • React-native-cached-image: A better alternative, in my opinion, is a package called react-native-cached-image by Kfir Golan. Before we can use this package, however, we must first add react-native-fetch-blob on which react-native-cached-image relies for its file system access.

• React Native Image Upload and Cropping with Firebase (sample code with react-native-fetch-blob)

• 5 Things to know about Images in React Native (react-native-expo-image-cache)

  • Don’t use prefetch()

  • Use ExpoKit

  • Dealing with concurrency on Android

  • Progressive image loading

  • There is a serious bug in <Image>

• React Native Custom Image Picker With Upload Progress

Video

• How To Play Video With React Native And Expo

• Building a Music Streaming App using React Native

• Building VOD Apps with React Native

Test

• E2E Testing React Native with Detox + Screenshots

• QA Automation for Mobile Apps with Appium: An Overview

• How to set up Jest and Enzyme to test React Native apps

• React Native 0.62 and Flipper Will Change Your Mobile Development Experience and make it easier!

  • Flipper is a platform for debugging iOS, Android and React Native apps.

• Flipper — A React Native revolution

Native code

• Building React Native Projects with Native Code

  • Building React Native Projects with Native Code: Part 1

  • Building React Native Projects with Native Code: Part 2

  • Building React Native Projects with Native Code: Part 3

  • Building React Native Projects with Native Code: Part 4

  • Building React Native Projects with Native Code: Part 5

  • Building React Native Projects with Native Code: Part 6

• Sending events to JavaScript from your native module in React Native

• React Native: The native parts (Android edition)

• From Native to JavaScript and back or trigger native components in React Native

• How to build a React Native Android Library

• Your First Hybrid App in Minutes — React Native on the Web

• React Native Bridging — How to Make Linear Gradient View

• React Native Bridge

  • React Native Bridge for iOS and Android

  • React Native: The Quickest Way to Use Any Native iOS or Android Library: Learn how to use any native library by creating a React Native bridge

  • How to build react-native bridge and get PDF Viewer

參考資料

• Building a Mobile App in 10 Days with React Native

• Flexbox

  • Understanding Flexbox in React Native

  • The Complete CSS Flex Box Tutorial

Tools

• My Development Toolset for React Native iOS Development

• Essential Tools For React Native Development

  • IDE

    • Atom

    • Visual Studio Code

  • React Native Development

    • Redux

    • Expo

    • Ignite

    • Flow

    • ESLint

    • Reduxsauce

  • React Native UI Components

    • Snowflake

    • NativeBase

  • React Native Design Tools

    • InVision (free)

      • InVision簡化團隊工作的好幫手

    • Sketch (Mac, US$99 per year)

    • Balsamiq (cloud: US$9/month)

    • Adobe XD (part of Creative Cloud)

  • React Native Testing Tools

    • Enzyme

    • Reactotron

  • React Native Beta Testing Tools

    • Instabug

• Tools for React Native Development

  • IDE

    • Top 10 Editors For React Native Mobile App Development

  • Development Tools

    • SDK

      • EXPO

    • Code Quality

      • ESLint

      • Flow

    • Testing

      • Enzyme

    • Debugging

      • Reactotron

  • Boilerplates and UI Frameworks

    • Snowflake

    • Ignite

    • Nativebase

  • Libraries and Components

    • Navigation

      • React Navigation

    • State management

      • MobX

      • Redux

    • Animations

      • Animatable

    • Commonly used components and libraries

      • styled-components: allows you to write CSS code to style your React components.

      • react-native-calendar: for showing a calendar that users can interact with.

      • react-native-datepicker: for picking dates and times.

      • react-native-progress: for creating progress bars and spinners.

      • react-native-spinkit: a collection of loading indicators.

      • Vector Icons: allows you to use icons from your favorite icon font sources such as Font Awesome and Material Icons.

      • react-native-swiper: turns a collection of images or containers into swiping components.

      • react-native-scrollable-tab-view: tabbed navigation that you can swipe between.

      • react-native-lightbox: for viewing images in fullscreen pop-overs.

      • react-native-maps: allows you to integrate Google Maps into your apps. Not all features available in the Google Maps API are available, but the functionality it provides should be enough in most cases.

      • SGListView: a memory-friendly implementation of React Native’s built-in ListView component. If you need to show huge lists in your app, use this instead of ListView.

      • Formik: makes dealing with forms in React Native less painful. It allows you to get values in and out of form state, validate your forms, and handle their submission.

      • react-native-i18n: for implementing internationalization in your apps.

      • react-native-push-notification: implements local and remote push notifications.

      • InstantSearch: a collection of components for implementing search.

      • react-native-fs: allows you to access the device’s native filesystem.

      • react-native-camera: a camera component which allows you to take photos and videos from your app.

      • react-native-video: for playing videos from your filesystem or from a URL.

      • react-native-sqlite-storage: for storing and manipulating data from an SQLite database.

        • Integrating a prepopulated SQLite into React Native

      • react-native-store: a key-value store based on AsyncStorage.

      • react-native-webrtc: for implementing WebRTC.

  • Web Services

    • database

    • analytics

    • push notifications

    • code updates

    • continuous integration