DEV Community: Evan Bacon

Fast Refresh with Expo Web! 🏃🏻‍♂️🔄

Evan Bacon — Mon, 20 Apr 2020 16:29:30 +0000

If you've used Expo on iOS or Android recently you've probably used Fast Refresh (by Dan Abramov) to achieve stateful hot reloading during development. But how do you use Fast Refresh with Expo for web.?.. (Pretty easily).

On web this will update the DOM without reloading the page, this means the state will remain the same across updates. To fully update you can simply reload the window with ⌘ + R.

🤔 How to use

Currently there's no official Fast Refresh Webpack plugin, but you can get started today using a great community plugin by Michael Mok!

Bootstrap a new universal React Native project:
- Expo: expo init then select any project
- Other: npx create-react-native-app
Install the community Fast Refresh package:
- yarn add -D @pmmmwh/react-refresh-webpack-plugin webpack-hot-middleware
Eject the Webpack config:
- expo customize:web
In your newly created webpack.config.js:



const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // Use the React refresh plugin in development mode
  if (env.mode === "development") {
    config.plugins.push(
      new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
    );
  }

  return config;
};

Now in your babel.config.js:



module.exports = function (api) {
  // This caches the Babel config by environment.
  api.cache.using(() => process.env.NODE_ENV);

  return {
    presets: ["babel-preset-expo"],
  };
};

Now run expo start:web to use it!

💡 BTW

When the official React fast refresh has been released, we will work on unifying it with native to create a universal solution. Until then this is a pretty nifty little feature! :]

Why share now then?

I got the idea for this tutorial from my friend Tim Neutkens of Next.js. I highly recommend using Next.js with Expo for web especially for navigation!

// Detect dark theme var iframe = document.getElementById('tweet-1251942933953228802-640'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1251942933953228802&theme=dark" }

👋 That's all

Thanks for reading, that's all I've got for you today. Let me know if you enjoyed this article, and reach out if you have any more questions!

🤔🌐 React Native for web developers

Evan Bacon — Wed, 19 Feb 2020 19:21:22 +0000

In the world of web development, everything is streamlined. The concept of React Native is really appealing to a React developer on paper, but abandoning your existing knowledge of HTML and CSS in favor of primitives like View, Image, Text can be a lot to handle. But what if it didn't need to be? What if you could truly build native apps with your already existing knowledge of building websites.

TL;DR: You can now

The Issue

This article assumes you know React Native can be used to create iOS, Android, and Web apps. If you don't watch this!

React Native is great ... for native developers (and by extension the entire human race 😁). Instead of using Objective-C, or Java you can build your native app cross-platform with just ~~JavaScript~~ TypeScript! Even with the entirely original ideas of Flutter and SwiftUI from Google and Apple respectively, React Native is a no-brainer. The flexibility of JavaScript, the convenience of OTA updates, Expo as a whole. React Native has it all.

...unless you're a web developer. Then it's missing a few things.

The learning curve of React Native

The default flavor of React Native considers all platforms equally, this means the API you interface with doesn't have any platform specific references. A good example of this is linking.

Say we want to create a text link to open another website.

In the browser you simply create a link:

<a href="https://dev.to">Link</a>

Natively you would create a generic Text element and use the Linking API to open a URL:

import { Text, Linking } from 'react-native';

function openLink() {
  Linking.openURL('https://dev.to')
}

export default () => (
  <Text onPress={openLink}>Link</Text>
)

Now universally with Expo (iOS, Android, and Web), you'd do this:

import { Text, Platform, Linking } from 'react-native';

const Link = ({ href, ...props }) => (
  <Text
    {...props}
    accessibilityRole="link"
    href={href}
    onPress={() => {
      if (Platform.OS !== 'web') 
        Linking.openURL(href);
    }}
  />
);

export default () => (
  <Link href="https://dev.to">Link</Link>
)

This is pretty unintuitive if you're coming from a web development background. For the sake of brevity I won't get into how much of nightmare it is to use this with TypeScript. href isn't in the TypeScript definition for <Text /> because web support is an out-of-tree solution. If you want to add TypeScript support you'd have to remap the types of the Text element which takes a lot of digging to get right.

