Background image
logologo symbol

6 - Growing complexity

TypeScript/React - React Native

Description

React is a great framework to create interactive web applications, but it can also be used to create other kinds of software, such as apps for smartphones and even desktop computers! React Native (and even Electron) are frameworks that will help you do just that. In this Guide you will explore one or more of these tools and learn a bit more about the possibilities of React.
React Native is not the only way to do this. The most popular alternative is Flutter, made by Google. Flutter is the framework; the language you write it in is called Dart. It makes the same promise React Native does: write the app once, run it on both Android and iOS (and sometimes the web too). People get the two names mixed up all the time, so it is worth keeping straight — Dart is the language, Flutter is the framework built on top of it.
The other route is to skip cross-platform tools altogether and build for one platform natively. On iOS that means Swift (or the much older Objective-C), and on Android it means Kotlin (or the older Java). You write more code this way, because each platform needs its own, but you get full access to everything the device can do.
So which should you pick? The assignment below is written for React Native, because it reuses the React you already know and you will get something running fastest that way. But if you want to use something else, that is completely fine — tell us what you picked and why in your README.
Here is something worth thinking about while you choose. Unfamiliar syntax used to be the main thing stopping you from trying a new language: you would lose days just looking up how to write a loop. With AI assistants that cost has dropped a lot. What has not got easier is the part that actually matters — knowing how the platform thinks, what its building blocks are, how state and layout and navigation work there, and being able to tell when the generated code is wrong. Those you still have to learn yourself. If that makes you curious rather than nervous, this is a good moment to build something in Swift or Kotlin instead. And if you are feeling extra ambitious, build the same small app twice, once for each platform, and write up what was genuinely different between them. That comparison will teach you more than either app on its own.

Topics

  • React Native
  • Expo
  • Cross-platform vs native app development
  • Flutter and Dart
  • Swift / Kotlin

Goals

Knowledge

Understand the possibilities of React outside of the browser
Understand the difference between cross-platform and native app development, and the trade-off between them

Skills

Be able to build a working app for a platform different from the browser

Idea for return

  • Submit:
    • Github repository
    • Project description and details in the README.md file
  • Minimum requirements:
    • Create a front end for your Prismic app using React Native. If you would rather use Flutter, Swift, Kotlin or something else, go ahead — just say in your README what you chose and why
    • The application must run on a platform different from the browser
    • It should count on at least a front-end side, but it could contain a custom back-end side
  • It is good to go through one of the tutorials in the materials section before you start making the front-end to your Prismic app:
    • The React Native getting started if you want to review a bit of what you have learned so far as you are learning a new system
    • The Expo - getting started if you want to create something fancy in a short time and learn from that how to make native apps.