v0.13.0

PaulLeCam · Apr 4, 2020 · dc989a8 · dc989a8
1 parent c51afe2
commit dc989a8
Show file tree

Hide file tree

Showing 17 changed files with 2,538 additions and 1,236 deletions.
diff --git a/.babelrc b/.babelrc
@@ -22,7 +22,7 @@
           "@babel/preset-env",
           {
             "targets": {
-              "electron": "7.0"
+              "electron": "8.0"
             },
             "modules": "commonjs",
             "loose": true
@@ -36,7 +36,7 @@
           "@babel/preset-env",
           {
             "targets": {
-              "electron": "7.0"
+              "electron": "8.0"
             },
             "modules": false,
             "loose": true

diff --git a/.eslintrc.json b/.eslintrc.json
@@ -12,7 +12,7 @@
   ],
   "parser": "babel-eslint",
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2020,
     "jsx": true,
     "sourceType": "module"
   },
@@ -31,8 +31,8 @@
   },
   "settings": {
     "react": {
-      "version": "16.12",
-      "flowVersion": "0.117"
+      "version": "16.13",
+      "flowVersion": "0.122"
     }
   }
 }
diff --git a/.travis.yml b/.travis.yml
@@ -2,6 +2,7 @@ sudo: false
 language: node_js
 node_js:
   - 12
+  - 13
 cache:
   yarn: true
   directories:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## v0.13.0 (2020-04-04)
+
+- Updated Electron dependency to v8.0.
+- Added `Appearance` API and `useColorScheme` hook introduced in React Native v0.62.
+
 ## v0.12.0 (2020-01-30)
 
 - Updated React Native for Web dependency to v0.12.

diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
 # React Native Electron [![Build Status](https://img.shields.io/travis/PaulLeCam/react-native-electron/master.svg)](https://travis-ci.org/PaulLeCam/react-native-electron) [![npm version](https://img.shields.io/npm/v/react-native-electron.svg)](https://www.npmjs.com/package/react-native-electron)
 
