React-native-web: Add react-native-web on existing app using react-native-screens and @react-native-firebase/app

[RimApp]

Hello,

I am trying to use react-native-web on my existing project.

First of all, I have this error :
"Failed to compile.
./node_modules/@react-navigation/bottom-tabs/lib/module/views/ResourceSavingScene.js
Attempted import error: 'shouldUseActivityState' is not exported from 'react-native-screens'."
So I fixed this by followng this :
https://github.com/react-navigation/react-navigation/issues/8993#issuecomment-717233195

But now I have this issue :
Failed to compile.
./node_modules/@react-native-firebase/app/lib/common/Base64.js
Module not found: Can't resolve 'react-native/Libraries/Utilities/binaryToBase64' in 'C:MyProjectPath\node_modules\@react-native-firebase\app\lib\common'

When I open the the Base64.js and replace manually this line
import binaryToBase64 from 'react-native/Libraries/Utilities/binaryToBase64';
by
import binaryToBase64 from '../../../../react-native/Libraries/Utilities/binaryToBase64';

I got another error this time on this file (same issue that above):
Failed to compile.
./node_modules/@react-native-firebase/app/lib/internal/SharedEventEmitter.js
Module not found: Can't resolve 'react-native/Libraries/vendor/emitter/EventEmitter' in 'C:\Userssami.rimani\AgendaClient\node_modules\@react-native-firebase\app\lib\internal'

I cannot manually modify the external libraries because it will hide the real problem and it is just not maintainable. Do you have a solution please?

[necolas]

That module is reaching into unstable React Native internals. You can use a local patch for the library you're using, but ultimately the library itself is not multi-platform.

[RimApp]

That module is reaching into unstable React Native internals. You can use a local patch for the library you're using, but ultimately the library itself is not multi-platform.

react-native-screens or firebase library cannot be used with react-native-web ? Or both ?

[piccinnigius]

@RimApp any fix?

[RimApp]

@RimApp any fix?
No :(. I am still searching for a solution

[dalcib]

react-native-screens has some support for web: react-native-screens#461

react-native-firebase does not work on the web. Use Firebase Web SDK instead.
https://www.freecodecamp.org/news/react-native-firebase-tutorial/

[RimApp]

After a few days, I finally fixed all my issues, I get a result on the web (no more blank page/errors) even if I still have work to do to make it really look like something.

In summary :

1- Issue with “react-native-screens” :

"Failed to compile.
./node_modules/@react-navigation/bottom-tabs/lib/module/views/ResourceSavingScene.js
Attempted import error: 'shouldUseActivityState' is not exported from 'react-native-screens'."
Solution:
https://github.com/react-navigation/react-navigation/issues/8993#issuecomment-717233195

2- Issue with “@react-native-firebase/app” :

Failed to compile.
./node_modules/@react-native-firebase/app/lib/common/Base64.js
Module not found: Can't resolve 'react-native/Libraries/Utilities/binaryToBase64' in 'C:MyProjectPath\node_modules@react-native-firebase\app\lib\common'
Solution:
Like @dalcib says:
Use this package: npm install --save firebase (Instead of: npm install --save @react-native-firebase/app)

3- Issue with “react-native-i18n” :

Cause: https://stackoverflow.com/questions/33264431/react-native-dev-and-prod-variables?answertab=votes#tab-top
Solution: In the config file “config-overrides.js”
Define the __DEV__ variable:
```config.plugins = (config.plugins || []).concat([
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
__DEV__: process.env.NODE_ENV !== 'production',
}),
]);

My final “config-overrides.js” looks like:
```const webpack = require('webpack');
module.exports = function override(config) {
  config.module.rules.push({
    test: /\.(js?)$/,
    use: {
      loader: 'babel-loader',
    },
  });
  config.plugins = (config.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      __DEV__: process.env.NODE_ENV !== 'production',
    }),
  ]);
  return config;
};

If you prefer you can use this package to define __DEV__ variable:
https://github.com/lwd-technology/react-app-rewire-define-plugin

[hungvu193]

Hi @RimApp, thank you so much for your useful information.
About react-native-firebase issue, if we use firebase js sdk, how can we use push notification and analytics?
Can we use firebase js for web only and react-native-firebase for mobile?

[RimApp]

Hi @RimApp, thank you so much for your useful information.
About react-native-firebase issue, if we use firebase js sdk, how can we use push notification and analytics?
Can we use firebase js for web only and react-native-firebase for mobile?

Hi @hungvu193 ,
I'm using firebase js sdk (npm install --save firebase) only and I also use firebase analytics and its works perfectly for my all platforms (iOS, Android and Web).
I haven't tried push notification but I think you can use it with no problem.

For your last question, I didn't try this solution because working only with firebase js sdk works for me.
Of course, I configured each platform (add the google-services.json file, add a line of code for each platform (Android and iOS folder), configure firebase (apiKey, authDomain etc ...) before to use the firebase object.

If you have any other questions, let me know ;)

[hungvu193]

Thank you so much @RimApp, I will give it a try and let you know.

[hungvu193]

I created 2 files:
analytics.js for using react-native-firebase and
analytics.web.js for using firebasejs and it worked.