One Code to Rule Them All

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

The dream of using React for Web, Mobile Apps and beyond becomes reality. Thanks to Expo Router, we can confidently use the same routing logic for web and mobile, have it different layouts, use CSS, and with v3 even include API endpoints for Fullstack React Native apps. This talk will show you ways to go “all-in” on React Native, including other popular approaches that use Tamagui, Solito or Monorepos to build Universal Apps from one codebase.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

FAQ

The main focus of Simon's talk is on using React Native to build applications for multiple platforms (iOS, Android, and web) from a single code base.

Simon is a developer who runs a platform called galaxies.dev. He lives in Münster, Germany with his wife and daughter.

Simon mentions Flutter, Ionic with Capacitor, Kotlin multiplatform, .NET's Maui, and Tori with Rust as existing solutions for cross-platform app development.

File-based routing in Expo Router allows developers to use the same URL schemes for both web and native applications. This simplifies navigation and makes it easier to build universal applications.

Expo Router allows developers to define different layout files for different platforms (web, iOS, Android). This enables the use of native UI elements on mobile platforms and web-specific layouts on the web.

Yes, Expo Router supports CSS in React Native projects, allowing developers to use CSS for styling, including popular libraries like Tailwind CSS.

API routes in Expo Router allow developers to define server-side endpoints within their React Native projects, keeping API keys and sensitive logic secure.

Simon mentioned ReactStrictDOM, React server components, and the integration of Tailwind CSS with React Native as future technologies that could significantly impact cross-platform app development.

Simon prefers React Native because it respects the native features of different platforms, unlike other solutions that might render applications pixel by pixel or run them in a web view.

Expo Router is a tool for React Native that introduces features like file-based routing, CSS support, type routes, async routes, and API routes. It allows developers to build applications for web and native platforms from the same code base.

Simon Grimm
Simon Grimm
20 min
18 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
In this talk, the speaker introduces using React Native with Expo to build mobile applications as well as web output. They explore the features of Expo Router, including file-based routing and CSS support. Expo Router also allows for universal links and web layouts, making it possible to build for different platforms from a single code base. The talk covers SEO, meta information, and API routes with Expo Router, and mentions the use of monorepositories with Next and Expo or React Native. The speaker discusses the future of Expo Router, including the upcoming Version 4 and the potential use of ReactStrictDOM and React Server Components. They also highlight the benefits of bringing Tailwind-CSS to React Native.

1. Introduction to React Native with Expo

Short description:

In this talk, I'm going to show you how you can go all in with React Native and not only build mobile applications, but also have a great web output. What if we could build for all platforms? That means for iOS, Android, and the web, all from the same code base. Let's explore the existing solutions and the limitations they have. Finally, I'll introduce a new way to use React Native with Expo.

What's up, React Summit, and welcome to my talk, One Code to Rule Them All. In this talk, I'm going to show you how you can go all in with React Native and not only build mobile applications, but also have a great web output.

So let's start by quick introduction. I'm Simon. You might have seen me someplace on the Internet before. I run a platform called galaxies.dev. I live here in beautiful Münster, Germany with my wife and my daughter, and when I'm not coding, I'm definitely running or working out in the garden.

But in this presentation, I want to take you on a journey. So let's dream. What if we could build for all platforms? That means for iOS, for Android, for the web and do it from the same code base. There's also a little star here because there's something we have to know, and that is if we want to build for all platforms, we also want to respect the platforms. We don't want to compromise what's making these platforms great in the beginning.

This has always been the dream of cross-platform applications, of universal applications. And of course, there are some solutions out there for years by now. So the most popular is probably also Flutter. There are mixed opinions about Flutter, but the basic problem is that Flutter usually renders your application and basically draws it pixel by pixel, and it's not really using what's making these platforms great. It's not using the actual native features of those platforms. Then we have other solutions. I've been a big fan of Ionic in the past with Capacitor. If you don't know about this, this is basically wrapping your web application in a web view and putting it in an app. This sounds worse than it actually is. So this is a legit solution in many cases, but you're running in a web view, so not really displaying anything that's native.