Problem 002

Every front end developer talks about how native apps have features that you just can't get in the browser. But what about the web-only features that you can't get natively? Possibly the most important feature like this is SEO. For many websites indexing is critical to success.
SEO is a very unexplored, and difficult thing to do with React Native (minus this article I wrote about using Expo with Next.js).

The Solution

Considering the issues I just laid out, the solution is somewhat obvious. React developers don't need "React Native", they need "React DOM rendered natively".
So I created a library which helps you do just that, called @expo/html-elements.
A set of (currently 40 new) light-weight, universal components named after HTML elements that help ease you into the React Native world without actually adding any overhead to your native project.

@expo/html-elements also help you accomplish:

An easier path for all users of React Native to implement common web functionality in their universal apps.
Optimized for SEO by using the correct DOM element whenever possible.
More automation around A11Y in your iOS, Android, and web projects.

Now if you want to build a simple link you can!

import { A } from '@expo/html-elements';

return <A href="#" target="_blank" />

This link then converts to the following A11Y compliant link element while stripping away unused props:

Platform	Output
Web	`<a dir="auto" href="#" role="link" target="_blank" />`
Native	`<Text accessibilityRole="link" onPress={() => Linking.openURL('#')} />`

Having an <a> element is good for a few reasons. You get the "copy link address" feature, the hover preview, peek and pop on iOS, and a few other things users have come to expect from the web.

Smarter Layouts

Using headers and other layout elements won't impact your native app, but not using them can impact your web search results. Consider the following page in my app:

Try it

import { View, Text, Button } from 'react-native';

export default () => (
  <>
    <Text>My Story</Text>
    <View>
      <Text>I did a thing with Lego now I code</Text>
    </View>
    <View>
      <Button title="follow me" />
    </View>
  </>
)

Web crawlers and screen readers see a bunch of raw data like this:

<div>My Story</div>
<div>
  <div>I did a thing with Lego now I code</div>
</div>
<div>
  <div role="button" />
</div>

If you were making a basic website with HTML (and not creating an app) you would probably use a variety of elements to ensure screen readers and crawlers work optimally:

<h1>My Story</h1>
<main role="main">
  <p>I did a thing with Lego now I code</p>
</main>
<footer>
  <div role="button" />
</footer>

This tells the crawlers so much about our page, but how do we get this without compromising our native app? Well, to be honest it was actually pretty difficult and required a deep understanding of React Native web to figure out... But now with @expo/html-elements (!!) you simply:

import { H1, Main, P, Footer } from '@expo/html-elements';
import { Button } from 'react-native';

export default () => (
  <>
    <H1>My Story</H1>
    <Main>
      <P>I did a thing with Lego now I code</P>
    </Main>
    <Footer>
      <Button title="follow me" />
    </Footer>
  </>
)

Now my page has universal A11Y features, and uses more of the correct DOM elements in the browser! 😎

Platform	Output
Web	`<h1>My Story</h1><main role="main"><div>I did a thing with Lego now I code</div></main><footer><div role="button" /></footer>`
Native	`<Text>My Story</Text><View><Text>I did a thing with Lego now I code</Text></View><View><Button title="follow me" /></View>`

Due to the way text style inheritance works we still use a div for things like p, b, strong, etc. unless that text is a child, then it uses a span.

Getting Started

You can get started right away using snack: https://snack.expo.io/@bacon/blank-elements

- Or -

Create a universal project and get started using it locally:

Install the CLI npm i -g expo-cli
Create a new project expo init my-project
Install the package yarn add @expo/html-elements
Start the project with expo start
- Press w to open in the browser
- Press i to open iOS in the simulator
- Press a to start the project on an Android emulator
Optionally: You can also use this package with any React Native tool
- Ignite CLI: ignite-cli
- Community CLI: @react-native-community/cli

Final Thoughts

Perhaps you haven't encountered any of the issues @expo/html-elements solves, or you think they could be solved in a different way, I'd love to hear your feedback.

