hectahertz / intro-to-react-native

Materials for my Introduction to React Native Workshop 👨🏻‍💻

Materials for my Introduction to React Native Workshop

Environment setup

Basic requirements

If you just want to run apps through Expo on your physical device, these will be enough:

• Node via NVM
• Brew
• Yarn
• Watchman (recommended method: brew install watchman)
• create-react-native-app (recommended method: npm install -g create-react-native-app)

To run apps in an emulator

If you also want to run apps through Expo in an emulator, you'll need to set it up

• iOS Emulator: Install Xcode via the Mac App Store
• Android Emulator: Follow the Android development environment instructions for React Native

Demo App

The Demo App included in the repository is meant to be used as a reference in a 2h workshop to illustrate basic React Native & Firebase concepts.

• Login screen
• Tweets screen
• Script

Reference links

• React Native docs
• Expo docs
• Expo Vector-icons catalog
• Color palette for the app
• KeyboardAvoidingView
• React Navigation
• Hello world navigation
• Expo Firebase instructions
• Firebase web sign in
• Navigation props
• Firebase web read/write

Some other awesome libraries!

• react-native-dropdownalert
• react-native-firebase
• react-native-gifted-chat
• react-native-image-crop-picker
• react-native-swiper
• react-native-vector-icons

Firebase setup for the demo project

• Create a new app
• Get your credentials and add them in the adapter
• Enable email/password login
• Register some users

[e-mail] // password
...
[e-mail] // password

• Starting DB Shape

{
  "tweets": {
    "-KzIr3nG4akj5U5NvCob": {
      "text": "Tweet!",
      "uid": "lD29Ihlo59TKjZZVmU7pfODAcvG2"
    }
  },
  "users": {
    "lD29Ihlo59TKjZZVmU7pfODAcvG2": {
      "avatar": "https://randomuser.me/api/portraits/men/81.jpg",
      "name": "Ricky Neal",
      "username": "rickyneal"
    }
  }
}

• Security rules

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null",
    "tweets": {
      "$tweet": {
        // new messages must have a string text and a string uid
        ".validate": "newData.hasChildren(['text', 'uid']) && newData.child('text').isString() && newData.child('uid').isString()",
        // the uid must match the authenticated user
        "uid": {
           ".validate": "newData.val() === auth.uid"
        },
      }
    }
  }
}

License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License