What Does That Look Like?

Antiquing

Adult in child's car seat

Stranger Bound and Gagged in the Trunk of a Car

Teammate dressed as a manniquin

Teammate flying on a broom

team in a store display bed

Eskimo kissing a stranger

MVP - Low Tech

Online Leaderboard (RWD)

Pros

• Low tech
• Offline First
• Fault tolerant
• Zero config

Cons

• Cumbersome
• Error prone
• Not user friendly
• Less professional?
• Doesn't Scale
• Less Ecological
• Extra server-side work
  • One image
  • Code validation
  • Email formatting
  • Image optimization

It's Time for an Upgrade!

...enter react native

Features

• Expo App
• setState 100%
• StyleSheet 100%
• GraphQL / Apollo w/Offline Caching
• Uses Camera & Camera Roll

Packages

• appolo-cache-persist
• react-native-image-gallery
• react-native-sideswipe
• react-native-typography
• react-navigation
• sentry-expo

Expo Component / APIs

• ImageManipulator

• ImagePicker

• IntentLauncherAndroid

• MailComposer

• Permissions

• ScreenOrientation

• Vector Icons (Feather, Ionicons, FontAwesome, MaterialIcons)

   

RN Component / APIs

• ActivityIndicator
• Alert
• Animated
• FlatList
• Image
• ImageBackground
• KeyboardAvoidingView
• Linking

• StatusBar
• StyleSheet
• Text
• TextInput
• TouchableNativeFeedback
• TouchableOpacity
• View

Mobile App Flow

App Navigation & Architecture

<App>

• Setup Apollo Provider
• Setup Sentry
• Pre-cache Fonts / Images

<App>

<RootNavigation>

• Authentication Gating
• Login Mutation
• Manage Auth Session
• Register Notifications

<App>

<RootNavigation>

<EventsNavigation>

is a StackNavigator

<App>

<RootNavigation>

<EventsNavigation>

• EventList

<App>

<RootNavigation>

<EventsNavigation>

• EventList
• EventTabs

<App>

<RootNavigation>

<EventsNavigation>

• EventList
• EventTabs
• GallerySlider

Gotchas & Takeaways

Flexbox

Gallery

Expo Upgrades

flawless

v24 > v27

Sentry

Integrate early