React Native

Who?

Meta is the core owner of the code.

A framework for building native applications using React.

Partners

These companies are endorsed by Meta and the React Native team.

• Coinbase
• Callstack
• Expo
• Infinite Red
• Meta
• Microsoft
• Shopify
• Software Mansion
• Wix

Incubating Partners

These companies use React Native in a major way.

• Expensify
• Sentry

Notable Applications

• Discord (mobile)
• Facebook (Meta)
• Instagram
• Pinterest
• Skype
• UberEats
• Tesla
• Bloomberg

What

Differences with React

• No Virtual DOM (no DOM)
• Native APIs
  • Phone Calls
  • Accelerometer
  • Latest APIs
  • write your own core logic (performance, cutting edge)
• No CSS
  • CSS inspired props
  • No cascading

React Native Web

Not perfect but nice for prototyping

Issues with accessibility https://guild.host/

Syntax/Elements

<div> -> <View>

<span> -> <Text>

Styling

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const LotsOfStyles = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.red}>just red</Text>
      <Text style={styles.bigBlue}>just bigBlue</Text>
      <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
      <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: "blue",
    fontWeight: "bold",
    fontSize: 30,
  },
  red: {
    color: "red",
  },
});

Composing Styles

<View style={[ cardStyles.baseCard, localStyles.customCard ]}>

/* maybe in a base style file */
const cardStyles = StyleSheet.create({
  baseCard: {
    borderColor: "blue",
    borderRadius: 10,
  },
});

const localStyles = StyleSheet.create({
  customCard: {
    backgroundColor: "gray",
  },
});

Expo

Easy Quickstart

npx create-expo-app my-app

Expo Go

https://expo.dev/expo-go

Expo Snacks

Ejecting

Not necessary anymore

Custom Expo Go development builds https://docs.expo.dev/bare/using-expo-client/

EAS: Expo Application Services

• EAS Build: Compile and sign Android/iOS apps with custom native code in the cloud.
• EAS Submit: Upload your app to the Play Store or App Store from the cloud with a single command.

Citations

• Something: url to citation