Then we got other solutions like Kotlin multiplatform. In the .NET world there's Maui, there's Tori coming up with Rust. There are many different solutions, but they all lack in some areas. And then of course, we got React Native, but with React Native, the main focus in the past was doing a great iOS and a great Android application. But what if you also wanted to have a web application? Well, at some point they introduced React Native Web, but it never really worked out in the way we wanted it. So there are, by now, new ways. And this is what I want to show you. So you can now use React Native with Expo, which is also anyway a great recommendation, but the Expo router.

2. Exploring the Features of Expo Router

Short description:

And with the Expo router, we got tons of new options to build our applications. Expo router introduces many cool things into a React Native application. Maybe the most important one is file-based routing. At this point, probably Expo router version 4 is out with new features and a really stable version that we can use in our application. Let's take a closer look at these features, starting with file-based routing.

And with the Expo router, we got tons of new options to build our applications. And the dream that we talked about, what if we could build for all these platforms from one code base, is actually becoming a reality. So let me show you a few features of Expo router.

So why should you actually consider Expo router? Let's start with a high level view with this great picture from the introduction of Expo router version 2. By the way, did you know that this is called a Bento style? I learned this from my designer. Like these things, you've seen this from Vercel, Next.js all the time. I think it's called Bento style.

So why Expo router? Expo router introduces many cool things into a React Native application. Maybe the most important one is file-based routing here. Because with file-based routing, you can get the same URL on the web if you built your app for the web, and you can use that scheme as well for your native applications to navigate around. It works really, really great. But beyond that, there are many other interesting things that we're going to get into. CSS support, type routes, async routes. And on top of that, this was just Expo router version 2. At this point, we've also seen Expo router version 3, which introduced API routes. So you can have API routes next to your React Native application code, which is a super interesting concept and kind of ties into this whole concept of everything is becoming one again. So we've seen this, for example, with Next.js, with server components, the API routes. Everything is kind of going full circle back to the old days of PHP, but in a better way, of course. This is also happening for React Native. We can see it here that we could have API routes in our project as well with Expo router. These were just version 2 and version 3.

At this point at React Summit, probably Expo router version 4 is out with new features and really stable version that we can use in our application. More on how we can use Expo router in a second. So let's take a closer look at these features. For example, the first one I gave you is file-based routing. File-based routing is probably popular to everyone who has used Next.js, Swellkit, any kind of popular full stack framework these days. And it works exactly the same for native applications with React Native. We can have a folder, then we have a home TSX and then we have a stack definition and we have this post file with brackets, which means this is a dynamic URL. We can pass an ID or a post ID to that page and it is just amazing in how it works. It is a complete mindset shift for native developers because we usually think in screens and pages, but if we adopt this concept, we can easily also build for the web because all these things would turn into slash home, slash home, slash new and we can use that to our advantage.

3. Universal Links and Web Layouts

Short description:

Also if we later would talk about universal links that can directly jump into your applications. We can have layout files for different platforms and still build from one code base. With Expo Router, we have CSS support and the ability to use popular web libraries like Tailwind CSS. Everything's coming together in this one place.

Also if we later would talk about universal links that can directly jump into your applications. Another thing is web layouts because you don't want to just write one code that looks the same on web and like mobile. It's just not good. So instead of that, we can have layout files where we define if a platform is the web, then we can use some different code. If the platform we're running on is iOS, Android or other native platform, we use a native implementation and that gives us a chance to build from one code base but still respect the platforms. We can still have a native tab bar, a native stack or draw navigation and on the web we can have a menu at the top or whatever you want to have. You already see this in this picture that we're actually using CSS. This is a real code from a React native application because with Expo Router we actually have CSS support. We're a bit limited here yet but it's getting better and it's just amazing to see that we can bring this into React native projects. If we stop a moment here and think about this, this also means that in the future we will be able to bring in stuff like Tailwind CSS which is probably the most popular library on the web right now. In fact, it's already working right now. There's a library called Native Win that we can use which allows us to use Tailwind CSS exactly as it is in React native. Everything's coming together in this one place. I don't want to get too excited about CSS because there are many more things.

