React Native

React Native is a JavaScript framework that uses React to build native applications for iOS and Android or web applications, all with 1 code base.

While it shares the JSX syntax with React, the components and overall logic used are quite different.

Basic App.js template

This component was made by Stratis Dermanoutsos. The code can be found here.

The above App.js was generated using Expo.

Components

All components are written in JSX as in React.

For both Android and iOS applications, a view is the building block of UI. Everything, from a simple line to complex designs are all different kinds of views.

Usually, when developing an app for Android, you use Kotlin or Java. For iOS, the norm is Swift or Objective-C. React Native supports components for both of these platforms. These are called Native Components.

Also, React Native has many native components that are ready-to-use out of the box. These are called Core Components.

Styling

There is no CSS in React Native.

Instead, styles are defined using StyleSheet.create() method which accepts a JS object as parameter.

E.g.:

This component was made by Stratis Dermanoutsos. The code can be found here.

This specific container styling is then called using the following format:

This component was made by Stratis Dermanoutsos. The code can be found here.

Platform

As more than 1 platforms are natively supported in a single code base, it is only natural that we might want some components to only render in one.

For that, we use the Platform module.

Code example:

This component was made by Stratis Dermanoutsos. The code can be found here.

Resources