{"id":13393971,"url":"https://github.com/slorber/gatsby-plugin-react-native-web","last_synced_at":"2025-04-05T11:07:51.918Z","repository":{"id":29923337,"uuid":"123116487","full_name":"slorber/gatsby-plugin-react-native-web","owner":"slorber","description":"react-native-web plugin for Gatsby","archived":false,"fork":false,"pushed_at":"2022-12-10T17:07:09.000Z","size":5173,"stargazers_count":276,"open_issues_count":83,"forks_count":30,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-29T10:05:40.302Z","etag":null,"topics":["expo-doc","expo-web","gatsby-plugin","gatsby-site","mdx","react-native","react-native-web","reactjs","unimodules","universal-cross-platform"],"latest_commit_sha":null,"homepage":"https://sebastienlorber.com/using-expo-in-gatsby","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slorber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-27T10:58:42.000Z","updated_at":"2024-08-16T15:47:32.000Z","dependencies_parsed_at":"2023-01-14T16:01:08.659Z","dependency_job_id":null,"html_url":"https://github.com/slorber/gatsby-plugin-react-native-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slorber%2Fgatsby-plugin-react-native-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slorber%2Fgatsby-plugin-react-native-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slorber%2Fgatsby-plugin-react-native-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slorber%2Fgatsby-plugin-react-native-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slorber","download_url":"https://codeload.github.com/slorber/gatsby-plugin-react-native-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325693,"owners_count":20920714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo-doc","expo-web","gatsby-plugin","gatsby-site","mdx","react-native","react-native-web","reactjs","unimodules","universal-cross-platform"],"created_at":"2024-07-30T17:01:04.166Z","updated_at":"2025-04-05T11:07:51.902Z","avatar_url":"https://github.com/slorber.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Gatsby plugin for React-Native-Web / Expo\n\n[![NPM](https://img.shields.io/npm/dm/gatsby-plugin-react-native-web.svg)](https://www.npmjs.com/package/gatsby-plugin-react-native-web)\n[![Build Status](https://travis-ci.com/slorber/gatsby-plugin-react-native-web.svg?branch=master)](https://travis-ci.com/slorber/gatsby-plugin-react-native-web)\n\nAdds [React-Native-Web](https://github.com/necolas/react-native-web) and [Expo](https://docs.expo.io/) support to a Gatsby site.\n\nExample \"production\" usage on my blog: [sebastienlorber.com/using-expo-in-gatsby](https://sebastienlorber.com/using-expo-in-gatsby)\n\n--- \n\n# Sponsor\n\n**[ThisWeekInReact.com](https://thisweekinreact.com)**: the best newsletter to stay up-to-date with the React ecosystem:\n\n[![ThisWeekInReact.com banner](https://user-images.githubusercontent.com/749374/136185889-ebdb67cd-ec78-4655-b88b-79a6c134acd2.png)](https://thisweekinreact.com)\n\n---\n\n# Why\n\nMain reasons:\n\n- sharing components between your mobile app and your static website.\n- using [atomic CSS-in-JS](https://sebastienlorber.com/atomic-css-in-js/) with React-Native-Web\n\nCross-platform code is finally taking off, and it's time to share more code between web and mobile.\nThere's already Expo web, but it is not suited for a marketing website that needs JAMStack / SEO / CMS integration / Performance / Gatsby-image ...\nThis project aims to \"merge\" Expo for web with Gatsby, so that you can build useful things like:\n\n- Share a universal cross-platform design system between your mobile app and your marketing website\n- Blog about ReactNative, and include runnable RN demos directly in your MDX\n- Document your ReactNative components with Docz\n- Use ReactNativeWeb as a performant CSS-in-JS lib, like Twitter does (see [atomic CSS-in-JS](https://sebastienlorber.com/atomic-css-in-js/)).\n\n--- \n\n# Supported features\n\nThis plugin uses the same setup as Expo for web, thanks to [@expo/webpack-config](https://www.npmjs.com/package/@expo/webpack-config)\n\nSupport includes:\n- Primitive components from ReactNative (check RNW [support](https://github.com/necolas/react-native-web#compatibility-with-react-native))\n- Expo unimodules with web support like `expo-camera` (check Expo doc for support)\n- .web.js extension handling\n- Universal ReactNative design system libraries, like `react-native-paper`, `react-native-ui-kitten`...\n- Universal gesture systems with Animated, `react-native-gesture-handler` or Reanimated.\n- Universal SVG components using `react-native-svg`\n- Automatic transpilation of third party react-native libs\n- Works in MDX\n- Works in Docz (Gatsby-based)\n\n\n# Recipe\n\nUse the new Gatsby Recipe feature to get started fast:\n\n```\ngatsby recipes https://raw.githubusercontent.com/slorber/gatsby-plugin-react-native-web/master/recipe.mdx\n```\n\n\n# Manual setup\n\n\n**1. Install required dependencies**\n\n```\nyarn add react-native react-native-web@~0.11.7 gatsby-plugin-react-native-web expo\n```\n\n\n**2. Create a `gatsby-config.js` and use the plugin:**\n\n```js\n   module.exports = {\n     plugins: [\n       `gatsby-plugin-react-native-web`,\n     ],\n   }\n```\n\n**3. Install additional cross-platform libraries / unimodules (optional)**\n\nAdd expo audio/video components:\n\n```\nyarn add expo-av\n``` \n\n**4. Create a test pages**\n\nCreate an example page like [this one](./recipePage.js) in your `./pages` folder, or try importing React-Native / Expo components into an existing one.\n\n--- \n\n# Demo\n\nThe `examples` folder have runnable Gatsby site demos. They are also hosted:\n\n- [sebastienlorber.com](https://sebastienlorber.com): an [open-source](https://github.com/slorber/sebastienlorber.com) Gatsby/Novela blog. All MDX embedded components are using React-Native ([example](https://sebastienlorber.com/using-expo-in-gatsby)).\n- [Todos example](https://gatsby-rnw-todos.netlify.com): a \"todo backoffice\" built with Gatsby + RNW + Apollo + TS + react-native-paper: I like fancy stacks.\n\n# Example usage\n\nVery basic example:\n\n```js\nimport React from 'react'\nimport Link from 'gatsby-link'\nimport { StyleSheet, TouchableOpacity, Text, View } from 'react-native'\n\nconst styles = StyleSheet.create({\n  box: { padding: 10, margin: 10, borderWidth: 1, borderColor: 'black' },\n  text: { fontWeight: 'bold', color: 'red' },\n  button: {\n    marginVertical: 40,\n    paddingVertical: 20,\n    paddingHorizontal: 10,\n    borderWidth: 1,\n    borderColor: 'black',\n    backgroundColor: 'lightgrey',\n    alignItems: 'center',\n  },\n  buttonText: { fontWeight: 'bold', color: 'black' },\n})\n\nconst IndexPage = () =\u003e (\n  \u003cView style={styles.box}\u003e\n    \u003cText style={styles.text}\u003e\n      Hi this is React-Native-Web rendered by Gatsby\n    \u003c/Text\u003e\n    \u003cTouchableOpacity style={styles.button} onPress={() =\u003e alert('it works')}\u003e\n      \u003cText style={styles.buttonText}\u003eButton\u003c/Text\u003e\n    \u003c/TouchableOpacity\u003e\n    \u003cLink to=\"/page-2/\"\u003eGo to page 2\u003c/Link\u003e\n  \u003c/View\u003e\n)\n\nexport default IndexPage\n```\n\n![image](https://camo.githubusercontent.com/58ec39b3966cdefb241b90fb4643ad8aa7b971b2/68747470733a2f2f7062732e7477696d672e636f6d2f6d656469612f445844575f715058304149534148532e6a70673a6c61726765)\n\n# How does it work\n\n- Adds `babel-preset-expo` which manages tree-shaking of `react-native-web` packages.\n- Implements module resolution for files with platform extensions like `.web.js`, `.web.tsx`...\n- 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.\n- Creates support for Gatsby SSR with `react-native-web`\n- Extracts critical CSS with the `StyleSheet` api of `react-native-web` and adds it to the static page.\n\n# FAQ\n\n\n### Expo already has web support, why do I need this?\n\nExpo web support is more like Create-React-App, it only outputs a single html file and does client side routing. It works fine for apps, but miss the various benefits of Gatsby, including performance, SEO, CMS integration, Gatsby-image...\n\nActually, this plugin uses the same webpack config as Expo web support, and Expo (Evan Bacon) contributed to this project. You'll also find support for Next if you need a static/SSR hybrid.\n\n\n### How to share code for navigation/routing?\n\nThis is not easy, because navigation patterns are different between web and mobile. \n\nReactNavigation may have web support, but Gatsby can't use ReactNavigation config easily to construct static pages.\n\nYou'd rather keep using platform-specific navigation trees (pages for Gatsby, and stacks/tabs for ReactNavigation).\n\nEventually you could build your own cross-platform `navigate()` function, and your own cross-platform `Link` component (take a look at [expo-gatsby-navigation](https://github.com/nandorojo/expo-gatsby-navigation)).\n\n\n### Can I share the same repo to build a mobile app and a Gatsby site with shared components?\n\nThe most simple way to share code between an Expo app and a Gatsby site is currently to use a single folder for both the Expo app and the Gatsby app.\n\nOtherwise you can try to setup a monorepo, but keep in mind this requires more complex configuration, and Metro does not follow symlinks.\n\nYou can also read the Expo doc about [adding Gatsby support to an existing app](https://docs.expo.io/versions/latest/guides/using-gatsby/).\n\n\n### How can I publish an universal cross-platform component that works on web and mobile?\n\nYou can take a loot at this example: [expo-dark-mode-switch](https://github.com/EvanBacon/expo-dark-mode-switch). It uses [expo-module-scripts](https://www.npmjs.com/package/expo-module-scripts).\n\nYou can also check [react-native-community/bob](https://github.com/react-native-community/bob)\n\n\n# Hire a freelance expert\n\nLooking for a React/ReactNative freelance expert with more than 5 years production experience?\nContact me from my [website](https://sebastienlorber.com/) or with [Twitter](https://twitter.com/sebastienlorber).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslorber%2Fgatsby-plugin-react-native-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslorber%2Fgatsby-plugin-react-native-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslorber%2Fgatsby-plugin-react-native-web/lists"}