4. SEO, Meta Information, and API Routes

Short description:

Of course, if you have a framework and you're not only building a mobile application, you need to talk about SEO, meta information, and API routes. With Expo Router, you can define head tags, have meta information, and make static exports. API routes allow you to hide your API key in a safe server-side environment. You can create applications with different layouts and components for mobile and web using ExpoRouter. It just works great.

Of course, if you have a framework and you're not only building a mobile application, you need to talk about SEO, about meta information and, of course, that is included with Expo Router as well. You can, for certain pages, define head tags. You can have meta information. You can make a static export from your pages. All of this usually works great.

On top, of course, we have API routes. This is just an easy example of what's possible but in many cases you need a simple way to hide your API key. Let's say you want to talk to the OpenAI API. You don't want to put your API key in a React native application because all the keys you have in your application are basically public. Treat your native application as it is a website, as a public application. With API routes, we can have our key in a safe server-side environment. It is still in the React native project but it won't get bundled into your actual mobile app. This is only in this edge function that you can then deploy somewhere.

This is super interesting and there's so much more. You probably saw it on the Bento screen. We had static types. We have aliases. We have async routes and bundle splitting and so much more. We just wanted to focus on these few things right here. Let me give you an example of how this could look in reality. I used this in one of my workshops and we created an application that has a tab bar. It has a draw navigation on mobile and on the web a completely different picture. You can reuse all the pages you have in that mobile application, but on the web, you usually want to have hover effects, buttons. You want to have a menu at the top. All of this is possible with the things I've shown you before. Custom layouts. You can have custom component files using the extensions. You can have a file with .web, .native and different files and components would be used. It just works great with ExpoRouter. This is probably not the most exciting demo.

5. ExpoRouter and the Future

Short description:

Evan Bacon, creator of ExpoRouter, has built his blog using ExpoRouter, showcasing its capabilities. Using ExpoRouter, you can create a great website from a single code base. There is also an alternative approach of using a monorepository with Next and Expo or React Native, allowing you to leverage the best of both platforms. Fernando Rojo's Soleto library and Tamagui UI library are recommended for code sharing and high-performance components. The future of ExpoRouter looks promising, with Version 4 on the horizon and the mention of ReactStrictDOM library.

More exciting is actually what the creator of ExpoRouter has done. Evan Bacon is the creator of ExpoRouter with his team. His blog is actually using ExpoRouter. You can check it out at evanbacon.dev. If you look at a full screen, you're going to see a regular website. It looks great, works great. If you then go into a smaller version or browse to it from your device, from a mobile device, you're going to see it turns into a tab bar because he is also using these different web native layouts. Of course, this is not yet a native layout, but inside an app, it would use a regular tab bar.

The probably greatest thing about this year is that you can also get all the code of this. If you're interested in seeing what's possible with ExpoRouter, I highly recommend you check out the repository on GitHub for evanbacon.dev, where he shared all of this. He is also using API routes, I think for OG image generation, a really smart way of dogfooding everything they're doing with ExpoRouter in this project. I think it's really fair to say that all in with React Native is definitely possible. You can use ExpoRouter and get a really, really great outcome, a great result for your website. It's not like your focus is on native and then web is an afterthought. No, what you get with ExpoRouter, if you follow these mechanisms, if you use the layout routes, the meta tags, and all of the new things with ExpoRouter, it is definitely possible to build a great website from your one code base as well. You can share most of the code, which is really the dream we talked about in the beginning, and especially because React Native is respecting the underlying platforms, is respecting the web platform as well as Android and iOS and rendering the native controls.

