TypeError : undefined is not an object ( _reactNative.Animated.Text.propStyles.style ) - react-native

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.

Related

found 1 high severity vulnerability (react-native-svg)

I'm trying to create a SVG component.
I have this problem after run command "npm i".
I think versions between packages aren't compatible.
How to fix this or create SVG component without react-native-svg package?
Thank a lot.enter image description here
Add the following to package.json:
{
// scripts, dependencies, etc.
"resolutions": {
"css-what": "5.0.1"
},
}
Remove lock file. Install the packages. Check if the app is still working. If works then keep the configuration (and ignore the warnings) else revert it.
Since you are using npm, you may wanna first refer this thread: npm equivalent of yarn resolutions?

Invariant Violation: Module JSTimers is not a registered callable module(calling callTimers).Issue due to device-info package in lerna setup

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:]

React native Fabric autolink error with react 60.0 and above

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.

webpack-resolve-alias to resolve dependecy's sub-dependency

I'm sort of stuck with one problem and googling it for about three hours brought me nowhere.
Here's the problem. I'm trying to develop my own custom PDF viewer based on PDF.JS lib. Officially it is distributed on npm as pdfjs-dist package. However I need to extend a few classes that are not accessible in pdfjs-dist. So I npm install'ed or yarn add'ed the original repo https://github.com/mozilla/pdf.js.git. This way I have access to classes I need. Inside pdf.js there are core lib that is stored in pdf.js/src/ and a pdf-viewer app that is stored in pdf.js/web/.
Inside that pdf.js/web/ app core lib (pdf.js) is referenced via pdfjs-lib alias that is resolved to pdf.js/src/ during pdf.js inner build process by gulp.
For example pdf.js/web/base_viewer.js:
import { AnnotationLayerBuilder } from './annotation_layer_builder';
import { createPromiseCapability } from 'pdfjs-lib';
import { PDFPageView } from './pdf_page_view';
So now I'm trying to import that pdf.js/web/base_viewer.js in my app that is using latest Webpack 4 (I guess), and this pdfjs-lib sub-dependency is not resolved.
I've tried webpack's resolve-alias mechanism (https://webpack.js.org/configuration/resolve/):
resolve: {
alias: {
'pdfjs-lib': path.resolve(__dirname, './node_modules/pdf.js/src/')
},
}
...but looks like it resolves dependencies only of my own App, but not sub-dependencies of my dependency.
Just in case I'm building Vue 3.0 app using vue-cli and access webpack config this way: https://cli.vuejs.org/guide/webpack.html, but don't think it matters.
Any help from Webpack gurus here?
Thanks.

Bundling workflow in expo react-native

What are the steps of the bundling/packaging process? I know there are expo-cli, babel, metro... but do not get how they call each other to produce the final javascript bundle.
Any ideas or direction?
P/S: in a specific case, I want to ignore some files from being bundled, but do not know where to config this.
Just for anyone who may need this...
The flow is expo-cli call the react-native's local-cli at (node_modules\react-native\local-cli), which will transform the code with babel and package them with metro. expo-cli also pass packager options likes packagerOpts to react-native.
Also this article is helpful to understand babel: https://kleopetrov.me/2016/03/18/everything-about-babel/
In my specific case, I modify app.json like this:
...
"packagerOpts": {
"assetExts": ["ttf", "tkon"]
},
"assetBundlePatterns": ["./app/config/*.tkon"]
...
which tells the packager that all files with .tkon extension is asset. They will be exclude from the final JS bundle, and can be required as asset.
Later I load this asset with:
let asset = Asset.fromModule(require('../../config/products.tkon'));
await asset.downloadAsync();
let data = await FileSystem.readAsStringAsync(asset.localUri);
data = JSON.parse(data);
That's it