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.

Install

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

yarn add gatsby-plugin-react-native-web

Gatsby 2

Use the 2.x branch

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

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

You should NOT use gatsby-plugin-react-next for Gatsby 2

Gatsby 1

These versions have been tested together and work correctly:

"gatsby-plugin-react-native-web": "^0.3.0",
"gatsby": "^1.9.255",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-native-web": "^0.6.0",
"babel-plugin-react-native-web": "^0.6.0",

You need to use gatsby-plugin-react-next for React 16 support.

Gatsby basic config should look like:

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

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

add react-native-web babel plugin
support Gatsby SSR for react-native-web
extract critical react-native-web StyleSheet CSS during SSR and add it to page