Share components between your React Native mobile app and your Gatsby static website.
-
Install the plugin:
yarn add react-native-web gatsby-plugin-react-native-web
ornpm install --save react-native-web gatsby-plugin-react-native-web
-
Create a
gatsby-config.js
and use the plugin:gatsby-config.js
module.exports = { plugins: [ `gatsby-plugin-react-native-web`, /* ... */ ], }
-
Install the babel preset for React Native web:
yarn add --dev babel-preset-expo
ornpm install --save-dev babel-preset-expo
-
Create a
babel.config.js
and use the Babel preset:babel.config.js
module.exports = { presets: ['babel-preset-expo'] }
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
- Adds
babel-preset-expo
which manages tree-shaking ofreact-native-web
packages. - Implements module resolution for files with platform extensions like
.web.js
,.web.tsx
... - Uses
@expo/webpack-config
which creates aliases for various React Native asset features and ensures that all React Native packages, and Unimodules are loaded with Babel. - Creates support for Gatsby SSR with
react-native-web
- Extracts critical
react-native-web
StyleSheet
CSS during SSR and adds 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.