react-native.md

React Native

React Native allows you to write mobile apps (Android and iOS) using React and JavaScript.

Getting Started

The main docs are a great resource: https://facebook.github.io/react-native/docs/getting-started.html

• you'll need to follow one of the instalation guides - using expo or building native code - in order to start playing around/working on a react native app;
• if you're just getting started/looking to learn, we recommend starting with expo in order to have everything up and running much quicker.

Another excellent resource that comes with a lot of interactive examples is http://www.reactnativeexpress.com/.

For those who prefer video tutorials: https://egghead.io/lessons/react-start-building-a-react-native-application.

Writing your first React-Native Component

Examples

to be added

Testing React-Native Components

Examples

to be added

Library Recs

Navigation

• react-navigation: Extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.
• react-native-router-flux: This library is based on React Navigation but provides a different API to interact with it.
• react-native-navigation: Uses the underlying native APIs on iOS and Android, this is a popular alternative to React Navigation but does not offer that much customization.
• react-router-native: Makes sense for those familiar with the React Router API and with simple app requirements.

Video

• react-native-video: A <Video/> component for react-native
• react-native-video-controls: Controls for the React Native <Video/> component at react-native-video.
• react-native-fullscreen-video: One of the main issues of react-native-video is making video full-screen on Android. If you do not want to roll out your own solution, this is a full-screen video component on top of react-native-video.
• react-native-video-player: Alternative to react-native-video

UI Kits

• react-native-material-kit: Bringing Material Design to React Native.
• react-native-ui-kitten: Customizable and reusable react-native component kit.
• nachos-ui: Nachos UI is a React Native component library with over 30 customizable UI components.

Other

• react-native-web: "React Native for the Web" makes it possible to run React Native components and APIs on the web using React DOM. It's a very interesting library that is used by the mobile version of the Twitter web app. It offers:
  • High-quality web interfaces: makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-quality interactions
  • Write once, render anywhere: interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.
• react-native-bundle-visualizer: See what's inside of your react-native bundle.