├── index.js ├── examples ├── uikits │ ├── babel.config.js │ ├── .prettierrc │ ├── src │ │ ├── assets │ │ │ └── retro-regular.ttf │ │ ├── components │ │ │ ├── expo │ │ │ │ ├── ExpoCameraExample.js │ │ │ │ ├── ExpoConstantsExample.js │ │ │ │ ├── ExpoLocationExample.js │ │ │ │ ├── ExpoFontExample.js │ │ │ │ ├── ExpoBlurExample.js │ │ │ │ ├── ExpoPermissionsExample.js │ │ │ │ ├── ExpoBatteryExample.js │ │ │ │ └── ExpoGesturesExample.js │ │ │ ├── JSONView.js │ │ │ ├── layout.css │ │ │ ├── example.js │ │ │ ├── externalLink.js │ │ │ ├── kittens │ │ │ │ ├── KittensSelectExample.js │ │ │ │ └── KittensDatepickerExample.js │ │ │ └── layout.js │ │ └── pages │ │ │ ├── kittens.js │ │ │ ├── expo.js │ │ │ ├── nativebase.js │ │ │ ├── index.js │ │ │ ├── elements.js │ │ │ ├── nachos.js │ │ │ └── paper.js │ ├── README.md │ ├── gatsby-config.js │ ├── gatsby-ssr.js │ ├── gatsby-browser.js │ ├── .gitignore │ └── package.json └── todos │ ├── src │ ├── utils │ │ ├── typography.d.ts │ │ └── typography.js │ ├── declarations.d.ts │ ├── layouts │ │ ├── MainLayout.css │ │ └── MainLayout.tsx │ ├── pages │ │ ├── 404.tsx │ │ ├── createTodo.tsx │ │ ├── index.tsx │ │ └── todos.tsx │ ├── components │ │ └── appLink.tsx │ ├── __apollo_codegen__ │ │ ├── TODO_STATS.ts │ │ ├── globalTypes.ts │ │ ├── UPDATE_TODO.ts │ │ └── GET_TODOS.ts │ └── AppApolloClient.tsx │ ├── .prettierrc │ ├── graphql.config.json │ ├── apollo.config.js │ ├── README.md │ ├── gatsby-config.js │ ├── tsconfig.json │ ├── tslint.json │ ├── gatsby-node.js │ ├── package.json │ └── .gitignore ├── .babelrc ├── .prettierrc ├── src ├── gatsby-browser.js ├── gatsby-ssr.js └── gatsby-node.js ├── .npmignore ├── recipe.mdx ├── LICENSE ├── .gitignore ├── recipePage.js ├── package.json └── README.md /index.js: -------------------------------------------------------------------------------- 1 | // noop -------------------------------------------------------------------------------- /examples/uikits/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { presets: ['babel-preset-expo'] } 2 | -------------------------------------------------------------------------------- /examples/todos/src/utils/typography.d.ts: -------------------------------------------------------------------------------- 1 | export declare const rhythm: (a: number) => number; 2 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-gatsby-package"], 3 | "plugins": ["babel-plugin-react-native-web"] 4 | } 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "semi": false, 4 | "singleQuote": true, 5 | "tabWidth": 2 6 | } 7 | -------------------------------------------------------------------------------- /examples/todos/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | interface TodosQueryString { 2 | checked: boolean | null 3 | page: number 4 | } 5 | -------------------------------------------------------------------------------- /examples/todos/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "semi": false, 4 | "singleQuote": true, 5 | "tabWidth": 2 6 | } 7 | -------------------------------------------------------------------------------- /examples/uikits/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "semi": false, 4 | "singleQuote": true, 5 | "tabWidth": 2 6 | } 7 | -------------------------------------------------------------------------------- /examples/uikits/src/assets/retro-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slorber/gatsby-plugin-react-native-web/HEAD/examples/uikits/src/assets/retro-regular.ttf -------------------------------------------------------------------------------- /examples/todos/src/layouts/MainLayout.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'MaterialIcons'; 3 | src: url('../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf') format('truetype'); 4 | } 5 | -------------------------------------------------------------------------------- /examples/todos/graphql.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": { 3 | "request": { 4 | "url": "https://34p241l2r1.sse.codesandbox.io/", 5 | "method": "POST", 6 | "postIntrospectionQuery": true 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/todos/apollo.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | client: { 3 | name: 'Gatsby RNW Todo client', 4 | service: { 5 | name: 'Gatsby RNW Todo service', 6 | url: 'https://34p241l2r1.sse.codesandbox.io/', 7 | }, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /examples/todos/src/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import {Text} from "react-native" 3 | import MainLayout from "../layouts/MainLayout" 4 | 5 | export default () => ( 6 | 7 | 404 - Not found 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /examples/uikits/README.md: -------------------------------------------------------------------------------- 1 | Showcase how this plugin can be used alongside RNW compatible UIKits/libs like: 2 | 3 | - expo 4 | - react-native-paper 5 | - nativebase 6 | - reactnativeelements 7 | 8 | Example is published automatically [here](https://gatsby-rnw-uikits.netlify.com/) 9 | -------------------------------------------------------------------------------- /examples/uikits/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | `gatsby-plugin-react-native-web`, 4 | { 5 | resolve: 'gatsby-plugin-webpack-bundle-analyzer', 6 | options: { 7 | production: true, 8 | openAnalyzer: false, 9 | analyzerMode: 'static', 10 | }, 11 | }, 12 | ], 13 | } 14 | -------------------------------------------------------------------------------- /examples/todos/src/components/appLink.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties, ReactNode } from 'react' 2 | import { Link } from 'gatsby' 3 | 4 | const AppLink = (props: { 5 | to: string 6 | children?: ReactNode 7 | style?: CSSProperties 8 | }) => 9 | 10 | export default AppLink 11 | -------------------------------------------------------------------------------- /examples/todos/README.md: -------------------------------------------------------------------------------- 1 | # Todo list example 2 | 3 | Using Gatsby, React-Native-Web, Apollo and Typescript and displaying highlighly dynamic data (like a backoffice) 4 | 5 | The GraphQL server is hosted on a [CodeSandbox](https://codesandbox.io/s/34p241l2r1) 6 | 7 | The Gatsby site is live at [https://gatsby-rnw-todos.netlify.com/](https://gatsby-rnw-todos.netlify.com/) 8 | -------------------------------------------------------------------------------- /src/gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native' 2 | 3 | function replaceHydrateFunction() { 4 | return (element, rootTag, callback) => { 5 | const RootComponent = () => element 6 | AppRegistry.registerComponent('main', () => RootComponent) 7 | AppRegistry.runApplication('main', { initialProps: {}, rootTag, callback }) 8 | } 9 | } 10 | 11 | exports.replaceHydrateFunction = replaceHydrateFunction 12 | -------------------------------------------------------------------------------- /examples/todos/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | siteName: `Using Typescript Example`, 4 | }, 5 | plugins: [ 6 | `gatsby-plugin-typescript`, 7 | `gatsby-plugin-react-native-web`, 8 | { 9 | resolve: `gatsby-plugin-typography`, 10 | options: { 11 | pathToConfigModule: `src/utils/typography.js`, 12 | omitGoogleFont: true, 13 | }, 14 | }, 15 | ], 16 | } 17 | -------------------------------------------------------------------------------- /examples/uikits/src/components/expo/ExpoCameraExample.js: -------------------------------------------------------------------------------- 1 | import { Camera } from 'expo-camera' 2 | import React, { useEffect, useState } from 'react' 3 | 4 | import Example from '../example' 5 | 6 | export default function ExpoCameraExample() { 7 | return ( 8 | 9 | 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /examples/todos/src/__apollo_codegen__/TODO_STATS.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | // This file was automatically generated and should not be edited. 4 | 5 | // ==================================================== 6 | // GraphQL query operation: TODO_STATS 7 | // ==================================================== 8 | 9 | export interface TODO_STATS { 10 | allTodos: number; 11 | checkedTodos: number; 12 | uncheckedTodos: number; 13 | } 14 | -------------------------------------------------------------------------------- /examples/todos/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src/**/*"], 3 | "compilerOptions": { 4 | "target": "esnext", 5 | "module": "commonjs", 6 | "lib": ["dom", "es2017"], 7 | // "allowJs": true, 8 | // "checkJs": true, 9 | "jsx": "react", 10 | "strict": true, 11 | "esModuleInterop": true, 12 | "experimentalDecorators": true, 13 | "emitDecoratorMetadata": true, 14 | "noEmit": true, 15 | "skipLibCheck": true 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/uikits/gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | import { light as lightTheme, mapping } from '@eva-design/eva' 2 | import React from 'react' 3 | import { Provider as PaperProvider } from 'react-native-paper' 4 | import { ApplicationProvider } from 'react-native-ui-kitten' 5 | 6 | export const wrapRootElement = ({ element }) => { 7 | return ( 8 | 9 | {element} 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /examples/todos/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"], 4 | "jsRules": {}, 5 | "rules": { 6 | "interface-name": false, 7 | "member-access": [false], 8 | "jsx-no-lambda": [false], 9 | "ordered-imports": [false], 10 | "object-literal-sort-keys": [false], 11 | "no-console": [false], 12 | "no-var-requires": true, 13 | "radix": false 14 | }, 15 | "rulesDirectory": [] 16 | } 17 | -------------------------------------------------------------------------------- /examples/uikits/gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import { light as lightTheme, mapping } from '@eva-design/eva' 2 | import React from 'react' 3 | import { Provider as PaperProvider } from 'react-native-paper' 4 | import { ApplicationProvider } from 'react-native-ui-kitten' 5 | 6 | export const wrapRootElement = ({ element }) => { 7 | return ( 8 | 9 | {element} 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /examples/uikits/src/components/JSONView.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import { ScrollView, Text } from 'react-native' 3 | 4 | export default function JSONView({ json }) { 5 | return ( 6 | 7 | 14 | {JSON.stringify(json, null, 2)} 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /examples/todos/src/AppApolloClient.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react' 2 | import { ApolloProvider } from 'react-apollo' 3 | import ApolloClient from 'apollo-boost' 4 | import fetch from 'isomorphic-fetch' 5 | 6 | const AppApolloClient = new ApolloClient({ 7 | uri: 'https://34p241l2r1.sse.codesandbox.io/', 8 | fetch, 9 | }) 10 | 11 | export default AppApolloClient 12 | 13 | export const AppApolloProvider = ({ children }: { children: ReactNode }) => ( 14 | {children} 15 | ) 16 | -------------------------------------------------------------------------------- /examples/uikits/src/components/expo/ExpoConstantsExample.js: -------------------------------------------------------------------------------- 1 | import Constants from 'expo-constants' 2 | import React, { useEffect, useState } from 'react' 3 | import { Text } from 'react-native' 4 | 5 | import Example from '../example' 6 | 7 | export default function ExpoConstantsExample() { 8 | return ( 9 | 10 | 17 | {JSON.stringify(Constants, null, 2)} 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /examples/todos/src/__apollo_codegen__/globalTypes.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | // This file was automatically generated and should not be edited. 4 | 5 | //============================================================== 6 | // START Enums and Input Objects 7 | //============================================================== 8 | 9 | export interface Pagination { 10 | skip: number; 11 | limit: number; 12 | } 13 | 14 | export interface TodosFilter { 15 | checked?: boolean | null; 16 | } 17 | 18 | //============================================================== 19 | // END Enums and Input Objects 20 | //============================================================== 21 | -------------------------------------------------------------------------------- /examples/todos/src/__apollo_codegen__/UPDATE_TODO.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | // This file was automatically generated and should not be edited. 4 | 5 | // ==================================================== 6 | // GraphQL mutation operation: UPDATE_TODO 7 | // ==================================================== 8 | 9 | export interface UPDATE_TODO_updateTodo { 10 | __typename: "Todo"; 11 | id: string; 12 | text: string; 13 | checked: boolean; 14 | } 15 | 16 | export interface UPDATE_TODO { 17 | updateTodo: UPDATE_TODO_updateTodo; 18 | } 19 | 20 | export interface UPDATE_TODOVariables { 21 | id: string; 22 | text: string; 23 | checked: boolean; 24 | } 25 | -------------------------------------------------------------------------------- /src/gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { renderToString } from 'react-dom/server' 3 | import { AppRegistry } from 'react-native' 4 | 5 | function replaceRenderer({ 6 | bodyComponent, 7 | replaceBodyHTMLString, 8 | setHeadComponents, 9 | }) { 10 | const RootComponent = () => bodyComponent 11 | 12 | AppRegistry.registerComponent('main', () => RootComponent) 13 | const { element, getStyleElement } = AppRegistry.getApplication('main') 14 | 15 | const markup = renderToString(element) 16 | const styleElement = getStyleElement() 17 | 18 | replaceBodyHTMLString(markup) 19 | setHeadComponents([styleElement]) 20 | } 21 | 22 | exports.replaceRenderer = replaceRenderer 23 | -------------------------------------------------------------------------------- /examples/uikits/src/components/layout.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'MaterialIcons'; 3 | src: url('../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf') 4 | format('truetype'); 5 | } 6 | @font-face { 7 | font-family: 'Material Icons'; 8 | src: url('../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf') 9 | format('truetype'); 10 | } 11 | 12 | @font-face { 13 | font-family: 'FontAwesome'; 14 | src: url('../../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf') 15 | format('truetype'); 16 | } 17 | 18 | @font-face { 19 | font-family: 'Ionicons'; 20 | src: url('../../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf') 21 | format('truetype'); 22 | } 23 | 24 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | *.un~ 29 | yarn.lock 30 | src 31 | flow-typed 32 | coverage 33 | decls 34 | examples 35 | .github/ -------------------------------------------------------------------------------- /examples/todos/src/__apollo_codegen__/GET_TODOS.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | // This file was automatically generated and should not be edited. 4 | 5 | import { TodosFilter, Pagination } from "./globalTypes"; 6 | 7 | // ==================================================== 8 | // GraphQL query operation: GET_TODOS 9 | // ==================================================== 10 | 11 | export interface GET_TODOS_todos { 12 | __typename: "Todo"; 13 | id: string; 14 | text: string; 15 | checked: boolean; 16 | } 17 | 18 | export interface GET_TODOS { 19 | todos: GET_TODOS_todos[]; 20 | todosCount: number; 21 | } 22 | 23 | export interface GET_TODOSVariables { 24 | filter: TodosFilter; 25 | pagination: Pagination; 26 | } 27 | -------------------------------------------------------------------------------- /examples/uikits/src/components/example.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './layout.css' 3 | import { Text, View } from 'react-native' 4 | 5 | const Example = ({ title, children, style, row = false }) => ( 6 | 16 | {title} 17 | 27 | {children} 28 | 29 | 30 | ) 31 | 32 | export default Example 33 | -------------------------------------------------------------------------------- /recipe.mdx: -------------------------------------------------------------------------------- 1 | # Setup Gatsby with React-Native-Web / Expo 2 | 3 | --- 4 | 5 | Install npm packages 6 | 7 | `expo-av` is optional, just for the example page 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | --- 16 | 17 | Install the plugin in gatsby-config.js 18 | 19 | 20 | 21 | --- 22 | 23 | Add a test page 24 | 25 | It will be available at http://localhost:8000/react-native-web 26 | 27 | 31 | -------------------------------------------------------------------------------- /examples/uikits/src/pages/kittens.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Button } from 'react-native-ui-kitten' 3 | import KittensSelectExample from '../components/kittens/KittensSelectExample' 4 | import KittensDatepickerExample from '../components/kittens/KittensDatepickerExample' 5 | import Example from '../components/example' 6 | import Layout from '../components/layout' 7 | 8 | const ButtonExample = () => ( 9 | 10 | 11 | 14 | 15 | ) 16 | 17 | const kittens = () => ( 18 | 19 | 20 | 21 | 22 | 23 | ) 24 | 25 | export default kittens 26 | -------------------------------------------------------------------------------- /examples/uikits/src/components/expo/ExpoLocationExample.js: -------------------------------------------------------------------------------- 1 | import * as Location from 'expo-location' 2 | import React, { useEffect, useState } from 'react' 3 | import { Button } from 'react-native' 4 | 5 | import Example from '../example' 6 | import JSONView from '../JSONView' 7 | 8 | export default function ExpoLocationExample() { 9 | const [item, setItem] = useState(null) 10 | 11 | return ( 12 | 13 | 29 | 30 | ) 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/uikits/src/components/expo/ExpoFontExample.js: -------------------------------------------------------------------------------- 1 | import * as Font from 'expo-font' 2 | import React, { useEffect, useState } from 'react' 3 | import { Text } from 'react-native' 4 | 5 | import Example from '../example' 6 | 7 | function ExpoFontExample() { 8 | const [loaded, setLoaded] = useState(false) 9 | 10 | async function loadFontAsync() { 11 | await Font.loadAsync({ 12 | 'retro-regular': require('../../assets/retro-regular.ttf'), 13 | }) 14 | setLoaded(true) 15 | } 16 | 17 | useEffect(() => { 18 | loadFontAsync() 19 | }, []) 20 | 21 | return ( 22 | 23 | {loaded && ( 24 | 32 | Cool new font 33 | 34 | )} 35 | 36 | ) 37 | } 38 | 39 | export default ExpoFontExample 40 | -------------------------------------------------------------------------------- /examples/todos/gatsby-node.js: -------------------------------------------------------------------------------- 1 | 2 | // See https://callstack.github.io/react-native-paper/using-on-the-web.html 3 | exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => { 4 | const config = getConfig() 5 | config.module.rules.push({ 6 | test: /\.js$/, 7 | include: /node_modules/, 8 | exclude: /node_modules[/\\](?!react-native-paper|react-native-vector-icons|react-native-safe-area-view)/, 9 | use: { 10 | loader: 'babel-loader', 11 | options: { 12 | // Disable reading babel configuration 13 | babelrc: false, 14 | configFile: false, 15 | 16 | // The configration for compilation 17 | presets: [ 18 | ['@babel/preset-env', { useBuiltIns: 'usage' }], 19 | '@babel/preset-react', 20 | '@babel/preset-flow', 21 | ], 22 | plugins: [ 23 | '@babel/plugin-proposal-class-properties', 24 | '@babel/plugin-proposal-object-rest-spread', 25 | ], 26 | }, 27 | }, 28 | }) 29 | actions.replaceWebpackConfig(config) 30 | } 31 | -------------------------------------------------------------------------------- /examples/uikits/src/pages/expo.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | 3 | import ExpoBlurExample from '../components/expo/ExpoBlurExample' 4 | import ExpoBatteryExample from '../components/expo/ExpoBatteryExample' 5 | import ExpoGesturesExample from '../components/expo/ExpoGesturesExample' 6 | import ExpoCameraExample from '../components/expo/ExpoCameraExample' 7 | import ExpoConstantsExample from '../components/expo/ExpoConstantsExample' 8 | import ExpoFontExample from '../components/expo/ExpoFontExample' 9 | import ExpoLocationExample from '../components/expo/ExpoLocationExample' 10 | import ExpoPermissionsExample from '../components/expo/ExpoPermissionsExample' 11 | import Layout from '../components/layout' 12 | 13 | export default () => ( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ) 25 | -------------------------------------------------------------------------------- /examples/uikits/src/components/expo/ExpoBlurExample.js: -------------------------------------------------------------------------------- 1 | import { BlurView } from 'expo-blur' 2 | import React, { useEffect, useState } from 'react' 3 | import { Image, StyleSheet, Text } from 'react-native' 4 | 5 | import Example from '../example' 6 | 7 | const IMAGE = { uri: 'https://i.ytimg.com/vi/y588qNiCZZo/maxresdefault.jpg' } 8 | 9 | export default function ExpoBlurExample() { 10 | return ( 11 | 12 | 13 | 14 | Blur View 15 | 16 | 17 | ) 18 | } 19 | 20 | const styles = StyleSheet.create({ 21 | image: { 22 | flex: 1, 23 | height: 300, 24 | }, 25 | blur: { 26 | position: 'absolute', 27 | top: '50%', 28 | left: 0, 29 | bottom: 0, 30 | right: 0, 31 | padding: 15, 32 | alignItems: 'center', 33 | justifyContent: 'center', 34 | borderRadius: 5, 35 | }, 36 | text: { 37 | backgroundColor: 'transparent', 38 | fontSize: 15, 39 | color: '#fff', 40 | }, 41 | }) 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Sébastien Lorber 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | .idea 61 | 62 | /gatsby-browser.js 63 | /gatsby-ssr.js 64 | /gatsby-node.js 65 | 66 | *.iml -------------------------------------------------------------------------------- /examples/uikits/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | report.html 72 | 73 | # Expo 74 | /.expo -------------------------------------------------------------------------------- /examples/uikits/src/pages/nativebase.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | 3 | import Layout from '../components/layout' 4 | import Example from '../components/example' 5 | import { Text } from 'react-native' 6 | 7 | /* 8 | const ButtonExample = () => ( 9 | 10 | 29 | 32 | 35 | 36 | 37 | ) 38 | } 39 | */ 40 | 41 | const Nativebase = () => ( 42 | 43 | Help me make this work please! 44 | 45 | ) 46 | 47 | export default Nativebase 48 | -------------------------------------------------------------------------------- /recipePage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'gatsby-link' 3 | import { StyleSheet, TouchableOpacity, Text, View } from 'react-native' 4 | import { Video } from 'expo-av' 5 | 6 | const styles = StyleSheet.create({ 7 | box: { padding: 10, margin: 10, borderWidth: 1, borderColor: 'black' }, 8 | text: { fontWeight: 'bold', color: 'red' }, 9 | button: { 10 | marginVertical: 40, 11 | paddingVertical: 20, 12 | paddingHorizontal: 10, 13 | borderWidth: 1, 14 | borderColor: 'black', 15 | backgroundColor: 'lightgrey', 16 | alignItems: 'center', 17 | }, 18 | buttonText: { fontWeight: 'bold', color: 'black' }, 19 | }) 20 | 21 | const RNWPage = () => ( 22 | 23 | 24 | Hi this is React-Native-Web rendered by Gatsby 25 | 26 | alert('it works')}> 27 | Button 28 | 29 | Go to home 30 | 42 | ) 43 | 44 | export default RNWPage 45 | -------------------------------------------------------------------------------- /examples/uikits/src/components/externalLink.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react' 2 | import './layout.css' 3 | import { Text, StyleSheet, Platform, Linking } from 'react-native' 4 | import { useHover, useFocus, useActive } from 'react-native-web-hooks' 5 | 6 | function ExternalLink({ target = '_blank', href, ...props }) { 7 | const ref = useRef(null) 8 | 9 | const { isHovered } = useHover(ref) 10 | const { isFocused } = useFocus(ref) 11 | const { isActive } = useActive(ref) 12 | return ( 13 | Linking.openURL(href)} 18 | accessibilityRole="link" 19 | href={href} 20 | target={target} 21 | style={[ 22 | styles.text, 23 | isHovered && styles.hover, 24 | isFocused && styles.focused, 25 | isActive && styles.active, 26 | ]} 27 | {...props} 28 | /> 29 | ) 30 | } 31 | 32 | const styles = StyleSheet.create({ 33 | text: { 34 | fontWeight: 'bold', 35 | borderBottomWidth: 1, 36 | borderBottomColor: 'transparent', 37 | ...Platform.select({ 38 | web: { 39 | cursor: 'pointer', 40 | outlineStyle: 'none', 41 | transitionDuration: '200ms', 42 | }, 43 | default: {}, 44 | }), 45 | }, 46 | active: { 47 | color: 'blue', 48 | borderBottomColor: 'blue', 49 | opacity: 1.0, 50 | }, 51 | hover: { 52 | opacity: 0.6, 53 | }, 54 | focused: { 55 | borderBottomColor: 'black', 56 | }, 57 | }) 58 | 59 | export default ExternalLink 60 | -------------------------------------------------------------------------------- /examples/uikits/src/components/kittens/KittensSelectExample.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StyleSheet } from 'react-native' 3 | import { Layout, Select } from 'react-native-ui-kitten' 4 | 5 | import Example from '../example' 6 | 7 | export default function KittensSelectExample() { 8 | return ( 9 | 10 | 11 | 12 | ) 13 | } 14 | 15 | export class SelectInlineStylingShowcase extends React.Component { 16 | data = [ 17 | { text: 'Option 1' }, 18 | { text: 'Option 2', textStyle: styles.option2 }, 19 | { text: 'Option 3' }, 20 | ] 21 | 22 | state = { 23 | selectedOption: null, 24 | } 25 | 26 | onSelect = selectedOption => { 27 | this.setState({ selectedOption }) 28 | } 29 | 30 | render() { 31 | return ( 32 | 33 |