Gatsby plugin for react-native-web
Adds React-Native-Web and Expo support to Gatsby.
This means you can use components from the ReactNative ecosystem, directly on your Gatsby website.
- Primitive components from ReactNative (check RNW support)
- Expo unimodules with web support like
expo-camera(check Expo doc for support)
- Universal ReactNative design system libraries, like
react-native-ui-kitten, your own...
- Universal gesture systems with Animated,
- Universal SVG components using
- Works in MDX
- Works in Docz
Note: you don't necessarily need to use Expo, plain regular React-Native-Web is fine. It's just if you want to use Expo it's already setup for you.
Cross-platform code is finally taking off, and it's time to share more code between web and mobile.
There's already Expo web, but it is not suited for a marketing website that needs JAMStack / SEO / CMS integration / Performance / Gatsby-image ...
This project aims to "merge" Expo for web with Gatsby, so that you can build useful things like:
- Share a universal cross-platform design system between your mobile app and your marketing website
- Blog about ReactNative, and include runnable RN demos directly in your MDX
- Document your ReactNative components with Docz
- Use ReactNativeWeb as a performant CSS-in-JS lib, like Twitter does.
1. Install required dependencies
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", "react-native-web": "^0.11.7", "react-native-gesture-handler": "https://github.com/software-mansion/react-native-gesture-handler.git#95bfb4df7ce9b1e222d50ead99eee7e27cd79043", "gatsby-plugin-react-native-web": "^3.0.0-beta.7", "expo": "^36.0.2",
Here are versions that work fine together. It is likely to work with newer versions too. React-Native-Web show which RN version it has support for.
2. Create a
gatsby-config.js and use the plugin:
3. Install additional unimodules / cross-platform libraries.
yarn expo install react-native-svg yarn expo install expo-camera
yarn expo install myExpoLib is useful because Expo knows the most appropriate version to install, according to current Expo SDK.
examples folder have runnable Gatsby site demos. They are also hosted:
- Todos example: a "todo backoffice" built with Gatsby + RNW + Apollo + TS + react-native-paper: a fancy but effective stack.
You'd better look at the code of the online demo.
Otherwise, here is a simple Gatsby page that renders fine:
const styles = StyleSheetconst IndexPage =<View style=stylesbox><Text style=stylestext>Hi this is React-Native-Web rendered by Gatsby</Text><TouchableOpacity style=stylesbutton onPress= ><Text style=stylesbuttonText>Button</Text></TouchableOpacity><Link to="/page-2/">Go to page 2</Link></View>
How does it work
babel-preset-expowhich manages tree-shaking of
- Implements module resolution for files with platform extensions like
@expo/webpack-configwhich creates aliases for various React Native asset features and ensures that all React Native packages, and Unimodules are loaded with Babel.
- Creates support for Gatsby SSR with
- Extracts critical
StyleSheetCSS during SSR and adds it to page.
Expo already has web support, why do I need this?
Expo web support is more like Create-React-App, it only outputs a single html file and does client side routing. It works fine for apps, but miss the various benefits of Gatsby, including performance, SEO, CMS integration, Gatsby-image...
Actually, this plugin uses the same webpack config as Expo web support, and Expo (Evan Bacon) contributed to this project. You'll also find support for Next if you need a static/SSR hybrid.
How to share code for navigation/routing?
This is not easy, because navigation patterns are different between web and mobile.
ReactNavigation may have web support, but Gatsby can't use ReactNavigation config easily to construct static pages.
You'd rather keep using platform-specific navigation trees (pages for Gatsby, and stacks/tabs for ReactNavigation).
Eventually you could build your own cross-platform
navigate() function, and your own cross-platform
Link component (take a look at expo-gatsby-navigation).
Can I share the same repo to build a mobile app and a Gatsby site with shared components?
The most simple way to share code between an Expo app and a Gatsby site is currently to use a single folder for both the Expo app and the Gatsby app.
Otherwise you can try to setup a monorepo, but keep in mind this requires more complex configuration, and Metro does not follow symlinks.
You can also read the Expo doc about adding Gatsby support to an existing app.
How can I publish an universal cross-platform component that works on web and mobile?
You can take a loot at this example: expo-dark-mode-switch. It uses expo-module-scripts.
You can also check react-native-community/bob
Hire a freelance expert
Looking for a React/ReactNative freelance expert with more than 5 years production experience? Contact me from my website or with Twitter.