Cheatsheet: Intro to React Native

intro_to_react_native.md

Intro to react-native cheatsheet

By Ira Herman

Notes to help you get started in react-native.

Cheatsheet Objectives

• Explain how react-native apps work, native UI with JS for logic.
• Explain what Expo does.
• Build a simple react-native app and modify elements: Tab Navigation and HomeScreen.

Notes:

Start here: 🔗Expo docs

Be sure to use the expo tooling for your react-native project. It makes it easier to run your app (in the Expo Go viewer app) and generates the starter project for you.

Generating a starter project with Expo will have .ts files in it, for typescript. But don't worry, you can use regular Javascript in there, and the code it includes is generally all regular js even though it's in .ts files.

Also, use yarn as your package manager for react-native projects, instead of npm. More on that below:

• Install expo: npm install -g expo-cli yarn

• Create a react-native app: expo init yourProjectName

  • This generates a whole new project in a folder called yourProjectName . You can pick one of the template options. I like the tabbed app as a starter.

• yarn start to run it

  • yarn vs npm
    • Facebook's version of npm. performance gains.

• Run it on your device by scanning the qr code.

• Explore the code.

• Notice onClick is onPress in react-native. Components are not h1, p, div's because we are not using a DOM. We are using native app UI components.

• Running ios simulator:

  • Requires xcode (Mac OS only).
  • npm install -g ios-sim
  • ios-sim showdevicetypes
  • ios-sim start “name of device”

• Running android emulator:

  • Requires android studio (cross platform)
  • Make a new project.
  • Open tools/AVD Manager and create at least one virtual device.
  • Then can use emulator command line
    • emulator -avd nameofsim
    • or emulator @nameofsim
    • emulator -list-avds for list of virtual devices

• Common components: View, Text, Button, DatePickerIOS, Image, etc:

• How Expo QR scanning works:

  • On iOS use camera app (must have expo app installed)
  • On android, use expo app.

• Image component. Need style tag for dimensions.

• CSS: Limited set of css - doesn't support border for example (but supports things like borderWidth).

  • Best to use flexbox for positioning

• Routing: Expo/react-native uses react-navigation for routing instead of react-router. It has better support for tab bars, back buttons, and other mobile interface elements.

  • You don't need to install react-navigation, it comes built into your expo tabs app project. Check out the docs for more details on how to use it.

• Walk through Github bookmarks app code to see differences in components. The basics are exactly the same though, because it is ReactJS!

🔗GitHub Bookmarks React-Native repo

• I highly recommended Maximilian Schwarzmüller's udemy course: React Native - The Practical Guide
  • Check it out if you want to learn more and how to build complex interfaces in react-native. You should be able to buy it for under $15 if you sign up for a new udemy account or catch it on sale (and they have sales pretty much all the time).