How to fix this error in Expo v34.0.0?
In Expo, you can no longer import directly from 'expo', so change from (the old way):
import { Constants } from 'expo'; // OLD WAY
to (the updated way):
import Constants from 'expo-constants'; // NEW WAY
Similarly, if you are using the following features, use this format:
import MapView from 'react-native-maps';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import { DeviceMotion } from 'expo-sensors';
Expo documentation is quite helpful.
If you are using the online Expo editor, you will be prompted to install the packages, so just click OK. Otherwise, run:
expo install expo-constants
Expo separated a lot of their previously joined libraries and Constants is one of them, to get the constants now, follow along:
Install expo-constants by running this on your project directory:
expo install expo-constants
import Constants where needed as follows
import Constants from 'expo-constants';
Retrieve statusBarHeight like this:
const barHeight = Constants.statusBarHeight;
More on the new documentations for Expo SDK 34 can be found here.
Hope this Helps!
Related
I have a problem with firestore. I want to read some data from firebase but I can't import collection from firebase Attempted import error: 'collection' is not exported from 'firebase/firestore/'. I read some articles that said this problem is related to v9 SDK.
You have to import the Firebase SDKs correctly. The issue is in the first line where you are importing from "firebase" directly which is not the ideal method and as per my understanding, the import calls/methods are not in sync with the version changes. Be sure to read the documentation on using Firebase with module bundlers
Starting with Firebase v8.0.0, you have to import Firebase SDKs as per the documentation where it is mentioned that there was a breaking change in version 8.0 where
browser fields in package.json files now point to ESM bundles instead
of CJS bundles. Users who are using ESM imports must now use the
default import instead of a namespace import
Before 8.0.0
import * as firebase from 'firebase/app'
After 8.0.0
import firebase from 'firebase/app'
Code that uses require('firebase/app') or require('firebase') will still work, but you should change these require calls to require('firebase/app').default or require('firebase').default
Change your code as shown below :
import firebase from "firebase/app"
import { getFirestore } from "firebase/firestore";
import { collection, addDoc, getDocs } from "firebase/firestore";
import "firebase/auth"
const auth = firebase.auth()
This should work for you. If not, then probably you have updated your SDK version from 8 to 9 and with version 9 things changed a bit for importing firebase, but there is no need to downgrade to a previous version, there is a "compatibility" option so can use the /compat folder in your imports, like this
import firebase from 'firebase/compat/app';
From the Firebase documentation:
In order to keep your code functioning after updating your dependency
from v8 to v9 beta, change your import statements to use the "compat"
version of each import as shown below (v9 compat packages are API
compatible with v8 code) :
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
That error message means there is no such export "collection" from the module "firebase/firestore/". So the error is on the second line when you are trying to import "collection".
In the docs there is no trailing "/" in "firebase/firestore". Try removing that trailing "/" and try again.
I suggest you follow this guide on setting up firestore
What am I doing wrong with this import in my react component? I'm trying to use the following npm package in my React app:
https://www.npmjs.com/package/chrome-headless-render-pdf
I'm assuming that this package is useable from a React app. Is there any reason why it would not be? If not then how should I evaluate whether or not an npm package is useable in a React app? The npmjs page shows the package being used like this:
const RenderPDF = require('chrome-headless-render-pdf');
RenderPDF.generateSinglePdf('http://google.com', 'outputPdf.pdf');
I was thinking that I should be able to simply import the package in my React component like this:
import * from 'chrome-headless-render-pdf';
However, intellisense is reporting this import as invalid. How can I properly import this package into my component?
In their documentation, They also mentioned it as:
you can also use it from typescript or es6
import RenderPDF from 'chrome-headless-render-pdf';
RenderPDF.generateSinglePdf('http://google.com', 'outputPdf.pdf');
This line is not a valid import statement according to the ecmascript spec.
import * from 'chrome-headless-render-pdf';
When you use the * import syntax, you must assign a name. For example:
import * as chromeHeadless from 'chrome-headless-render-pdf';
This will make all named exports from the module available from your chosen namespace. You might use this with modules that does not have a default export. Typically the documentation for the module will explain which style of import syntax you can use.
MDN provides a reference of the different valid import statements available
TabBarposition='top' makes application collapse due to react-native-router-flux ( or navigation ) update. It used to work , but now i get this error:
My code :
since react-native 0.61.2 the Viewpagerandroid has removed form react-native, but the tab library you use it has not update to adapt it.
Firstly, you find the library file which used Viewpagerandroid, then import it
from react-native-viewpager.
For example, I use react-native-scrollable-view, the ScrollableTabView use it.
I delete the import in the react-native, and import it from #react-native-community/viewpager
const {
Dimensions,
View,
Animated,
ScrollView,
Platform,
StyleSheet,
//ViewPagerAndroid //**delete it**
InteractionManager,
} = ReactNative;
const ViewPagerAndroid = require("#react-native-community/viewpager")
the other way is to check whether the library's new version adapts it.
You are using older method of ViewPagerAndroid. Old one is deprecated with new one with react-native-community. You can see the channel log here.
That means if you are using ViewPagerAndroid now you can use new one instead of old one.
You can view the new ViewPager repo here
Install the new library first
yarn add #react-native-community/viewpager
or
npm install #react-native-community/viewpager --save
If you are using RN >= 0.60 then no need to link, autolink will do that
If you are using RN < 0.60 run react-native link #react-native-community/viewpager
Or manual linking read the documentation
Then remove old ViewPagerAndroid imports
import { ViewPagerAndroid } from 'react-native'; //Remove this import
Import ViewPager separate like this
import ViewPager from '#react-native-community/viewpager'; //New way of importing
If you still getting the error please try to remove the app and re-install it.
When you run npm install this happen. if you use tab in your screen do this steps:
1: delete node modules
2: comment your tab code
3: yarn add ...(every package in your package.json)
I have referred this documentation to add google-signin in my react native app, followed all the steps mentioned but could not get the result as specified in the documentation. I have imported the following statement
import { GoogleSignin, GoogleSigninButton, statusCodes } from 'react-native-google-signin';
But Whenever I add this statement in my login file it gives me following error.
i think you need make some changed in your file path shown in error message
F:\ReactProjects\SearchApp\node_modules\react-native-google-signin\src\GoogleSignin.android.js
make sure you import following two lines correctly
import React, { Component } from 'react';
import PropTypes from 'prop-types';
install this and your problem goes away "npm install --save prop-types"
Im sure this is something simple but for the life of me i can't seem to find an answer to my problem.
Basically Im using react and webpack and I've installed a new package (in this case braintree-web-drop-in), however the package is always appearing as null (undefined) when i import it into my react module and just try to log it out at the top of the module (or anywhere)
package.json:
"dependencies": {
"braintree-web": "^3.32.0",
"braintree-web-drop-in": "^1.10.0",
ReactModel.tsx
import brainTree from 'braintree-web-drop-in'
console.log(brainTree);
I can also see that the package seems to have been added to my generated js file through webpack.
Any help would be appreciated!
Thanks,
James
To me it looks like this module doesn't have a default export (which the import syntax will use if no named export is asked for).
https://github.com/braintree/braintree-web-drop-in/blob/master/src/index.js#L534
So, in order to see if the module is installed, try this:
import { VERSION } from 'braintree-web-drop-in';
console.log('brain tree version: ', VERSION);
If that works you can use the create with a named import:
import { create} from 'braintree-web-drop-in';