With that, it's only fair to say that there's also an alternative way. ExpoRouter and building for all platforms is not yet the standard in most applications. For example, the probably most popular approach is using a monorepository with Next and Expo or React Native next to each other. That means you're using Next.js for your website, for your marketing, whatever it might be, and then you have a React Native application that's targeting iOS, Android and maybe other native platforms. It is also a good approach because you're kind of using the best of these platforms and there are ways to still unify and share code. For example, there's a great library from Fernando Rojo called Soleto, which allows you to use this link component that either uses the Next link or the ExpoRouter link component, and therefore you have the same routing. That also means you can have components that are shared across web and native, and it just helps you to reuse some of your code. If you're then really fancy, you could also top this off with Tamagui. Tamagui is a UI library which really allows you to use high-performing components on iOS and the web that look great on every platform.

This already brings us kind of to the end of this presentation. We should probably spend a little moment to talk about the future, because ExpoRouter is already great, it's becoming even better. Version 4, as I said, is around the corner or maybe already released when React Summit happens. What else is there? There is a library called ReactStrictDOM, which we should definitely mention.

6. ReactStrictDOM and React Server Components

Short description:

ReactStrictDOM library allows for writing the same code displayed differently on native and web platforms. It renders React native views from HTML code, a glimpse into the future. React server components are also possible for React native, with exciting times ahead. Expo Router v4 is right around the corner, becoming the standard for Expo applications. React server components are coming to React native.

What else is there? There is a library called ReactStrictDOM, which we should definitely mention. This was open sourced by Matter a few months ago, and it was actually a really, really interesting concept into what could be possible. Everything I show you here is kind of like very experimental, very early days. Don't be afraid of what you see next. This is the idea of ReactStrictDOM, which means we have a separation here between ReactStrictDOM native on the left and web on the right. But we would kind of write the same code, and we just get, well, displayed differently on these platforms.

Let me give you a clear example, because explaining this might take a bit too long today. This is how it could look in reality. We're importing these HTML elements or the div element from the ReactStrictDOM library, and then use it like this. We could also have our own stuff like an example block or combine it with some other elements like a scroll view. This might look a bit terrible to you, and I agree that it's probably not the best way, because no template, no code snippet that you're going to find on the internet will work if you do it like this. But as I said, it's really early days for stuff like this. And just seeing that it could be possible is super interesting, because if you build this app, which works, this is not a theory. This is actual code that I tried in a video as well. If you build this, you can build a website from this, which shows the usual div tags, the usual span or p tags. But if you deploy it as a native application to your device, it is actually rendering React native views. It is using the UI view, the UI label on iOS and the according elements on Android. So it's not rendering, it's not doing the thing that Capacitor or Ionic is doing. It is actually, from HTML code, rendering to native elements, which is completely mind blowing, just like a glimpse into the future.

Then, besides that, we of course have to mention React server components, and we just have to say that, yes, this is also possible for React native, especially Shiman Ripshak has done a great job of showing different cases of using React server components. It is still, again, very early days, but it should be possible later this year to use React server components with React native. Once again, this is kind of blowing my mind in what's possible in that we are loading native applications, then bring in the server components, but this could be unbelievable beneficial for many, many applications. So all of this just brings me to the point that we have really, really exciting times ahead of us. The first thing that I've shown you so far in this talk is definitely a possibility, and it's happening right now. It's not like we're dreaming about something that might or might not happen at some point in the future. So to be very clear, Expo Router v4 is right around the corner. It's probably already released, maybe in beta, maybe in stable, and after version four, as I've talked with Evan Bacon, we're going to see a rebranding, renaming around Expo Router, and then it's becoming more the standard for Expo applications. So this is definitely here to stay. Then we got React server components, which is already taking place a lot in Next.js, but this is also coming to React native. As I've seen, or as we've seen with the examples from Shiman, there's a lot going on.

7. React Server Components and Tailwind-CSS

Short description:

React server components with React native make it easier to combine code. Bringing Tailwind-CSS to React native opens up a new gate for web developers. Skia and Reanimated have web support, providing a fascinating variety of tools. We're living in the best years of React native, with innovation and progress in the community. Get your hands dirty and see how React code rules all platforms.

