React Native Basics

React Native uses the same design as React, letting you compose a rich mobile UI from declarative components.

Core Components

Instead of HTML tags like <div>, <span>, and <img>, you use these core components:

React Native	Web Analog	Usage
`<View>`	`<div>`	A container that supports layout with Flexbox
`<Text>`	`<span>` / `<p>`	Displays text. Note: Strings must be wrapped in `<Text>`
`<Image>`	`<img>`	Displays images
`<ScrollView>`	`overflow: auto`	A generic scrolling container
`<TextInput>`	`<input>`	Allows users to input text
`<TouchableOpacity>`	`<button>`	A wrapper for making views respond properly to touches

Styling

Styling in React Native looks like CSS, but it's JavaScript. We use Flexbox for layout.

Javascript

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

The naming uses camelCase (backgroundColor instead of background-color).

Platform Specific Code

Sometimes you need different behavior for iOS and Android.

Javascript

import { Platform } from 'react-native';

const padding = Platform.OS === 'ios' ? 20 : 10;

Fast Refresh

React Native includes Fast Refresh. When you save a file, the changes appear on your phone almost instantly, maintaining your current state (like text in an input or a scroll position).

Next Steps

Let's look at the tooling that makes this all possible: Expo.

Next: The Expo Ecosystem

Intro to React Native