I imagine some people may see this package and think that their native app is simply running in a web view like Cordova. This is absolutely NOT the case. Your views are still all optimally rendered as native views. If you encounter any misconceptions regarding this, I would appreciate you directing those folks to this post!

👋 Thanks for Reading

I hope this makes your transition from web development to web + native development even easier! If you enjoyed, staring the repo would be much appreciated: @expo/html-elements!

Keep in Touch!!

Getting Started with Expo Web

Evan Bacon — Wed, 29 Jan 2020 08:38:13 +0000

👉 This guide is for beginner React devs with no knowledge of Expo, or building mobile apps.

Expo lets you build and deploy real iOS, Android, and Web apps with React and JavaScript. Expo websites are performant and highly customizable; meaning you can use them with any of your existing React tools like Next.js, Gatsby, Preact, Electron, etc...

This guide will quickly show you the basics for creating a website and deploying it to the web in minutes! For more on mobile apps check out the Expo docs.

You'll Learn how to:

🔽 Install	💫 Initialize	🏃🏼‍♀️ Start	🚀 Build	🔼 Deploy

🔽 Components

💫 Run Everywhere

🏃🏼‍♀️ Learn More

Getting Started

Install the Expo CLI and make a new universal project (Web, iOS, Android):

💡 Absolute beginners with no coding experience should visit snack.expo.io to get started in the browser without using the terminal.



$ npm install -g expo-cli

Create a new Expo project:

💡 Learn more about expo init



$ expo init myProject

Now enter the project and start it:



$ cd myProject

$ expo start --web

Your browser will automatically open to the website and you'll see this:

Building

Creating a production build is simple:

💡 Expo Web builds live in the web-build folder.



$ expo build:web

You can deploy the website using any hosting service. For this example we'll use Netlify:



$ npx netlify deploy --dir web-build

And that's all! You just created and deployed your first universal Expo website!! See some examples and learn more in the Expo Documentation.

🤔 How Expo Web Works

Every screen in an Expo app is a React Component, but instead of using <div/>, <p/>, <img/> - Expo uses <View />, <Text />, <Image />, <ScrollView />, etc...

The first component in your app is whatever JSX you export from App.js:



import React from 'react';
import { Text } from 'react-native';

function App() {
  return <Text>Expo Everywhere!</Text>
}

export default App;

🏃🏻‍♂️ Running Everywhere

🌐 Try Expo Web in the browser with: ```sh

$ expo start --web

or faster in web-only mode

$ expo start:web

- 💻 Run in the **simulator** with:
```sh


$ expo start --ios

# or Android

$ expo start --android

📱 You can also open this on your phone with the Expo client!

🕵️‍♀️ Learn More

🎨 Now you can style the text
🚗 Start Navigating and Routing with Expo's React Navigation.
🚀 Use with Next.js or Gatsby for simple web-only navigation and routing.
🔥 Use a Universal Expo Component Library to get moving faster:
⭐️ You can also simply visit snack.expo.io to get started in the browser without installing anything!

👋 Thanks for Reading

That's all for now. Keep up with the latest Expo Web news by following 👇

👑⚙️ Smaller, Faster Websites with Preact and Expo

Evan Bacon — Wed, 22 Jan 2020 18:13:53 +0000

React Native for web is awesome because not only can you reuse all of the dope native Expo packages like expo-camera and react-native-gesture-handler, but you can also use any of the neat things coming out of the React/web community to create blazingly fast websites.

A great example of this is the library Preact by Jason Miller! Preact is a light-weight (~3kb) alternative to React.
When building a web-only project setup is simple, you can just replace React with Preact and start coding right away, but React Native for web is a little bit more complicated.
Because RNWeb uses many different React features we have to really push Preact to its limits to get it working with Expo for web. Luckily it's still pretty simple to setup.

Before Preact

Before we cover the how, let's talk about why you might want to use Preact. If you create a standard Expo web project (at the time of writing this article), the bundle size will look something like the report below.

