Useful React Native References

Some useful references when working with React Native.

Foundation

• JavaScript
• TypeScript
• React
• React Native
• Expo

Navigation

• React Navigation

Data Layer

State Management

• Context API
• Recoil
• React Query
• Zustand
• For handling Store updates - Immer

GraphQL

• Specification
• GraphQL.org
• Relay
• Apollo Client

REST

• Fetch
• Axios
• SWR

Databases

• LokiJS
  • The super fast in-memory javascript document oriented database.
• Browser database

...to understand browser storage, you only really need to understand LocalStorage, WebSQL, and IndexedDB

Internationalization

• react-intl
• react-i18next

Debug

• Flipper
• Why did you render

Testing

• Framework - Jest
• Unit Tests - React Testing Library
• Hooks - React Hooks Testing Library
• E2E/UI - Maestro
• E2E/Functional - Detox
• Coverage - Istanbul
• Extension - Jest matchers to React Native
• Extension - Matching mock function call arguments

Performance

• Perfume.js
• Reassure
• Simulating slow connectivity - Network Link Conditioner

React storage & performance

• IndexedDB, WebSQL, LocalStorage – what blocks the DOM?
  • LocalStorage: Short strings, numbers or booleans
  • IndexDB: Everything else
• Browser database compariso
  

Error

• Bugsnag
• Sentry

Animation

• React Native Reanimated
• Lottie

Version Control

• GIT
• GitLab
• GitHub

Code Tools

• Visual Studio Code

Plugins

• GitLens
• ESLint
• Prettier
• React Native Tools
• VSCode Styled Components
• VSCode Icons
• Jest Runner - You can run tests separately

Expo

• Icons Library

Styling

• Tamagui

Errors

• How to solve "Unable to boot the Simulator"

Others

• eslint-plugin-react-hooks
• exhaustive-deps
• babel-plugin-module-resolver
• eslint-plugin-import
  

Blog posts

Useful blogpost references.

React Lifecycles

• Wojciech Maj - React Lifecycle Methods - Diagram

Relay

• Terence Bezman - Loading UX w/ Relay Fragments

Optimization

• Nick Cherry (Coinbase) - Optimizing React Native
• Stefano J. Attardi (Coinbase) - Why We Memo All the Things
• Vitali Zaidman - Why Did You Render Mr. Big Pure React Component?
• Vitali Zaidman - Why Did You Render Mr. Big Pure React Component Part 2 - Common Fixing Scenarios
• Kent C. Dodds - One simple trick to optimize React re-renders
• Elvira Burchik (shopify) - Our Solution for Measuring React Native Rendering Times
• Lukas Kobis - Improving React Interaction Times by 4x

Error

• Jenni Nadler - When life gives you lemons, write better error messages

set of

Others

• Tools - Free for developers
• Gamified JavaScript - Checkio
• Useful setup for RN projects
• The exhaustive-deps rule has to be treated seriously

VSCode settings

• How To Enable Linting on Save with Visual Studio Code and ESLint

Open the file .vscode/settings.json

{
   ...
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  ...
 }