Mat Warger - @mwarger
Full-Stack Apps with Expo
My Background
Over a decade of experience constructing software across startups and enterprises.
App Demo
What's the Plan?
Why Expo?
Why Expo?
React Native is a way to develop applications for native platforms using React. Expo abstracts away the complexity of React Native.
1
Expo's library of packages is a massive win. Multiple libraries are provided to accomplish most things you'd want to do.
2
Expo's Application Services (EAS) is a fantastic way to provide building, deployment, and code updates to ship apps quickly.
3
React Native Platforms
- Primarily focused on iOS & Android
- Compatible with web
- Managed or Bare Workflows
- Native Modules (using dev client)
- Push Notifications
Expo Features
expo install `dependency`Installing Dependencies
Using expo install will ensure compatibility between the dependency version and the expo version.
Up and Running
npx expo initnpm install --global expo-cli
npx create-expo-app my-appExpo CLI
npx create-nx-workspace
npm install @nrwl/expo
nx generate @nrwl/expo:application my-appNX Monorepo
npx ignite-cli@next new my-app --yesIgnite CLI
# Mac Only
brew install cocoapods
sudo gem inst ffi -- --disable-system-libffiDemo
App creation boilerplate
Components and Navigation
-
Functional Components
-
Hooks
-
Context
React Component Patterns
Component Libraries & Styling
Navigation
Demo
Components and Navigation
Working with APIs
-
API URLs
-
Base URL for Expo client
-
Network Call Debugging
API Requests
Base URL Setup
-
Environment Variables
-
Config
Endpoints in Expo Dev Client
import Constants from 'expo-constants'
const { manifest } = Constants
let apiHost = ''
const endpoint = Constants.manifest?.extra?.apiUrl ?? ''
reactotron.log?.('endpoint', endpoint)
if (__DEV__) {
apiHost =
typeof manifest?.packagerOpts === `object` && manifest.packagerOpts.dev
? manifest.debuggerHost?.split(`:`).shift()?.concat(`:4200`)
: endpoint
// add http if not present
if (!apiHost.startsWith('http')) {
apiHost = `http://${apiHost}`
}
} else {
apiHost = endpoint
}Config in Expo Dev Client
import 'dotenv/config';
let Config = {
apiUrl: process.env.API_ENDPOINT,
enableHiddenFeatures: true,
}
if (process.env.APP_ENV === 'production') {
Config.apiUrl = 'https://api.production.com'
Config.enableHiddenFeatures = false
} else if (process.env.APP_ENV === 'staging') {
Config.apiUrl =
'https://conference-demos-git-develop-mwarger.vercel.app'
Config.enableHiddenFeatures = true
}
Demo
API and Debugging
Building and Deploying
Building Apps
- Expo EAS Build allows for building Android and iOS apps
- No need for a local setup of Android Studio or XCode!
- Local builds for Simulator/Emulator
- Internal builds for testing
- Production builds for App and Play Stores
Deploying Apps
- Expo EAS Submit allows for submitting app binaries to App Store and Play Store
- Works with CI
Updating Apps
- Expo EAS Update allows for serving updates to apps using the expo-updates library
- Allows non-native code changes without store submission
- JS, styling, image changes
- Bug fixes
- Also works with CI (Github Action)
Thank You!
Slides + Code
Full-Stack Apps with Expo
By Mat Warger
Full-Stack Apps with Expo
With modern tools, building a cross-platform app has never been easier. In this session, we'll take a look at how to get started with Expo to develop react-native apps that work on IOS, Android, and even the web - all with the same code! Combine this with a hosted API service and you can get your next side-project or startup MVP off the ground in record time. We'll cover project structure, component libraries, and other utilities to help you get started quickly.
