react-native-web plugin for Gatsby
Switch branches/tags
Nothing to show
Clone or download
Latest commit c35f0c5 Dec 14, 2018

README.md

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

or

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

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

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.