Making the switch from web to mobile development

Think your React skills are enough for mobile? Learn the paradigm shifts from browser deployment to native tooling, offline-first design, and the app store.

#1about 3 minutes

Comparing web, native, and cross-platform mobile development

Native development requires separate codebases for iOS and Android, while React Native allows a single JavaScript codebase for both platforms.

#2about 3 minutes

Setting up the mobile development environment

Mobile development requires Xcode and Android Studio, and testing on real devices is crucial because simulators can be misleading.

#3about 4 minutes

Using React Native components instead of HTML

React Native replaces HTML tags like `div` and `p` with core components such as `View` and `Text` that compile to native UI elements.

#4about 2 minutes

Styling applications with JavaScript and Flexbox

Styling in React Native uses JavaScript objects via StyleSheets instead of CSS, with Flexbox defaulting to a column direction.

#5about 3 minutes

Creating animations for a native user experience

React Native provides two systems, the Animated API and LayoutAnimation, to create fluid animations that meet user expectations on mobile.

#6about 2 minutes

Managing navigation with screens instead of URLs

Mobile navigation uses a stack-based system with screens, unlike web's URL-based routing, managed by libraries like React Navigation.

#7about 2 minutes

Writing platform-specific code for iOS and Android

Use the Platform module for small inline differences or platform-specific file extensions like `.ios.js` for larger component variations.

#8about 2 minutes

Handling app state and native device features

Mobile apps must manage their state (foreground, background, inactive) using AppState and handle permissions for native features like the camera.

#9about 3 minutes

Designing for offline and slow network conditions

Build robust mobile apps by handling offline states and slow connections with cached data and retries, using tools like the NetInfo package.

#10about 2 minutes

Sharing code between web and mobile applications

Use tools like React Native Web or a monorepo with Yarn Workspaces and Lerna to share business logic across web and mobile platforms.

#11about 3 minutes

Testing and debugging your React Native application

Use Jest and React Native Testing Library for testing, and leverage Flipper for powerful debugging of network requests, layouts, and logs.

#12about 2 minutes

Deploying your application to the app stores

The deployment process involves building native binaries, submitting them to the App Store and Google Play, and navigating the review process.

#13about 10 minutes

Q&A: Learning curve, deployment, and team workflows

The speaker answers questions about the learning curve for React developers, identifies deployment as the biggest challenge, and discusses team processes.