https://github.com/yottahmd/react-native-web-navigation-example
React Navigation over React Native for Web Example
https://github.com/yottahmd/react-native-web-navigation-example
Last synced: 3 months ago
JSON representation
React Navigation over React Native for Web Example
- Host: GitHub
- URL: https://github.com/yottahmd/react-native-web-navigation-example
- Owner: yohamta
- License: mit
- Created: 2018-07-13T09:26:53.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-08T02:01:19.000Z (over 6 years ago)
- Last Synced: 2024-05-01T21:40:13.768Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 119 KB
- Stars: 11
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
## Example of React Native for Web App using React Navigation
This is an example application how to use React Navigation with React Native for Web. It's super simple so that it would be useful for boiler plate.
## How to run
```sh
$ git clone https://github.com/hayo0914/react-native-web-react-navigation-example
$ yarn install
$ yarn start
```
## How it looks
## Key points to use React Navigation with React Native for Web
- webpack settings
```js
// webpack settings for react-native-web and react-navigation
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
'__DEV__': false,
}),
],
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, './src'),
path.resolve(__dirname, './node_modules/react-navigation'),
path.resolve(__dirname, './node_modules/react-art'),
path.resolve(__dirname, './node_modules/react-native-tab-view'),
path.resolve(__dirname, './node_modules/react-native-paper'),
path.resolve(__dirname, './node_modules/react-native-vector-icons'),
path.resolve(__dirname, './node_modules/react-native-safe-area-view'),
path.resolve(__dirname, './node_modules/@expo/samples'),
path.resolve(__dirname, './node_modules/@expo/vector-icons'),
path.resolve(
__dirname,
'./node_modules/react-native-platform-touchable'
),
],
use: {
loader: 'babel-loader',
options: {
plugins: ['react-native-web'],
presets: ['react-native'],
},
},
},
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'file-loader',
}
}
],
},
};
```
- add dependency for react-art
```sh
$ yarn add react-art
```
## License
MIT License.