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

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

or

yarn add gatsby-plugin-react-native-web

Use the 2.x branch

yarn add [email protected]

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.

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.

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

• 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

Looking for a React/ReactNative freelance expert with more than 5 years production experience? Contact me from my website or with Twitter.