Written by Daniel Idaszak✏️
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 a few of these issues and discuss how to address them if they pop up while you’re developing your next React Native app.
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 is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via “react-native unlink ” 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.
As of React Native version 0.60, we no longer need to use the react-native link command, which makes the process of setting up an app much easier. However, it can also trigger new errors, especially if you’re using an old library that doesn’t support the autolinking feature.
If you used react-native link in your 0.60+ project, run react-native unlink and then try running your app. If you didn’t use the command but received the error anyway, it’s likely that one of your dependencies is not suitable for autolinking. If that’s the cause, you can try using 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 others save a lot of time.
Null in the image element
JSON value <null> of type NSNull cannot be converted to NSString
This error occurs when an image element has a URI set as null.
<Image source={{ uri: null }} />
It can be especially hard to tackle this error if the URI you want to open is fetched from the backend and you’re not sure whether it’s a proper link or null.
URI versus URL in the image element
When displaying a remote image in the image element, you should name the source object as a URI, like this:
<Image source={{ uri: 'https://facebook.github.io/react-native/img/homepage/phones.png' }} />
If you mistakenly name it “URL” instead of the “URI,” the image will be displayed on the iOS device, but it will fail silently on the Android device. Being aware of this error could save you a lot of time and energy debugging.
String outside text
Invariant Violation: Text strings must be rendered within <Text> 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 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:
- Clear watchman watches: watchman watch-del-all
- Delete node_modules: rm -rf node_modules and run yarn install
- Reset Metro’s cache: yarn start ––reset-cache
- 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 the platform you are developing on.
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/*
Summary
Now you should be able to address seven of the most common bugs you’re likely to encounter while developing a React Native app. Some of them 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.
Full visibility into production React apps
Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.
LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.
The post Common bugs in React Native appeared first on LogRocket Blog.
Top comments (2)
Good post, Daniel! Shared on React Native Now #60
The Import Error definitely got me a few times due to my carelessness.