❌ 60.75 KB Gzipped

After Preact

If you configure your project to use Preact instead of React, the bundle will reduce drastically! This means your website will load faster and work much better for users with poor internet connections or low-end devices.

✅ 27.98 KB Gzipped

⚽️ Getting Started

To use Preact with React Native for web, you'll need to install the packages and alias them to React.

💡 The most updated info is in the Expo docs: Using Preact

Install Preact (requires Preact 10+):
- yarn add preact-responder-event-plugin preact
- or npm install --save preact-responder-event-plugin preact
Create a custom Webpack config for the Expo CLI to use:
- Run expo customize:web
- Select webpack.config.js
Modify the Webpack config to use Preact instead of React:

  const createExpoWebpackConfigAsync = require('@expo/webpack-config');
  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

  module.exports = async (env, argv) => {
    const config = await createExpoWebpackConfigAsync(env, argv);

    // Add more aliases
    config.resolve.alias = {
      ...config.resolve.alias,
      // Use Preact aliases
      react$: 'preact/compat',
      'react-dom$': 'preact/compat',
      // Fix the responder system which react-native-web depends on
      'react-dom/unstable-native-dependencies$': 'preact-responder-event-plugin',
    };

    // Optionally you can enable the bundle size report. 
    // It's best to do this only with production builds.
    if (env.mode === 'production') {
      config.plugins.push(new BundleAnalyzerPlugin({
        path: 'web-report',
      }));
    }
    return config;
  };

Running expo build:web will now use Preact instead of React. This means you'll now have a significantly smaller bundle! 🚀

Drawbacks

To achieve a smaller bundle size Preact has to cut a few features. For instance they don't support synthetic events. Another major drawback is that usage with React Native isn't very clear, if you're building a universal app you may want to consider using the same version of React across web and mobile. For more information on issues using Preact with React Native for web, please refer to this issue react-native-web#1219 (link courtesy of Max Thirouin)

👋 That's all

Thanks for reading, that's all I've got for you today. Let me know if you enjoyed this article, and reach out if you have any more questions!

Adding Dark Mode Support to Next.js, and Expo Projects

Evan Bacon — Fri, 03 Jan 2020 21:33:30 +0000

👋 Quick tutorial today! Here I'll show you how to setup your universal web & mobile app to use the client device's native color scheme! You can also use this same approach to setup other awesome features like React Native Safe Area Context and Expo Action Sheets! 💙

Tutorial

First setup your Expo or Next.js app to be universal.
Install the universal Expo package react-native-appearance: yarn add react-native-appearance.
[Web] Add the Appearance React Context provider to the root of your Next.js app by creating pages/_app.js

import React from 'react';
import { AppearanceProvider } from 'react-native-appearance';

export default ({ Component, pageProps }) => {
    return (  
      <AppearanceProvider>
        <Component {...pageProps} />
      </AppearanceProvider>
    )
}

[Mobile] Add the Appearance provider to the root of your Expo app in your ./App.js:

import React from 'react';
import { AppearanceProvider } from 'react-native-appearance';

export default function App() {
    return (  
      <AppearanceProvider>
        {/* ... */}
      </AppearanceProvider>
    )
}

Now you can use the useColorScheme hook anywhere in your Expo + Next.js app!

import { useColorScheme } from 'react-native-appearance';

function App() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';
  return (<Text style={{ color: isDark ? 'white' : 'black' }}>Hey 👋</Text>)
}

That's it! I use the same approach in my personal portfolio (Demo Image):

React Navigation

If your Expo app is using React Navigation (v4) then you'll want to wrap the navigation like this:

import * as React from 'react';
import { AppearanceProvider } from 'react-native-appearance';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// Can be any navigator
const AppNavigator = createStackNavigator(/* Your routes */)

function ContextNavigator(props) {
  return (
    <AppearanceProvider>
      <AppNavigator {...props} />
    </AppearanceProvider>
  );
}
// Hoist the routes
ContextNavigator.router = AppNavigator.router;

// Export the full navigator
export default createAppContainer(ContextNavigator);

