Share components between your React Native mobile app and your Gatsby static website.
Check the online demo and its code
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`,
],
}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