Troubleshooting common React Native bugs

Editor’s note: This post was updated on 7 March 2022 to reflect information relevant to React Native v0.67

React Native is a great framework to implement your app for both Android and iOS platforms. But while it’s widely supported by the React community and Facebook, it’s still far from version 1.0.

Some of the errors you may encounter could be misleading or very hard to find. Recently, the React Native team asked developers to help them determine which of these annoying errors lead to the most frustration. While they did address some of the worst errors, there is still a handful remaining that could go under the radar.

Let’s look at the following issues and discuss how to address them if they pop up while you’re developing your next React Native app:

• Import error
• Animated.View error
• Autolinking error
• Unrecognized font family error
• Command PhaseScriptExecution failed
• String outside text error
• Dependencies error

Import error

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of ‘App’.

This error is located at:

in RCTScrollContentView (at ScrollView.js:1038)
in RCTScrollView (at ScrollView.js:1178)
in ScrollView (at App.js:25)
in RCTSafeAreaView (at SafeAreaView.js:55)
in SafeAreaView (at App.js:24)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)

The React Native team has made this error more descriptive since the last version. Usually, mixed-up default and named imports are the culprits.

It’s still tricky because, as you can see, the error is caused by a component that is imported into the app, but we can’t tell which one is imported improperly. The prompt does not identify the component or even the line on which the error appears.

To avoid this error when creating and exporting components, remember not to mix default and named imports. What’s the difference?

Let’s say your component has the following:

export const componentName

You’d have to import it like this:

import { componentName } from './file'

But what if you use default export?

export default componentName

In that case, you’d have to import it without curly braces, but the naming is not important. You could do it like this:

import componentName from './file' //ok
import someOtherName from './file' //ok
import { componentName } from './file' //wrong!

Animated.View error

Invariant Violation: [453,”RCTView”,1,
{“width”:250,”height”:50,”backgroundColor”:4289781990,”opacity”:1}] is not usable as a native method argument

This error is located at:

in RCTView (at file.js:27)
in FadeInView (at file.js:42)
in RCTView (at file.js:41)
in _default (at App.js:29)
in RCTScrollContentView (at ScrollView.js:1038)
in RCTScrollView (at ScrollView.js:1178)
in SafeAreaView (at App.js:24)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)

Developers often encounter this error when using animated elements from React Native. It’s one of the trickiest errors you’ll come across, and the prompt might look slightly different depending on the use case.

Although the message is confusing, the error is caused by a simple mistake: when creating an animated component, you have to create an element (e.g., View), like this:

<Animated.View>

If you use a normal view, the above error will pop up.

It can be difficult to identify this error and understanding it can save you a lot of time. There’s an issue for this listed in the React Native repository among other annoying errors to fix, and the team is expected to improve on it in an upcoming release.

Autolinking error

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:

…

This error is often encountered when upgrading to React Native v0.60 or higher. Going forward, you can unlink this dependency via react-native unlink <dependency> and it will be included in your app automatically. If a library isn’t compatible with autolinking, disregard this message and notify the library maintainers.

With React Native v0.60+, it’s much easier to set up an app, because we no longer need to use the react-native link command. However, this can trigger new errors, especially if you’re using an old library that does not support the autolinking feature.

If you used react-native link in a React Native v0.60+ project, run react-native unlink and then try running your app. If you did not use the react-native link command but still received the error, it’s likely that one of your dependencies is not suitable for autolinking. If that is the case, you can try using [patch-package](https://www.npmjs.com/package/patch-package) to fix it on your own.

Be sure to create a pull request with your solution to the library repository; you may be able to help save other developers a lot of time.

Unrecognized font family error

Unrecognized font family ‘Lato-Regular’

[RCTFont updateFont:withFamily:size:weight:style:variant:scaleMultiplier:]
RCTFont.mm:347
[RCTTextAttributes effectiveFont]
[RCTTextAttributes effectiveTextAttributes]
[RCTBaseTextShadowView attributedTextWithBaseTextAttributes:]
[RCTTextShadowView attributedTextWithMeasuredAttachmentsThatFitSize:]
[RCTTextShadowView textStorageAndLayoutManagerThatFitsSize:exclusiveOwnership:]
RCTTextShadowViewMeasure

This error occurs when we try to add a custom font in a React Native project.

To avoid this error, create a react-native.co``n``fig file at the root level of the project folder and add the below code snippet:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'],
};

To link the font to iOS and Android run one of the below commands:
npx react-native link or yarn react-native link

Now, we can use the custom font in our React Native styles.

