González took on a project to rebuild the Guardian’s iPad-only news edition for iPhone, Android, and tablets, despite having no React Native experience. She argues that setting a concrete goal and learning through mistakes can be more useful than studying every tool before starting.
I picked Up React Native As a Web Developer
Speaker
Laura González, a client developer at The Guardian, shares lessons from learning React Native while rebuilding the Guardian’s iPad news edition for phones and tablets, speaking at React Native EU 2019 for Callstack.
She explains that React Native uses React with a native app renderer, while web projects pair React with React DOM. Native modules can add device features such as camera access, and Expo lets developers begin with JavaScript before taking control of native code if needed.
React Native keeps familiar components and patterns, but uses views instead of HTML elements and has CSS-like styles without cascade, selectors, or Grid. González describes using a WebView for article content that depended on floats, and absolute positioning for complex front-page layouts. Accessibility roles, labels, and hints provide ways to describe interface elements to screen readers.
She covers Pressable for responsive interactions, device dimensions for layout changes, and animated values for motion tied to gestures. Mobile transitions need to respond immediately and maintain 60 FPS. React Navigation offers flexibility, while React Native Navigation uses more native navigation elements with less customization.
A three-person team rewrote a complex app in six months. González says the work deepened her understanding of React, including performance and context, and recommends trying React Native for developers considering a native app.
Takeaways
- A concrete project can make learning an unfamiliar framework more focused and practical.
- Expo can reduce early setup work while leaving a path to native code later.
- Plan for React Native’s layout limits when translating web designs that depend on floats or Grid.
- Use accessibility roles, labels, and hints to communicate interface meaning in native views.
- Choose navigation based on whether native transitions or customization matter more to the app.
Mentioned in this talk
Search inside this talk
What was claimed 8
- role atLaura González is client developer at The Guardian
“I'm a client developer at The Guardian”
YouTube Unverified1 source· Talk
- featureExpo Modules: Lets developers hand over control of native project details and write JavaScript
“Expo lets us hand over control of all the native bits so we just have to write JavaScript”
YouTube Unverified1 source· Talk
- featureReact Native: Uses native modules to access device functionality not included out of the box
“you'll have to use native modules”
YouTube Unverified1 source· Talk
- featureReact Native: Supports accessibility roles, labels, and hints on elements
“You have this cool accessibilityRole property”
YouTube Unverified1 source· Talk
- featureReact Native: Uses Flexbox for layout and has no CSS cascade or selector support
“everything is flexbox”
YouTube Unverified1 source· Talk
- featureReact Native Navigation: Maps to native iOS and Android navigators for a more native experience with less customization
“it maps to the native iOS and Android navigators”
YouTube Unverified1 source· Talk
- featureReact Navigation: Allows extensive customization of navigation interfaces
“in return you can do just about anything you want with it”
YouTube Unverified1 source· Talk
- metricThe Guardian: Rewrote a complex app in six months with a three-person team
“rewrite a quite complex app in six months with a three-person team”
YouTube Unverified1 source· Talk
