Exploring React Native - MobileSpace

This repo serves as an Introduction to React Native for MobileSpace Season 2.

In this repo we will explore the RN ecosystem by creating a React Native app using react-native-cli, crna and expo. We will also get started with RN styling and use basic RN components such as View, Text, StyleSheet, Image, Button, ScrollView, ListView & TextInput components.

Demo - Try it on Expo

Assignment #1

Objectives

• Intro to React Native, Expo and CRNA
• Intro to RN components & styling

TODO

• Create a simple React Native app using any two of the following three methods:
  • Vanilla React Native (GET STARTED)
  • CRNA (GET STARTED)
  • Expo (GET STARTED)
• Create a ScrollView in your CRNA app with the following components:
  • Image component - must use 3 different images in various sizes & position them using flexbox
  • Button component - must be able to toggle the background color of the container view
  • FlatList component - must use the provide mockData here to create a list of all Community Members
  • TextInput components - must allow the user to type the secret phrase & show an Alert if it's valid or not.
• ⭐ Bonus: Use WebView component to open the community members Github profile
• ⭐ Bonus: Use Switch component
• ⭐ Bonus: Use the TouchableOpacity or the TouchableHighlight component in place of the Button component above
• ⭐ Bonus: Use Platform API to display different UI for iOS & Android

Demo

Vanilla React Native

• Most control & customization for a RN app - let's you write native code for iOS (Swift) & Android (Java/Kotlin)
• Needs XCode & Android Studio to run the app on your computer on an iOS Simualor or Android Emulator
• Least beginner friendly but most powerful way to get started with RN (with respect to setup)

Setup & Run

npm install -g react-native-cli

react-native init VanillaReactNative

cd VanillaReactNative

react-native run-ios
  or
react-native run-android

For more details or if you run into trouble, follow this guide.

CRNA

• Most functional & flexible of all the options - gives you Expo tooling and also allows your to eject out of the Expo ecosystem and generates iOS & Android code for you
• Doesn't need XCode & Android Studio - can scan the QR code on your expo app and run your RN app
• Most flexible way to get started with RN

Setup & Run

npm install -g create-react-native-app

create-react-native-app CRNA

cd CRNA

npm start

scan the QR code on the Expo mobile app
  or
npm run ios (needs Xcode)
  or
npm run android (needs Android Studio)

For more details or if you run into trouble, follow this guide.

Expo

• Most feature rich of all the options - gives you access to Expo tooling & SDK with some really useful feature that work with minimal config
• Doesn't need XCode & Android Studio - can scan the QR code on your expo app and run your RN app
• Easiest & most useful way to get started with RN

Setup & Run

open up Expo XDE & open your project folder
  or
npm install -g exp
exp start

click share on XDE (top right) & scan QR code on your phone
  or
exp ios (needs Xcode)
  or
exp android (needs Android Studio)

For more details or if you run into trouble, follow this guide.

Submission

Once you have completed this assignment, please create a new issue on this repo with the title as your name and add the link to your repo in the description. One of the TA's will review your code and follow up with you.

Problems?

In case you run into any problems or issues, please post it on #questions channel on the MobileSpace Slack.

Finally

For any other questions about this repo or MobileSpace in general please reach out to @monte9 on Github.