Thanks for reading!

Please let me know if you found any problems! Also if you found this helpful, be sure to share it (possibly by printing the article out and handing it out around town 😄) and of course, smash that random unicorn button! 🦄

Using Expo SDK with Next.js websites

Evan Bacon — Tue, 03 Dec 2019 18:15:42 +0000

This tutorial has moved to expo/next-adapter.

🚀 Gatsby + React Native for Web + Expo 🥳

Evan Bacon — Wed, 27 Nov 2019 21:37:18 +0000

TL;DR: 🎳 Example 📚 Docs

In this post I'll show you how to setup your (universal) Expo app to use Gatsby when targeting web!

🚨 If you find bugs please report them on the expo-cli repo with the [gatsby] tag in the title.

Why use Gatsby with Expo?

Here are the main benefits of doing this:

You can prerender the web part of your Expo app.
If you use Gatsby already, then now you can share most of your code between web and mobile.
If you're new to Expo then this also means that you can use complex browser features from the Expo SDK like Camera, Gestures, Permissions, etc. whenever possible in the browser!

⚽️ Tutorial

Install or update the Expo CLI: npm i -g expo-cli
Create a new Expo project: expo init
Install the Gatsby plugin:

  # yarn
  yarn add gatsby gatsby-plugin-react-native-web

  # npm
  npm install --save gatsby gatsby-plugin-react-native-web

Create a gatsby-config.js and use the plugin: gatsby-config.js

   module.exports = {
     plugins: [
       `gatsby-plugin-react-native-web`,
       /* ... */
     ],
   }

Add /.cache and /public to your .gitignore
Now create the first page of your Gatsby project:
- Create the pages folder: mkdir -p src/pages
- Create the file:

  # JS
  cp App.js src/pages/index.js

  # TS
  cp App.tsx src/pages/index.tsx

Run yarn gatsby develop to try it out!
- Open the project in the browser http://localhost:8000/

Trouble Shooting

If you started your project without the Expo CLI you may also need to do these things:

If you started your project with Gatsby CLI then check out the guide I wrote in the docs: Gatsby Project with Expo.
Install React Native for Web: yarn add react-native-web
Install the babel preset for React Native web:

  # yarn
  yarn add --dev babel-preset-expo
  # npm
  npm install --save-dev babel-preset-expo

💡 Even though the name has Expo in it, you can (and should) use it for any React Native project as it provides universal platform support.
- Create a babel.config.js and use the Babel preset: babel.config.js

   module.exports = { presets: ['babel-preset-expo'] }

🏁 New Commands

Starting web
- 🚫 expo start:web
- ✅ yarn gatsby develop
Building web
- 🚫 expo build:web
- ✅ yarn gatsby build
Serving your static project
- 🚫 serve web-build
- ✅ yarn gatsby serve

📁 File Structure

Here is the recommended file structure for a Expo project with Gatsby support.

Expo Gatsby
├── src
│   └── pages ➡️ Routes
│       └── index.tsx ➡️ Entry Point for Gatsby
├── .cache ➡️ Generated Gatsby files (should be ignored)
├── public ➡️ Generated Gatsby files (should be ignored)
├── assets ➡️ All static assets for your project
├── App.tsx ➡️ Entry Point for Mobile apps
├── app.json ➡️ Expo config file
├── gatsby-config.js ➡️ Gatsby config file
└── babel.config.js ➡️ Babel config (should be using `babel-preset-expo`)

👋 Thanks for Reading

I hope you found this article helpful! If you do use this workflow I'd love to hear about how it worked for you 😁 If you didn't, I'd also love to hear! So go tweet some emojis at me :]

📚 More Info

Making Desktop apps with Electron, React Native, and Expo

Evan Bacon — Tue, 26 Nov 2019 21:23:39 +0000

TL;DR: Example. Expo + Electron is in alpha (Nov 2019). docs = most recent info.

This tutorial will show you how to use React Native, Electron, Webpack, and the Expo SDK too create dope Desktop apps!

