react-native-web plugin for Gatsby
MIT License
Adds React-Native-Web and Expo support to a Gatsby site.
Example "production" usage on my blog: sebastienlorber.com/using-expo-in-gatsby
ThisWeekInReact.com: the best newsletter to stay up-to-date with the React ecosystem:
Main reasons:
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:
This plugin uses the same setup as Expo for web, thanks to @expo/webpack-config
Support includes:
expo-camera
(check Expo doc for support)react-native-paper
, react-native-ui-kitten
...react-native-gesture-handler
or Reanimated.react-native-svg
Use the new Gatsby Recipe feature to get started fast:
gatsby recipes https://raw.githubusercontent.com/slorber/gatsby-plugin-react-native-web/master/recipe.mdx
1. Install required dependencies
yarn add react-native react-native-web@~0.11.7 gatsby-plugin-react-native-web expo
2. Create a gatsby-config.js
and use the plugin:
module.exports = {
plugins: [
`gatsby-plugin-react-native-web`,
],
}
3. Install additional cross-platform libraries / unimodules (optional)
Add expo audio/video components:
yarn add expo-av
4. Create a test pages
Create an example page like this one in your ./pages
folder, or try importing React-Native / Expo components into an existing one.
The examples
folder have runnable Gatsby site demos. They are also hosted:
Very basic example:
import React from 'react'
import Link from 'gatsby-link'
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native'
const styles = StyleSheet.create({
box: { padding: 10, margin: 10, borderWidth: 1, borderColor: 'black' },
text: { fontWeight: 'bold', color: 'red' },
button: {
marginVertical: 40,
paddingVertical: 20,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: 'black',
backgroundColor: 'lightgrey',
alignItems: 'center',
},
buttonText: { fontWeight: 'bold', color: 'black' },
})
const IndexPage = () => (
<View style={styles.box}>
<Text style={styles.text}>
Hi this is React-Native-Web rendered by Gatsby
</Text>
<TouchableOpacity style={styles.button} onPress={() => alert('it works')}>
<Text style={styles.buttonText}>Button</Text>
</TouchableOpacity>
<Link to="/page-2/">Go to page 2</Link>
</View>
)
export default IndexPage
babel-preset-expo
which manages tree-shaking of react-native-web
packages..web.js
, .web.tsx
...@expo/webpack-config
which creates aliases for various React Native asset features and ensures that all React Native packages, and Unimodules are loaded with Babel.react-native-web
StyleSheet
api of react-native-web
and adds it to the static page.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.
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).
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.
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
Looking for a React/ReactNative freelance expert with more than 5 years production experience? Contact me from my website or with Twitter.