Here’s an example: fontFamily: 'custom-font'

Command PhaseScriptExecution failed

Command PhaseScriptExecution failed with a nonzero exit code
PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/bm/Library/Developer/Xcode/DerivedData/RNLocalAuthentication-bhitgdgehuvfyyewuiqxedwixzjg/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-5F4C70EF7D90A5A5BDAEB404279F232A.sh (in target ‘FBReactNativeSpec’ from project ‘Pods’)

cd /Users/bm/Documents/Projects/RNLocalAuthentication/ios/Pods
export ACTION\=build
export ADHOCCODESIGNINGALLOWED\=YES
export ALLOWTARGETPLATFORMSPECIALIZATION\=NO
export ALTERNATEGROUP\=staff
export ALTERNATEMODE\=u+w,go-w,a+rX
export ALTERNATEOWNER\=bm
export ALWAYSEMBEDSWIFTSTANDARDLIBRARIES\=NO
export ALWAYSSEARCHUSERPATHS\=NO
export ALWAYSUSESEPARATEHEADERMAPS\=NO
export APPLEINTERNALDEVELOPER_DIR\=/AppleInternal/Developer

This error has occurred with npm packages, which are not supported on native M1 Macs. To work on the M1 Macs, we added this to podfile to run and compile to x86 mode.

 post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
            # Needed for building for simulator on M1 Macs
            config.build_settings['ONLY_ACTIVE_ARCH'] = 'NO'
        end
    end
  end

The above code excludes it from the active arch. Next, follow the additional required step listed in the “additional troubleshooting for Android and iOS” section.

String outside text error

Invariant Violation: Text strings must be rendered within component.

This error is located at:

in a (at App.js:29)
in RCTScrollContentView (at ScrollView.js:1038)
in RCTScrollView (at ScrollView.js:1178)
in ScrollView (at App.js:25)
in RCTSafeAreaView (at SafeAreaView.js:55)
in SafeAreaView (at App.js:24)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)

This error message is fairly straightforward, and you can see that it’s located in the app.js file on line 29, but it’s still worth mentioning the possible causes.

If you encounter this error, you may have forgotten to wrap your string with a Text component or you may have introduced a typo that rendered your component unrecognizable. The latter is the most common cause — an additional bracket here, a superfluous comma there. These typos can be hard to spot, even if we know where to look.

It would be nice if, in future versions, the error message could include more useful information, such as the specific string that caused the issue.

Dependencies error

Error: undefined Unable to resolve module @babel/runtime/helpers/interopRequireDefault from App.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project.

If you are sure the module exists, try these steps:

1. Clear watchman watches: watchman watch-del-all
2. Delete nodemodules: rm -rf nodemodules and run yarn install
3. Reset Metro’s cache: yarn start ––reset-cache
4. Remove the cache: rm -rf /tmp/metro-*

If an error like this appears seemingly out of nowhere, the first suspects should be npm or Yarn and dependencies in the node_modules folder.

First, you can try reinstalling the whole dependencies directory. If a major dependency is somehow changed in your repository, it could cause issues. Run the command in the main project directory where you see the node_modules folder to remove and install them again.

rm -rf node_modules && yarn

If this doesn’t work, you can try following the steps outlined in the error message. Here is a slightly modified command ready to copy to your terminal:

watchman watch-del-all && rm -rf /tmp/haste-map-react-native-packager-* && rm -rf /tmp/metro-bundler-cache-* && rm -rf node_modules/ && yarn cache clean && yarn

This will clear watchman watches, reset the metro bundler cache, remove the haste cache, reinstall the whole node_modules directory, and clear the Yarn cache.

Additional troubleshooting for Android and iOS

If you still have errors, you could try cleaning your project. The steps will vary depending on your development platform.

Android
Try clearing the Gradle cache by typing the following command from the main project directory:

cd android && ./gradlew clean

iOS
Try cleaning your project if you’re opening it from the Xcode. Click Product and Clean from the upper menu bar.

You may also want to try running pod deintegrate in the ios directory to remove pods completely, then running pod install again.

Finally, removing derived data can be very helpful:

rm -rf ~/Library/Developer/Xcode/DerivedData/*

Conclusion

You should now be able to address seven of the most common bugs you’re likely to encounter while developing a React Native app. Some of these bugs are being fixed as you read this article, and error messages will evolve to be more descriptive and informative as new versions are released. But for now, we need to work with what we’ve got. Knowing the context behind these errors can save you a lot of painful time spent debugging. After all, while most of these errors are difficult to spot, they’re usually easy to fix if you know what you’re looking for.