Need help with gatsby-plugin-react-native-web?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

slorber
267 Stars 30 Forks MIT License 124 Commits 63 Opened issues

Description

react-native-web plugin for Gatsby

Services available

!
?

Need anything else?

Contributors list

# 3,371
React
TypeScr...
gui-fra...
Redux
92 commits
# 2,664
React N...
TypeScr...
Objecti...
Three.j...
12 commits
# 360,457
stripe-...
React N...
reactjs
gatsby-...
6 commits
# 75,229
Ruby
nextjs
Express
timber
1 commit
# 5,703
TypeScr...
gatsby
create-...
GraphQL
1 commit
# 263,826
JavaScr...
React N...
reactjs
gatsby-...
1 commit

Gatsby plugin for React-Native-Web / Expo

NPM Build Status

Adds React-Native-Web and Expo support to a Gatsby site.

Example "production" usage on my blog: sebastienlorber.com/using-expo-in-gatsby


Sponsor

ThisWeekInReact.com: the best newsletter to stay up-to-date with the React ecosystem:

ThisWeekInReact.com banner


Why

Main reasons:

  • sharing components between your mobile app and your static website.
  • using atomic CSS-in-JS with React-Native-Web

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 (see atomic CSS-in-JS).

Supported features

This plugin uses the same setup as Expo for web, thanks to @expo/webpack-config

Support includes: - Primitive components from ReactNative (check RNW support) - Expo unimodules with web support like

expo-camera
(check Expo doc for support) - .web.js extension handling - Universal ReactNative design system libraries, like
react-native-paper
,
react-native-ui-kitten
... - Universal gesture systems with Animated,
react-native-gesture-handler
or Reanimated. - Universal SVG components using
react-native-svg
- Automatic transpilation of third party react-native libs - Works in MDX - Works in Docz (Gatsby-based)

Recipe

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

Manual setup

1. Install required dependencies

yarn add react-native [email protected]~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.

Demo

The

examples
folder have runnable Gatsby site demos. They are also hosted:

Example usage

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 = () => ( Hi this is React-Native-Web rendered by Gatsby alert('it works')}> Button Go to page 2 )

export default IndexPage

image

How does it work

  • Adds
    babel-preset-expo
    which manages tree-shaking of
    react-native-web
    packages.
  • Implements module resolution for files with platform extensions like
    .web.js
    ,
    .web.tsx
    ...
  • Uses
    @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.
  • Creates support for Gatsby SSR with
    react-native-web
  • Extracts critical CSS with the
    StyleSheet
    api of
    react-native-web
    and adds it to the static page.

FAQ

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.