react-native-web | Cross-platform React UI packages | Frontend Utils library

I am actually facing a similar 'bug'. However, what you can do is you can install @types/react-native package.

For npm: npm install --save @types/react-native

For yarn: yarn add @types/react-native

This is just a workaround, because it used to work without that Typescript package before. Alas, this will at least save you from manually importing the elements.

Also, I'm assuming that you already have react-native-tools extension installed.

After some more search arounds, found this is a known issue in react-native-reanimated. As their website points out

Please note that Reanimated 2 doesn't support remote debugging, only Flipper can be used for debugging.

Another github issue also pointed out this issue

This is expected, you can't use remote debugging with turbomodules (which Reanimated v2 is using). Check out Flipper to debug your app.

https://docs.swmansion.com/react-native-reanimated/docs/#known-problems-and-limitations

https://github.com/software-mansion/react-native-reanimated/issues/1990

Removing this library fixed the issue.

1. Remove the react-native-reanimated dependency in package.json
2. Remove related code in android's MainApplication.java
3. yarn install or npm install
4. Go to the ios folder and run pod install
5. Go the the android folder and run ./gradlew clean
6. Rebuild the app. yarn android and yarn ios

Another alternative is to use Flipper for debugging instead.

can you give your

• package.json
• node version

I think that's because of the babel issue / your node version, because it cannot transpile the optional chaining https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

maybe tried using latest LTS node version? because as far as I know, the latest LTS node version already support optional chaining

I recently encountered a similar issue with boost after updating react native. After the panic wore off, and some good coffee, I was able to resolve by doing the following:

1. Open the /ios/.xcworkspace file in Xcode.
2. Raise the iOS Deployment Target (in my case I only bumped to 10).
3. Product > Clean Build Folder, then Product > Run.
4. Locate the boost error in the issue navigator and identify which pod the error is listed under (in my case it was RNReanimated).
5. Update the node package related to the pod (in my case, npm update react-native-reanimated
6. Finally, run pod install

After performing those steps, I was able to get my project up and running again.

Welcome @Backup Gov18,

This is a documented issue.

Note: Only one active BarCodeScanner preview is supported currently. When using navigation, the best practice is to unmount any previously rendered BarCodeScanner component so the following screens can use without issues.

There is a workaround.

Instead of conditionally rendering the component, you could render it inside another dedicated screen component.

This way, after this new screen reads the barcode, you could navigate back to your first screen. Navigating back may unmount this new screen. You can force unmount if you need to.

As you are using react-navigation, you had better use .pop() instead of goBack().

You can also use expo-camera instead of expo-barcode-scanner. expo-camera does not have this issue. It also offers more options like flashlight/torch and switching cameras.

Just as we discussed in the comment section, I was able to resolve the issue by removing the react-native-reanimated package, as I was not using it. For the error you got after that, downgrading expo worked for me.

Figured out my own issue. I had set global.window = {} in the jest.setup.js file earlier. @testing-library/react-native uses a timers.js file in which they refer to globalObj which they obtain from the following: const globalObj = typeof window === 'undefined' ? global : window;. As window was not technically undefined, globalObj was being set to {} and did not have access to global functionality.

Your TouchableOpacity is overlap with react navigation internal press handler, just wrap your icon with View

If you want customize press behavior of tab icon pass the listener object to listener props https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen

Asked the NAtive Base creators about it: https://github.com/GeekyAnts/NativeBase/issues/4011

Basically they say that it's a problem only hen using npm and not yarn, so they ask that we use yarn for now.