Package Exports

gatsby-plugin-react-native-web

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gatsby-plugin-react-native-web) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Gatsby plugin for react-native-web

Share components between your React Native mobile app and your Gatsby static website.

Setup

Install the plugin: yarn add react-native-web gatsby-plugin-react-native-web or npm install --save react-native-web 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`,
    /* ... */
  ],
}

Install the babel preset for React Native web: yarn add --dev babel-preset-expo or npm install --save-dev babel-preset-expo
Create a babel.config.js and use the Babel preset: babel.config.js
```
module.exports = { presets: ['babel-preset-expo'] }
```

Gatsby 2

Use the 2.x branch

yarn add gatsby-plugin-react-native-web@2.0.0-beta.0

Add the RN / RNW dependencies. Choose versions carefully according to RNW doc. If you want you can pick versions from examples folder.

Please report here if it works fine for you, or not.

Demo

The 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.

Example usage

You'd better look at the code of the online demo.

Otherwise, here is a simple Gatsby page that renders fine:

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

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 react-native-web StyleSheet CSS during SSR and adds it to page.

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.