React Native version:
0.64.0
Steps To Reproduce
[Repo-code]https://github.com/rsoni5519/lerna-react-native
Please use above link and follow the steps described in README.
Expected Results
The App should work when we are clicking on Track buttons. it should console values for respective button events.
userAgent and screenSize should work for DeviceInfo and Dimensions.
Module_JsTimer_Issue
steps to reproduce
Error occurred because of cyclic dependency of react-native pakcage.
Use this repository for solution [a link] (https://github.com/vishalkhoje/cyclicImportReactNative)!
Here problem is install react-native-device-info package as
dependency into your root project not in your custom package.
In your custom package use react-native-device-info adn react-native as a peer dependancy.
Ex. This is in your custom package.json file, important is version of package is same as root project package.json file.
"peerDependencies": {
"react-native": "^0.64.1",
"#types/react-native": "^0.64.5",
"react-native-device-info": "^8.1.2"
}
This will solve your problem.
![Output screenshot:]
Related
I am trying to include tests in my App created with Expo, but I am facing errors with AsyncStorage module
Could not find module '#react-native-async-storage/async-storage' from 'src/pages/Welcome.tsx'
I tested some configurations of the jest/expo to avoid this error, as downgrade the jest to version 26 as suggested in a GitHub issue of the project, using a mock directory as suggested here and in the official documentation here, and using jest setup file. Details below.
When I try with mock directory nothing changes in the error. The execution ignores the mock directory. When using the jest setup file the only change in the error message is that the message point to the jest setup file instead of the welcome.tsx.
The page tested is the "Welcome.tsx" that import the AsyncStorage
The test has nothing, only a a console log (code below) and don't use the AsyncStorage
The test code
const {getAllByTestId} = renderer.create(<Welcome />);
console.log(getAllByTestId);
The Welcome.tsx
...
<Image source=... testID="WelcomeImage" />
...
package.json
...
"scripts": { ... "test": "jest" ...},
"jest:" {
"preset": "jest-expo",
"globals": { "DEV": true
}
...
Installed versions
React: 17.0.1
React native: 0.64.3
React native testing library: 6.0.0
React test renderer: 17
Jest: 27.4.5
Follow the directions at - https://react-native-async-storage.github.io/async-storage/docs/advanced/jest/
Here is what I did:
Setup jestSetupFile.js as mentioned.
Setup mocks/#react-native-async-storage directory as mentioned
(I know it mentions to use either of two but I did both)
Cleared npm cache, deleted node-modules folder, deleted package-lock.json and did npm i again.(The usual steps to a clean start)
And it works now. Although I get error for enzyme but that is not within the scope of this question.
Image
Build is successfull, but this happens every time.
PropTypes are no longer in core React Native components, like Animation. So, you have to update your dependencies, like react-native-material-dropdown and its dependencies.
I have begun this process, but have only published to my forks on github. You could modify your package.json file to something like this:
"dependencies": {
...
"react-native-material-dropdown": "https://github.com/boorad/react-native-material-dropdown",
...
}
Warning: it's not a permanent solution. Ideally, you would want all three repos to have artifacts published to NPM.
I tried to install react-bootstrap and followed these instructions:
https://react-bootstrap.github.io/getting-started/introduction
However after starting the app (simulated device via Android Studio) I receive this error:
error: bundling failed: Error: Unable to resolve module `bootstrap/dist/css/bootstrap.min.css` from `index.js`: bootstrap/dist/css/bootstrap.min.css could not be found within the project.
My dependencies are as follows:
"dependencies": {
"bootstrap": "^4.4.1",
"react": "16.9.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-native": "0.61.5"
And both modules are within node_modules and so is the file bootstrap.min.css.
I tried things like
import 'bootstrap/dist/css/bootstrap.min.css';
import './node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; (should be wrong anyways);
(in index.js and also App.js like mentioned in the instructions)
I also read here:
https://github.com/reactstrap/reactstrap/issues/1325
and here:
Can't resolve '../node_modules/bootstrap/dist/css/bootstrap.min.css'?
but I have the import like in the given answer.
I tried an older version of react-bootstrap and bootstrap and I deleted all node_modules and resinstalled them even though the "missing" file is there.
My project is basically a vanilla react-native project.
I just started with npx react-native init name and tried to add bootstrap, so nothing has changed.
What is the issue here?
Problem is you are trying to use react bootstrap with react-native project.
react-bootstrap : only support react.js projects not in react-native
After upgrade of RN from 0.59.10 to 0.61.4 I get:
TypeError: hmrClient.send is not a function
when trying to start the app. Just pressing on dismiss seems to work.
Other people suggest removing metro and metro-core and setting
setting metro-react-native-babel-preset to 0.56 but that doesn't seem to work for me.
Issue was reported here:
https://github.com/facebook/react-native/issues/26958
The issue was related to an old metro-config module.
I had an old version of "react-native-fs": "2.13.3". This had a dependency on metro-config#0.48.3.
I updated react-native-fs to 2.16.2 (2.16.x is recommended for RN 0.60+) and the error disappeared.
Also I made sure in package.json I have: "metro-react-native-babel-preset": "0.56.0".
Sources:
I got the metro-config hint from huntie's answer from here:
https://github.com/facebook/react-native/issues/26958#issuecomment-558653561
Note: if you have an old dependency that cannot be updated adding:
"resolutions": {
"metro-config": "0.56.3"
},
in the package.json could also fix the issue.
I had the same error displaying every time I ran/refreshed the app and fast refresh was not working for me. I have a react native (0.63.3) app with an init without expo.
This worked for me:
yarn add metro#0.56.0
from: https://www.gitmemory.com/issue/react-native-community/releases/140/530142204
I have upgraded to my app to react-native 60.4 which support Autolinking all packages so that you dont have to manually go about setting things up and thus lowers the chances of error.
The problem is most of the packages have still not gotten compatible with this process and henceforth the app completely breaks.
my error is with https://github.com/corymsmith/react-native-fabric
referring to an issue on the repo for the same -> https://github.com/corymsmith/react-native-fabric/issues/225, which still remains unanswered.
I started giving it a try by forking the repo and understanding the auto link process given by react native.
In the package.json of the node_module package i replaced
"rnpm": {
"android": {
"packageInstance": "new FabricPackage()"
}
},
with file in the package root react-native.config.js
module.exports = {
dependencies: {
'react-native-fabric': {
platforms: {
android: {
"packageImportPath": "import com.smixx.fabric.FabricPackage;",
"packageInstance": "new FabricPackage()"
}
}
}
}
};
I also updated the build gradle to 3.4.1 from 3.1.0
My react native app is able to now find the package.
But when i call the package in my react component i get NoClassDefFoundError, which means that class is not found.
Anybody else gave this a try and have a solution please let me know.
Try to unlink with react-native unlink and then re run your code again.
Putting it here from the above comment to make it more clear:
Ok i got this to work by changing the forked repo -> (adding a react-native.config.js in the root of the package with with auto discovery and link configurations), but i think the only scalable solution i see right now is to degrade to RN ^59.0 as not a lot of packages have auto link config changes. So will wait for RN 60.4 to mature and then upgrade to it in about a month. In addition to this fabric is currently migrating to firebase and plans to complete by year end. This mean that anyways the sdk integration is going to be obsolete and hence this package too.
Also this issue is majorly related to react-native-fabric and not RN itself.