It will definitely be possible to use React server components with React native later this year, which once again makes it easier to combine our code. And then on top of that, we just barely touched on this concept, but the whole topic of bringing Tailwind-CSS to React native is fascinating. I talked with Mark Lawlor about this, the creator of NativeWin, and there's so much more to this than just having Tailwind in React native. Because if you think about this, if you look at the NPM installed from Tailwind, it's massive. It has taken over the web, and if web developers can reuse their existing skills, not only the web stuff, which we've seen worked with React strict DOM, but also the styling stuff, which they've now learned with Tailwind, and use exactly the same syntax for React native, it opens up a whole new gate of people coming to React native, and then in turn building universal apps based on these technologies.

And finally, just like the icing on the cake, Skia, a very popular library, and also Reanimated have web support. So we can also use the same code we use for native usually with these libraries on the web, which means we have a fascinating variety of tools available to build our web application with React native. To conclude it, I just want to use the words from Kasper Kapusiak, who concluded the state of React native survey with, it's hard not to say that we're living in the best years of React native so far, and I definitely couldn't agree more. It's just exciting to be here. It's exciting to see the players in the space, innovating, making progress on all the libraries, and the flair in the community is just really, really great.

This brings me to the end. Again, I'm the creator of galaxies.dev, so if you want to get more into React native, check it out. I also have a podcast called Rocket Ship, where I talk to all these people and try to explain the concepts in an easy, digestible way. To end this, I just want to give you one thing on the way. Please, get your hands dirty. We can talk about Expo router and universal apps and monorepositors, but just do something. Give it a try. Bring up a new application. See how it works. See how it feels, and you want to pretty quickly notice that yes, it is possible that one code, one React code, rules all the platforms, not just web, but also native. Thanks for attending this, and I will catch you in one of the places where you can find me.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Raising the Bar: Our Journey Making React Native a Preferred Choice
React Advanced 2023React Advanced 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
Watch video: Raising the Bar: Our Journey Making React Native a Preferred Choice
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
Opensource Documentation—Tales from React and React Native
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
Bringing React Server Components to React Native
React Day Berlin 2023React Day Berlin 2023
29 min
Bringing React Server Components to React Native
Top Content
Watch video: Bringing React Server Components to React Native
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.
React Native Kotlin Multiplatform Toolkit
React Day Berlin 2022React Day Berlin 2022
26 min
React Native Kotlin Multiplatform Toolkit
Top Content
The Talk discusses the combination of React Native and Kotlin Multiplatform for cross-platform app development. Challenges with native modules in React Native are addressed, and the potential improvements of using Kotlin Multiplatform Mobile are explored. The integration of Kotlin Multiplatform with React Native streamlines native implementation and eliminates boilerplate code. Questions about architecture and compatibility, as well as the possibility of supporting React Native Web, are discussed. The React Native toolkit works with native animations and has potential for open-source development.
“Microfrontends” for Mobile in React Native
React Advanced 2023React Advanced 2023
24 min
“Microfrontends” for Mobile in React Native
Top Content
Watch video: “Microfrontends” for Mobile in React Native
Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.
Building Cross-Platform Component Libraries for Web and Native with React
React Advanced 2021React Advanced 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.

Workshops on related topic

Introducing FlashList: Let's build a performant React Native list all together
React Advanced 2022React Advanced 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
Workshop
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
How to Build an Interactive “Wheel of Fortune” Animation with React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
Effective Detox Testing
React Advanced 2023React Advanced 2023
159 min
Effective Detox Testing
Workshop
Josh Justice
Josh Justice
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
Building for Web & Mobile with Expo
React Day Berlin 2022React Day Berlin 2022
155 min
Building for Web & Mobile with Expo
Workshop
Josh Justice
Josh Justice
We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms.
In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!
What's included1. Setting up drawer and stack navigators with React Navigation, including responsiveness2. Configuring React Navigation with URLs3. Setting up React Native Paper including styling the React Navigation drawer and headers4. Setting up a custom color theme that supports dark mode5. Configuring favicons/app icons and metadata6. What to do when you can’t or don’t want to provide the same functionality on web and mobile
Prerequisites- Familiarity with building applications with either React or React Native. You do not need to know both.- Machine setup: Node LTS, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/