-[Electron](http://electron.atom.io/) extensions to [React Native for Web](https://github.com/necolas/react-native-web)
+[Electron](https://www.electronjs.org) extensions to [React Native for Web](https://github.com/necolas/react-native-web)
 
 ## Introduction
 
-This project aims to provide extensions to [React Native for Web](https://github.com/necolas/react-native-web) targeted to the [Electron](http://electron.atom.io/) environment to support additional modules exposed by React Native (ex Clipboard, WebView) using Electron APIs.
+This project aims to provide extensions to [React Native for Web](https://github.com/necolas/react-native-web) targeted to the [Electron](https://www.electronjs.org) environment to support additional modules exposed by React Native (ex Clipboard, WebView) using Electron APIs.
 
 This is very early stage, not fully tested, and APIs will likely change between releases, so don't use this library if you need something stable.
 
@@ -32,13 +32,11 @@ To run the demo app, fork this repository and run:
 - `npm run example:server`
 - In another terminal instance, `npm run example:electron`
 
-For a more advanced example, see the [GH Viewer client](https://github.com/gh-viewer/client) using this library among others of the React ecosystem.
-
 ## APIs
 
 ### Alert
 
-[React Native's Alert](https://facebook.github.io/react-native/docs/alert.html) implementation using [Electron's dialog](http://electron.atom.io/docs/api/dialog/)
+[React Native's Alert](https://reactnative.dev/docs/alert.html) implementation using [Electron's dialog](https://www.electronjs.org/docs/api/dialog/)
 
 ```
 Alert.alert(
@@ -49,17 +47,25 @@ Alert.alert(
 ): void
 ```
 
+### Appearance
+
+[React Native's Appearance](https://reactnative.dev/docs/appearance.html) implementation using [Electron's nativeTheme](https://www.electronjs.org/docs/api/native-theme/)
+
+```
+Appearance.getColorScheme(): 'light' | 'dark' | null
+```
+
 ### Clipboard
 
-[React Native's Clipboard](https://facebook.github.io/react-native/docs/clipboard.html) implementation using [Electron's clipboard](http://electron.atom.io/docs/api/clipboard/).
+[React Native's Clipboard](https://reactnative.dev/docs/clipboard.html) implementation using [Electron's clipboard](https://www.electronjs.org/docs/api/clipboard/).
 
 `Clipboard.getString(type: ?string): Promise<?string>`
 
 `Clipboard.setString(text: string, type: ?string): void`
 
 ### Linking
 
-[React Native's Linking](https://facebook.github.io/react-native/docs/linking.html) implementation using Electron's [app](http://electron.atom.io/docs/api/app/) and [shell](http://electron.atom.io/docs/api/shell/) APIs.
+[React Native's Linking](https://reactnative.dev/docs/linking.html) implementation using Electron's [app](https://www.electronjs.org/docs/api/app/) and [shell](https://www.electronjs.org/docs/api/shell/) APIs.
 
 `Linking.openURL(url: string): Promise<void>`
 
@@ -71,6 +77,10 @@ Alert.alert(
 
 `Linking.getInitialURL(): Promise<?string>`: resolves with the `process.argv[1]` value, expecting the app to be opened by a command such as `myapp myapp://test`
 
+## Hooks
+
+`useColorScheme(): 'light' | 'dark' | null`
+
 ## License
 
 MIT  

diff --git a/example/app/App.js b/example/app/App.js
@@ -10,11 +10,11 @@ import {
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
+  useColorScheme,
 } from 'react-native'
 
 const WEBSITES = {
-  'React Native':
-    'https://facebook.github.io/react-native/docs/getting-started.html',
+  'React Native': 'https://reactnative.dev/docs/getting-started',
   'React Native for Web':
     'https://github.com/necolas/react-native-web/blob/master/README.md',
   Electron: 'https://electronjs.org/docs/',
@@ -30,6 +30,9 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
   },
+  layoutDark: {
+    backgroundColor: GREY_DARK,
+  },
   titleView: {
     padding: 20,
     paddingBottom: 0,
@@ -38,6 +41,9 @@ const styles = StyleSheet.create({
     fontSize: 32,
     textAlign: 'center',
   },
+  titleTextDark: {
+    color: GREY_LIGHT,
+  },
   subtitleView: {
     padding: 10,
     paddingBottom: 20,
@@ -46,9 +52,11 @@ const styles = StyleSheet.create({
     fontSize: 24,
     textAlign: 'center',
   },
+  subtitleTextDark: {
+    color: GREY_LIGHT,
+  },
   navBar: {
     backgroundColor: GREY_LIGHT,
-    flex: 1,
     flexDirection: 'row',
   },
   navBarTab: {
@@ -62,7 +70,6 @@ const styles = StyleSheet.create({
   },
   uriBar: {
     backgroundColor: GREY_DARK,
-    flex: 1,
     flexDirection: 'row',
   },
   uriValueView: {
@@ -99,7 +106,7 @@ const NavBar = ({
   const tabs = Object.keys(WEBSITES).map((website: WebSite) => (
     <TouchableWithoutFeedback
       key={website}
-      onPress={function() {
+      onPress={function () {
         onSelect(website)
       }}>
       <View
@@ -123,14 +130,14 @@ const UriBar = ({ uri }: { uri: string }) => (
       </Text>
     </View>
     <TouchableOpacity
-      onPress={function() {
+      onPress={function () {
         copyURI(uri)
       }}
       style={styles.uriTouchable}>
       <Text style={styles.uriText}>Copy to clipboard</Text>
     </TouchableOpacity>
     <TouchableOpacity
-      onPress={function() {
+      onPress={function () {
         openURI(uri)
       }}
       style={styles.uriTouchable}>
@@ -149,7 +156,15 @@ const SelectUriBar = () => (
   </View>
 )
 
+function schemeStyle(styleName, colorScheme) {
+  const baseStyle = styles[styleName]
+  return colorScheme === 'dark'
+    ? [baseStyle, styles[`${styleName}Dark`]]
+    : baseStyle
+}
+
 const App = () => {
+  const colorScheme = useColorScheme()
   const [website, setWebSite] = useState<?WebSite>(null)
 
   let uri
@@ -163,12 +178,14 @@ const App = () => {
 
   return (
     <StrictMode>
-      <View style={styles.layout}>
+      <View style={schemeStyle('layout', colorScheme)}>
         <View style={styles.titleView}>
-          <Text style={styles.titleText}>React Native Electron</Text>
+          <Text style={schemeStyle('titleText', colorScheme)}>
+            React Native Electron
+          </Text>
         </View>
         <View style={styles.subtitleView}>
-          <Text style={styles.subtitleText}>
+          <Text style={schemeStyle('subtitleText', colorScheme)}>
             Electron extensions to React Native for Web
           </Text>
         </View>

diff --git a/example/app/index.html b/example/app/index.html
@@ -7,6 +7,15 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
     />
+    <style>
+      html,
+      body,
+      #app {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>

diff --git a/example/app/renderer.js b/example/app/renderer.js
@@ -12,9 +12,8 @@ const renderApp = () => {
 
 renderApp()
 
-// $FlowFixMe: missing module.hot definition
 if (module && module.hot != null && typeof module.hot.accept === 'function') {
-  module.hot.accept(['./App'], () =>
+  module.hot.accept('./App', () =>
     setImmediate(() => {
       unmountComponentAtNode(root)
       renderApp()

diff --git a/flow-typed/npm/electron_vx.x.x.js b/flow-typed/npm/electron_vx.x.x.js
@@ -1,5 +1,5 @@
-// flow-typed signature: 6ecd794f7595b02a7ac8817c63b4cd59
-// flow-typed version: <<STUB>>/electron_v^6.0.0/flow_v0.117.0
+// flow-typed signature: 261636e5cb1f537cbd49a347f861be3d
+// flow-typed version: <<STUB>>/electron_v^8.0.0/flow_v0.122.0
 
 /**
  * This is an autogenerated libdef stub for: