Importing module returns null using expo - javascript

I'm trying to import a compass module without success using expo and react native
LINK to library
The error appears when I uncomment the import line, which gives me the error:
import RNSimpleCompass from 'react-native-simple-compass';
null is not an Object (Evaluating 'RNSimpleCompass.start')
I basically install the library using the provided instructions:
npm install react-native-simple-compass --save
I also tried linking it
npx react-native link react-native-simple-compass
then I run
npm start
which starts expo and gives me the error
I usually install and run other npm packages without problem, but this one keeps complaining when importing it.
I checked that the library is in my package.json dependencies. I even tried deleting the node_modules folder and re running npm install to reinstall all dependencies, but the error persist.
Am I missing something?

When you have expo "managed" project (without "ios" and "android" directories) you can't use react-native libraries that contain native code(objc or java). It worked in other cases because you probably were adding js only libraries or libraries that are explicitly supported by expo.
If you want to use that library you would need to eject to bare workflow(expo eject). You will still have access to all expo libraries you are currently using, but you won't be able to build it on Expo servers.

Related

react-native authentification app using AsyncStorage

developers
I'm working on a React Native project created with Expo
i use * AsyncStorage *to make a user authentication
i faced this problem when i use my phone to test my app
this is a capture of the error in my phone, but there is not erreur in * Expo DevTools console *
I'm not quite sure about the Expo but since React native 0.60, Facebook removed some of these packages from the react native core to reduce the size because those libs are not necessary for all the users. So in order to use AsyncStorage, now you have to manually install it using NPM or Yarn first. So from your screenshot I assume that is true for Expo as well.
However do the following and you will be fine. I assume you have react native version higher than 0.60
if your package manager is Yarn, then : yarn add #react-native-community/async-storage
or
if your package manager is NPM, then : npm i --save #react-native-community/async-storage
After that, use below code part to update iOS Pods. Run this from your project root using terminal.
cd ios / && pod install && cd ...
Now try to run the app. App will start to work if there are no any other issues.
For more information about AsynStorage, please use this link.

Error when building next.js app: Can't resolve 'next/head'

I am getting the below error when doing next build in my next.js app, after it's been working fine with just next (or npm run dev).
The error:
$ next build
The module 'react-dom' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'. To add it, run 'npm install --save react-dom'
Creating an optimized production build ...
> Using external babel configuration
> Location: "../.babelrc"
Failed to compile.
./pages/_app.js
Module not found: Can't resolve 'next/head' in '../pages'
> Build error occurred
Error: > Build failed because of webpack errors
at build (.../AppData/Roaming/npm/node_modules/next/dist/build/index.js:7:847)
I started my project by cloning Material UI's next.js example and just use that as it seems updated:
https://github.com/mui-org/material-ui/tree/master/examples/nextjs
However, thinking I just may of have an outdated or broken build, I re-cloned the next.js example and did next build as well, without modifying any files and I get the same error.
How can I fix this?
I just cloned that next.js example and it worked both with npm run dev, as well as npm run build->npm run start.
Judging by your error, I would check that "react-dom": "latest" is present in your package.json's dependencies. Did you run npm install after cloning the example?
The solution to this problem is to Just rerun these two commands again then your project will successfully Run. I also faced this problem but I got the solution.
npm i
yarn install
I ran into a similar problem when I included my nextjs app in a yarn workspace. I got around the issue by deleting the following directories in my nextjs app:
node_modules
.next
build
After removing them I ran yarn from the repo directory and started the nextjs app back up and it was working again.

React native with expo: ‘react-navigation does not exist in the haste module map’

I’m a beginner working on my first app with react native and expo. I’m having trouble getting the navigation to work. When I run the app, I get the error ‘react-navigation does not exist in the haste module map’. I’ve installed react navigation through the command line and ran install npm to install dependancies.
I also had the same problems few weeks back , please follow the steps below :
Open terminal and navigate to project root directory.
write 'rm -rf node_modules' in the terminal to remove the node modules.
write 'npm install' in order to install the node modules again
write 'cd ios'.
write 'rm -r build' to clear the old build.
come back to the root folder of project again and run the project.
Your code will run smoothly.

IntelliJ Idea React-native not working properly

I have recently installed intellij idea on my PC and started react-native application. I installed all libraries required for react native and react js. Also installed node js module and all plugins for this ide. Still i am getting error below like this in import statement.
When i move to that line that shows me error like.
-> Install TypeScript definition for better type information.
But my typeScript definition are also as per required.
Also I have changed my JS to ReactJSX.
I have attached image over here for reference.
You should try to create a new project using following commands
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
If you still facing error then try to use vscode editor and select react language. If you still face issue let me know

undefined is not object (evaluating 'RNDeviceInfo.deviceId') - error in react-native-device-info

I am using react-native-device-info library, and it works fine for iOS simulator. But for Android I receive an error:
undefined is not object (evaluating 'RNDeviceInfo.deviceId')
What can be the problem?
I installed it like is described in the guide on the library's page (using rnpm).
Then in componentWillMount() I am trying to get the device id:
import DeviceInfo from 'react-native-device-info';
...
componentWillMount() {
let clientId = DeviceInfo.getUniqueID();
}
In addition to rnpm install react-native-device-info and instruction from here, I had to manually add some lines to the following files:
<YourReactProject>/android/settings.gradle:
rootProject.name = 'YourReactProject'
include ':app', ':react-native-device-info'
project(':react-native-device-info').projectDir = newFile(rootProject.projectDir, '../node_modules/react-native-device-info/android')
<YourReactProject>/android/app/build.gradle:
...
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
compile project(':react-native-device-info')
}
...
Rebuild by running react-native run-android
First check is it added to your package.json or not?
Then link the package with react native using following command
react-native link react-native-device-info
It manually links the package with react-native.
I am facing this issue in IOS.
Even I link the package it showing the same issue.
open your project in Xcode,
then under build phases add a binary file of react-native-device-info by clicking on the + button.
Rerun the project, It worked for me.
Firstly, make sure that react-native-device-info is linked in your project if you are using react-native version < 0.60.
If not linked, link it using react-native link react-native-device-info and then run react-native run-android command.
If using react-native version >= 0.60 skip this link command as auto-linking should work but make sure to run react-native run-android command.
and then use it using,
import DeviceInfo from 'react-native-device-info';
DeviceInfo.getUniqueId()
There is a small typo. You are using DeviceInfo.getUniqueID(); instead of DeviceInfo.getUniqueId()
Review in the documentation here
It looks like this package now uses Cocoapods. Run react-native link then check your Podfile for something like this:
pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
If that's in there, then you just need to install / update your pods.
cd ios
pod install
or
cd ios
pod update
Make sure you restart the metro server and re-run react-native run-ios
use the manual installation and change
your project\node_modules\react-native-device-info\android\build.gradle'
dependencies {
def googlePlayServicesVersion = project.hasProperty('googlePlayServicesVersion') ? project.googlePlayServicesVersion : DEFAULT_GOOGLE_PLAY_SERVICES_VERSION
compile 'com.facebook.react:react-native:+'
compile "com.google.android.gms:play-services-gcm:$googlePlayServicesVersion"}
in here implementation as a compile

Categories

Resources