Electron is a great way to make desktop apps, and possibly the easiest. Lots of popular apps like VSCode, Figma, Zeplin, and many others are made with it! I like to think of it as a browser with extra native features like File System, Touch Bar, Menu Bar, Bluetooth, In-app Purchases.

Another great framework is Expo, you can use it to build mobile apps and websites with React. Expo for web works by using browser features with react-native-web whenever it can, then failing gracefully when features aren't available. 🤔 But what if Expo for web had access to all of the same features as a native app? That would probably look something like "Expo for Desktop" 😮.

🚀 Tutorial

TL;DR: Here is an example repo..

Create a new Expo project with expo init (you can select a TypeScript project from here if you want 🥰)
- You may need to install or update the Expo CLI with npm i -g expo-cli
- This project by default can already run on iOS, Android, and web or as a PWA.
cd into the project and run yarn add -D @expo/electron-adapter
- This has all of the tools used to run Electron with Expo.
- Notice that it's not built directly into Expo CLI (out-of-tree solution).
Now run yarn expo-electron to bootstrap the project. Currently this does the following:
- Install the required dependencies: electron, @expo/webpack-config, react-native-web, etc...
- Create a new electron-webpack config file electron-webpack.js and wraps it in the method withExpoAdapter which ensures that everything is setup correctly.
- Append electron generated files to the .gitignore
Finally run yarn expo-electron start to start the project!
- Everything should just open automatically.
- You can view logs in the terminal.
- Quit with "ctrl+c" in the terminal or by closing the browser window.
- Make some changes to App.tsx to see the magic happen! 🧚‍♂️

🎨 Customizing the Main Process

If you're familiar with Electron you're probably wondering "what about the main process?" (but without the hyperlink).

Electron has 2 processes:

renderer process: which is where you'll write your React application code.
main process: Think of the "main process" as the native code in a React Native process (but still written with JavaScript). It's mostly unaware of the code running in the "renderer process", it has access to a variety of different features like creating windows.

📚 How it works

By default your project uses a main-process that runs in a hidden folder (node_modules/@expo/electron-adapter/...).
To customize the main process (highly recommended) you can run yarn expo-electron customize which will generate a folder /electron in your root directory.
You'll need to restart Electron for this new folder to become the new target.
- Everything in electron/main has hot-reloading enabled (!!) so that should make your life happier.
- the electron/webpack.config.js can be used to modify the Webpack config for both processes (use values passed to the method to detect which is which).

📂 File Structure

|- electron/
|-- webpack.config.js
|-- main/ All main process code goes in here
|--- index.js Entry point for your main process
|- dist/ Electron will generate files here, do not edit it directly.
|- electron-webpack.js Config file for the package electron-webpack which is required to run your project.
|- App.tsx || App.js The entry point of your renderer process, unless you change it in the package.json
|- src/ Not required, but you can put all of your renderer process code in here
|- assets/ All static assets, images, fonts, icons, SVGs, videos, etc...

⚙️ Building your project

At the time of writing this (Nov 2019) expo/electron-adapter doesn't provide any special building utils. But I've put together a guide for building a project with existing Electron packages: Expo Docs: Building Electron apps

🤭 Why Electron

"Why not just use a fully native solution like OSX and react-native-windows?" the reason is ... why not both! 🥳

In the future want to deliver the optimal experience for every platform, but we also really appreciate the ability to choose your stack. So for now you can use Electron, but in the future there will probably be even better native workflows provided by Expo.

🧸 Behavior

Webpack now resolves files with .electron.js & .web.js extensions in that order. If you want to use electron features then put them in a file like foo.electron.js.
Every universal package you have installed will be transpiled automatically, this includes packages that start with the name: expo, @expo, @unimodules, @react-navigation, react-navigation, react-native. You can add more by appending them to the array for key expo.web.build.babel.include in your app.json (this feature is experimental and subject to change).
I wrote the docs that I just blatantly lifted this section from :]

👋 Thanks so much

That's all for now, to stay updated on new features feel free to follow me on Twitter, Github, Dev..ehh...