Lots of Flow errors in React Native project - react-native

I created a React Native project from Expo. Then I wanted to add Flow to it. I noticed in my node_modules/react-native folder there was a .flowconfig so I copied that to the root of my project. After running flow I got some warnings from files in node_modules/exponent so I added an ignore for that whole folder. Afterwards, I still get many errors when running flow. Here are a few:
node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:227
227: /* $FlowFixMe */
^^^^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:1120
1120: if (__DEV__) {
^^^^^^^ identifier `__DEV__`. Could not resolve name
node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:2162
2162: if (__DEV__) {
^^^^^^^ identifier `__DEV__`. Could not resolve name
Expo SDK version: 14.0.0
Flow version: 0.37.0
React Native version: 0.41.2

You can suppress errors in .flowconfig file, in [options] section as follows:
[options]
suppress_type=$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-8]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
Then, in [libs] section, you should point so called library definition file, like:
[libs]
./libdefs.js
And in libdefs.js just declare:
declare var __DEV__:string;
These changes should resolve your errors. See:
https://flow.org/en/docs/config/options/#toc-suppress-comment-regex and
https://flow.org/en/docs/libdefs/creation/ for details.

Looks like it might have been an oversight on the flow types for that release version.
All of those errors look fairly harmless though so you could just ignore it. If you absolutely cannot ignore it, update to a later version of React Native that's locked to a different version of Flow? I've had good results personally (no errors) with React Native # 0.42 and Flow # 0.38.

Found this issue which recommended updating the flowconfig to use the latest version from create-react-native-app. Seems to have worked for me.

Related

react native problem with creating apk: gradle mergeDexRelease

My app works well on react-native-run-android and on gradlew clean provide me build success.
I used to check and creating the apk by using gradlew assembleRelease.
Recently, I faced an error while trying to create the APK and I cant find the right solution.
as far as I understand, some problem with the build.gradle or any gradle settings - the last feature I put was the mauron background geolocation (im not sure if that cause the problem).
I tried:
on gradle.properties :
android.useAndroidX=true
android.enableJetifier=true
org.gradle.daemon=true
org.gradle.configureondemand=true
org.gradle.jvmargs=-Xmx4608m -XX:MaxPermSize=2048m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
in build.gradle I added: implementation 'androidx.multidex:multidex:2.0.1' in the dependencies.
3.
defaultConfig {
...
multiDexEnabled true
}
dexOptions {
incremental true
javaMaxHeapSize "4g"
// multiDexEnabled true
}
The gradle I used was 6.3. So I upgraded (downloaded from their website v7 but I think the project is still under 6.3).
My question is:
If the app works and build successfuly, was the error because of my code or the gradle settings?
Im over a week with that problem and out of any clue how to get it work.
the error I get:
> Task :app:mergeDexRelease FAILED
D8: Program type already present: org.apache.commons.io.Charsets
com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
Program type already present: org.apache.commons.io.Charsets
full picture: https://ibb.co/87pFnv1 , https://ibb.co/FxB8PWX
could anyone help me with it?
The error is not about multidex. It clearly says that one of your package is trying to add a library which is already there.
Since you have the name of the library you can put conditional implementation in your build.gradle to avoid redundant implementation.
for example
Implementation('new package that has module'){
exclude module: 'module to exclude'
}
Finally I solved the problem, Thanks Shashank Shekhar for directing me to the correct problem.
I used mauron85/react-native-background-geolocation package, was working fine until I tried to create apk.
in mauron85 issue #505 there was similar problem and someone fixed it by forking and maintaining the repo.
if anyone face that issue in future, I recommend to use #darron1217/react-native-background-geolocation as it solved the error.
Resolved: I have two packages #react-native-masked-view/masked-view (from previous developer) and #react-native-community/masked-view. Just remove #react-native-masked-view/masked-view package and try build.
https://github.com/react-native-masked-view/masked-view/issues/100#issuecomment-841634389 Thanks to: Navipro70

React Native: Warning: componentWillReceiveProps has been renamed, and is not recommended for use. SwipeOut component issue

I am getting this warning with using Swipeout:
"
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See
Move data fetching code or side effects to componentDidUpdate.
If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: *** to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.
Please update the following components: Swipeout
"
Same thing for componentWillMount.
Of note, using npx react-codemod rename-unsafe-lifecycles does not work to alleviate this error.
I went into the code for Swipeout and manually added the UNSAFE_ but every time I compile the code, it reverts back.
I've opened up an issue with the page on GitHub but no response after several days.
Suggestions?
Thank you,
Meanwhile, I'd recommend you fork the project. Make the change, remove the OG package from your dependencies and install your own fork with:
npm install <YOUR-GITHUB-USERNAME>/<YOUR-REPO-NAME>
Oh, and while you're at it, if you've got the time, send them a pull request ;)

