How to set up the React native in development mode with unminified - react-native

Some help would be appreciated with the following issue:
I'm trying to get the non-minified output. For some reason, I keep getting Error: Minified React error even when I run the app in development mode.
I can open the development tools and with the code below I can see Development is printed in the console.
if (__DEV__) {
console.log('Development');
} else {
console.log('Production');
}
I started the project with npx react-native init AwesomeProject and made an error.
How can i set up the non-minified dev environment.
When I used a template project with expo and did an eject to react native it was using the the non-minified dev environment. Can someone explain how i can set this up on the creation of a new project with npx?

Having an incorrect import was causing this issue.
I let IntelliJ import useState without verifying it.
Changing the import from:
import {useState} from 'react/cjs/react.production.min';
To
import {useState} from 'react';
fixes the issues.

Related

React native project crashing with Redux Toolkit

I'm using an Expo Bare Workflow setup with my React Native App.
I followed this guide EXACTLY https://redux-toolkit.js.org/tutorials/quick-start copy pasted everything.
Imported
import { store } from "./src/main/redux/store";
import { Provider } from "react-redux";
on my App.js but it crashes when I build the app for Expo Go testing using eas update. If I remove those two imports, the app works fine.
I've followed the quickstart guide exactly, so for the code you can refer to the quick start guide as it might be redundant if I still post it here.
There's no error message from the App because it crashes on startup. I do get one from xcode saying com.facebook.ABI46_0_0React.ExceptionsManagerQueue and the rest are some obscure messages

failed to load bundle localhost 8081 index.bundle platform=ios cannot find entry file index.js in any of the roots

For about the last 24 hours I decided to take my react native project off expo. So I ejected it and started to doing the proper troubleshooting to run my app using react-native run-ios. I have managed to make my application's build succeed via Xcode however when the application runs I constantly get an ERROR. I noticed within my react native file I don't have an index.js. Not really sure why not and how to make one. I did try running react-native init, however, that just made my build fail and I had to go through a whole process to make it work again. Any help would be very much appreciated.
NOTE: I am not able to embed images at my level. So, I do apologize for the link
package.json + look at my files
Add an index.js in your root with the following:
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('YourAppName', () => App);

Test runner (jest) failing to import expo modules

I'm writing some component tests for a React Native app. I'm using expo's BarCodeScanner for one of my components. In my jest test, I have a line that says import { BarCodeScanner } from 'expo';. This line alone (without anything that uses it further down in my test code) causes the following error:
The Expo SDK requires Expo to run. It appears the native Expo modules
are unavailable and this code is not running on Expo. Visit
https://docs.expo.io to learn more about developing an Expo project.
Anybody have any idea on how I can import the BarCodeScanner to my test file?
I did a bit of digging and it appears that this is a common problem with Expo and Jest. There are a couple of issues open currently related to Jest Tests:
https://github.com/expo/expo/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+jest
One solution here sparked my interest:
https://github.com/expo/expo/issues/1705
It appears if you create your own Jest setup file and "require()" the expo component in there and downgrade expo and expo-jest to v26 it works. Example from the link above:
package.json:
...
"jest": {
"preset": "jest-expo",
"setupTestFrameworkScriptFile": "./setupJest"
},
...
setupJest.js:
require('stacktrace-parser');
Hope this helps you some bit. Let me know how you get on or if you have any queries and i will dig a bit more if possible :)

How to get rid of componentWillMount yellow warning banners in react native expo app

Currently my app is getting a lot of yellow banner warnings for component will mount, however I am unable to get rid of them as they are in third party libraries. Is there a way I can make them not come up as they are disruptive for development?
In my case I've been able to do it with the YellowBox module.
I'm using an Expo managed project v38 that uses React Native v0.62.
Example:
import { YellowBox } from "react-native";
YellowBox.ignoreWarnings([
"componentWillReceiveProps has been renamed, and is not recommended for use."
]);
For later versions the LogBox module must be used: https://reactnative.dev/blog/2020/07/06/version-0.63

React Native FBSDK Version messed up for IOS and Android

I have an issue regarding FBSDK package version on IOS and Android.
For Android, if I used the latest 0.6.0 version there is an error saying:
What went wrong: Execution failed for task ':app:processDebugResources'.
com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command
'/Users/admin/Library/Android/sdk/build-tools/26.0.0/aapt'' finished
with non-zero exit value 1
Now to sort this out I have to downgrade to 0.5.0 which works fine.
However in IOS, using the 0.5.0 version, I get an error saying:
FBSDKCoreKit/FBSDKCoreKit.h not found
So I Have to bump it up to 0.6.0 to sort this out which is working. I do not know how to align this version out. Any advice is much appreciated thank you.
Finally sorted out, I cloned the latest 0.6.1 version and modify the code so that it can work on RN0.43.3 on both android and ios.
Here are the steps:
After cloning/installing the latest version, go to your node_modules/react-native-fbsdk/js.
Open these files: FBLikeView.js, FBLoginButton.js,FBMessageDialog.js, FBSendButton.js, FBShareButton.js.
Change import PropTypes from 'prop-types'; to import React, { PropTypes } from 'react';
Under react native import change ViewPropTypes to View.
Change ...ViewPropTypes, to ...View.propTypes,.
Save the changes and done.
Note: You have to do this in all 5 files you opened.
So far it works in my end perfectly.
This solves the issue about:
'LikeView' has no propType 'RCTFBLikeView.onLayout' of native type
'boolean' if you haven't changed this