/gatsby-plugin-react-native-web

react-native-web plugin for Gatsby

Primary LanguageJavaScriptMIT LicenseMIT

Gatsby plugin for react-native-web

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

Check the online demo and its code

Install

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

or

yarn add gatsby-plugin-react-native-web

It is recommended to use these versions:

"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 will also need gatsby-plugin-react-next for React 16 support.

Gatsby basic config should look like:

module.exports = {
  siteMetadata: {
    title: `Gatsby React Native Web plugin example`,
  },
  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

image

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