Expo SDK 36, a generic resolution for "componentWillReceiveProps has been renamed, and is not recommended for use" errors

When I run expo start the warning I receive is:
Warning: componentWillReceiveProps has been renamed, and is not recommended for use.
...
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: SafeView, Transitioner
- node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn
...
I know this is a warning and is not seen in production mode, but in order not to miss other possible warnings I want to get rid of this.
I am not using componentWillReceiveProps but the dependencies expo has are using.
The suggested npx react-codemod rename-unsafe-lifecycles checks only the codes that I wrote, not the ones coming from node_modules.
And the suggestion Please update the following components: SafeView, Transitioneris not applicable because they are not from the components that I included but from expo and its dependencies where the major one is the react-native itself.
As a solution is there any method to get rid of this warning in a generic way? Else, is there a method to get rid for only SafeView and Transitioner components (i.e. react-native-safe-area-view react-navigation react-navigation-stack packages) ?
Seems being (as of March 2nd, 2020) addressed within SDK 38.
Pls refer to:
https://github.com/expo/expo/issues/5763
https://github.com/expo/expo/pull/7227
https://github.com/orgs/expo/projects/6

React Native Android fails: error 3

Hope you could help me here:
I'm currently building an app which I created through CRNA and then ejected. I get the ios version right on but I'm currently struggling a lot with the android version.
When running react-native run-android all I can get is the following error:
Error type 3
Error: Activity class {com.myapp/com.myapp.MainActivity} does not exist.
I've checked app/build.gradle, app/src/main/AndroidManifest.xml, app/src/main/java/com/myapp/MainActivity.java and app/src/main/java/com/myapp/MainActivity.java for name errors on package. I've tried moving from com.myapp to com.mebius.myapp and com aswell.
Seems this comes from the only plugin I'm using. I'm keeping on the investigation
Any hints?
There are 3 possible reasons for the android app build fails to make
1. You need to define sdk path in android/local.properties
if local.properties doesn't place then make a file names with that
add
sdk.dir = home/user/AndroidApp/local/Sdk
You can match with their system path..
2. Your genymotion or avd must enable with the android studio
3. You must have to go with the following command
npm start
in new terminal .
Please go through with it.
Thanks
Actually I had a problem with my gradle config which look like:
include ':react-native-sensors'
project(':react-native-sensors').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sensors/android')
rootProject.name = 'accelapp'
I needed to add: include ':app'
I don't know if it's due to the process of ejecting from CRNA or if it's due to react-native link react-native-sensors though.
EDIT After some investigation, I couldn't reproduce this issue. This leads me to say it was a faulty copy/paste...

Flow with React Native 0.19.0 unexpected errors in Animated files

I am using Flow with React Native 0.19.0. I am getting a bunch of errors in Animation files when running Flow, using the supplied .flowConfig:
node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:143
143: type TimingAnimationConfigSingle = AnimationConfig & {
^ property `delay`. Property not found in
143: type TimingAnimationConfigSingle = AnimationConfig & {
^^^^^^^^^^^^^^^ object type
I get four more similar errors in the same file when running flow inside project root.
When I ignore the file AnimatedImplementation.js I get problems in other files where I reference functions in AnimatedImplementation.js.
Any ideas?
Make sure your Flow version is the same that your React Native version specifies in <your_app>/node_modules/react-native/.flowconfig. I get exactly the same error when trying to use a newer Flow version than 0.20.1 with React Native 0.19.
In my case, I resolved the issue by checking out branch 59d090c of Flow's GitHub repository, which is identical to the 0.20.1 release, and compiling the source.
Alternatively, you could upgrade to React Native 0.20 in your project. The release is just around the corner and supports Flow 0.21.