Using create-react-app with redux, and having both extension installed in chrome, I'm able to debug my app with these two.
However, after building my app npm run build the two extensions are not working.
Loading the redux devtools is with:
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
...
const store = createStore(
combineReducers(...reducers),
preloadedState,
composeEnhancers(applyMiddleware(...middlewares)),
);
Related
A clean-slate creation of an Expo-based React-Native app (npx create-expo-app my-app) and then installing react-native-elements runs fine on IOS, but generates the error below for running on the web. I also tried using the template provided by react-native-elements but wind-up with the same result.
Module parse failed: Unexpected token (7:58)
You may need an appropriate loader to handle this file type, currently no loaders are
configured to process this file. See https://webpack.js.org/concepts#loaders
| import { defaultSpacing } from './theme';
| import { lightColors } from './colors';
> const isClassComponent = (Component) =>
Boolean(Component?.prototype?.isReactComponent);
| const combineByStyles = (propName = '') => {
| if (propName.endsWith('Style') || propName.endsWith('style')) {
at ./node_modules/#rneui/themed/dist/config/withTheme.js```
I am running React Native Storybook which runs Storybook in the Native emulator.
In addition to the how React Native Storybook works currently, I would also like to build an instance of it for web as a reference companion to our app.
I am using "#storybook/react-native": "5.3.14". My stories are located at ./storybook.
Install react-native-web, #storybook/react and babel-plugin-react-native-web from npm in your project root.
Add a new configuration directory for Storybook, say ./.storybook-website. Inside this directory, add main.js. This creation would otherwise be done by the Storybook installation wizard.
my-app
├── .storybook-website
│ └── main.js
└── // .... rest of your app
Add the following content to main.js:
module.exports = {
stories: ['../storybook/stories/index.js'],
webpackFinal: async (config) => {
config.resolve.alias = {
...(config.resolve.alias || {}),
// Transform all direct `react-native` imports to `react-native-web`
'react-native$': 'react-native-web',
// make sure we're rendering output using **web** Storybook not react-native
'#storybook/react-native': '#storybook/react',
// plugin-level react-native-web extensions
'react-native-svg': 'react-native-svg/lib/commonjs/ReactNativeSVG.web',
// ...
};
// mutate babel-loader
config.module.rules[0].use[0].options.plugins.push(['react-native-web', { commonjs: true }]);
// console.dir(config, { depth: null });
return config;
},
};
Update the stories path in main.js to the location of your existing root story.
Finally add run scripts to your package.json:
"storybook:web": "start-storybook -p 6006 --config-dir ./.storybook-website",
"storybook-build:web": "build-storybook --config-dir ./.storybook-website --output-dir dist-storybook-website --quiet"
Presto! Run using yarn storybook:web. This will run storybook dev server, opening a browser showing what you usually would see in the device emulator.
I am trying to install Jitsi-Meet plugin in my react-native project. I am trying to create a video/audio conference meetup feature in a website and I want to use react-native for the same purpose.
this is the plugin link.react-native-jitsi-meet - npmjs.org
The plugin gets successfully installed in the package.json
But when I am trying to import in my App.tsx file, it shows me module not found
How can I import the plugin successfully?
Thanks in advance.
1- Something is Missings
There is missing index.js file which is mendatory for npm packge. you can see in screenshot
-
2- You need to perform these steps to resolve this package
Step 1:
make index.js file at node_modules/react-native-jitsi-meet/index.js
Step 2:
and this add code in that index.js file
import { NativeModules, requireNativeComponent } from 'react-native';
export const JitsiMeetView = requireNativeComponent('RNJitsiMeetView');
export const JitsiMeetModule = NativeModules.RNJitsiMeetView;
const call = JitsiMeetModule.call;
const audioCall = JitsiMeetModule.audioCall;
JitsiMeetModule.call = (url, userInfo) => {
userInfo = userInfo || {};
call(url, userInfo);
}
JitsiMeetModule.audioCall = (url, userInfo) => {
userInfo = userInfo || {};
audioCall(url, userInfo);
}
export default JitsiMeetModule;
after these steps everything will be working
Node: you should automate these steps when we install any package by npm or yarn
we can use patch-package to automate these steps
I'm trying to migrate my app on 0.60, but it keeps getting stuck on jetify process.
Basically, after this line:
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
It's just stuck and does nothing. And I need jetifier for react-native-firebase and some other native libraries. Any suggestions?
Update
It seems the problem is in symlinks. I'm using Lerna.
There is also one more situation when the npx react-native run-android stucks at jetifying state
If you run npm run android it'll start the metro server as well,
However, to re-run npm run android, you need to close the metro command window and allow npm run android to start a new metro server
In the end what I did was rewriting a jetify specifying which modules I need to jetify.
My jetify index.js:
const {fork} = require('child_process');
const {join} = require('path');
const {getClassesMapping, readDir, chunk} = require('./src/utils');
const cpus = require('os').cpus().length;
const arg = process.argv.slice(2)[0];
const mode = arg && (arg === 'reverse' || arg === '-r') ? 'reverse' : 'forward';
const SEARCH_DIRS = [
........modules here
];
const classesMapping = getClassesMapping();
for (const SEARCH_DIR of SEARCH_DIRS) {
const files = readDir(SEARCH_DIR);
console.log(
`Jetifier found ${
files.length
} file(s) to ${mode}-jetify. Using ${cpus} workers...`,
);
for (const filesChunk of chunk(files, cpus)) {
const worker = fork(join(__dirname, 'src', 'worker.js'));
worker.send({filesChunk, classesMapping, mode});
}
}
And postinstall in package.json:
"postinstall": "cp ./jetify.js ./node_modules/jetifier/index.js"
I am try to integrate firebase to react-native
I tried this
npm install firebase --save
React Native manages dependencies through npm. To install Firebase, run the following command .
npm install firebase --save.
if its not working then deleted node_modules . then install npm .then run npm install firebase --save.
add the following line to the top:
import * as firebase from 'firebase';
Then right above the component, initialize Firebase with your config values:
// Initialize Firebase
const firebaseConfig = {
apiKey: "<your-api-key>",
authDomain: "<your-auth-domain>",
databaseURL: "<your-database-url>",
storageBucket: "<your-storage-bucket>",,
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
get more information from HERE