react-native-electron v0.19.0
React Native Electron
Electron extensions to React Native for Web
Introduction
This project aims to provide extensions to React Native for Web targeted to the Electron environment to support additional modules exposed by React Native (Alert
) or alternative implementations (Linking
) using Electron APIs.
Installation
npm install react-native-electron
electron
, react
and react-native-web
are required peer dependencies, make sure to install them as well:
npm install electron react react-native-web
react-art
is also needed if you use ART
.
Electron setup
In order for the APIs exposed by react-native-electron
to be accessible in Electron's render process, the following setup must be applied:
- The
react-native-electron/main
module must be imported in the main process BrowserWindow
instances must be created with thepreload
script fromreact-native-electron/preload
, for example:
webPreferences: {
preload: require('path').resolve(
require.resolve('react-native-electron/preload'),
),
},
Example
See the example
directory for the source code and Webpack config.
To run the demo app, fork this repository and run the following commands in the root folder:
yarn install
yarn build
Then in the example
folder:
yarn install
yarn start
Usage with Expo application
This module can be used with Expo application (created by expo-cli
) using the following steps:
- Follow this guide's setup
- Run
yarn expo-electron customize
in order to eject expo-electron's webpack configuration - Edit
./electron/webpack.config.js
as follows:
const { withExpoWebpack } = require('@expo/electron-adapter')
module.exports = (config) => {
const expoConfig = withExpoWebpack(config)
expoConfig.resolve.alias['react-native$'] = 'react-native-electron'
return expoConfig
}
Note this is a partial solution, as Expo's default webpack configuration includes more aliases to react-native
, but it should cover all of react-native-electron
's APIs.
APIs
Alert
React Native's Alert implementation using Electron's dialog
Alert.alert(
title: string,
message: ?string,
buttons: ?Array<{text: string, onPress?: () => void}> = [],
type: ?('none' | 'info' | 'error' | 'question' | 'warning') = 'none'
): void
Linking
React Native's Linking implementation using Electron's app and shell APIs.
Linking.openURL(url: string): Promise<void>
Linking.addEventListener(type: string, handler: Function): void
Linking.removeEventListener(type: string, handler: Function): void
Linking.canOpenURL(): Promise<true>
: always resolves to true
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
Platform
Platform.isElectron: boolean
Platform.OS: string
Platform.nativeOS: string
Platform.select(
win32?: any,
linux?: any,
darwin?: any,
electron?: any,
web?: any,
default?: any
): any
License
MIT
See LICENSE file.
1 year ago
2 years ago
2 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago