I’m a beginner in react native. I created a sample app with the expo. But I can’t import npm installed packages to code its shows an 500 error like
import DeviceInfo from ‘react-native-device-info’;
it shows an error like “unable to resolve react-native-device-info from screens\homescreen.js”
HomeScreen.js
==========
import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
StatusBar,
Dimensions,
LayoutAnimation,
Alert,
Linking,
} from 'react-native';
import { WebBrowser } from 'expo';
import { BarCodeScanner, Permissions } from 'expo';
import { MonoText } from '../components/StyledText';
import DeviceInfo from 'react-native-device-info';
...
...
Package.json
==========
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/samples": "2.1.1",
"expo": "^31.0.2",
"link": "^0.1.5",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-camera": "^1.4.3",
"react-native-device-info": "^0.24.3",
"react-native-permissions": "^1.1.1",
"react-native-qrcode-scanner": "^1.1.0",
"react-navigation": "^2.18.2"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^31.0.0"
},
"private": true
}
It seems that that 'react-native-device-info' uses native code (it requires linking as per the GitHub Repo) and therefore can't be used with Expo without detaching / ejecting your Expo project first.
From looking at your package.json, it seems that you haven't ejected yet. If you really need to use this specific device info library, you can look into ejecting your Expo project.
If you setup this package properly, just try to reload package-manager-server.
Related
It looks like an easy question with an easy answer i.e.
npm install #react-native-community/checkbox
but it doesn't work. I had an error saying that the package had a dependency to react-native-windows, so I also downloaded this package which lead to not solving my issue.
I really don't get why it happens...
Here is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/checkbox": "^0.5.6",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"moviedb-promise": "^3.1.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-image": "^4.0.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
"react-native-web": "~0.13.12",
"react-native-windows": "^1.0.0",
"react-tinder-card": "^1.3.1"
},
"devDependencies": {
"#babel/core": "~7.9.0"
},
"private": true
}
EDIT
Here is my code:
import React from 'react'
import { View, Text } from 'react-native';
import CheckBoxSetting from './CheckBoxSetting';
import PressableSetting from './PressableSetting'
import SwitchSetting from './SwitchSetting';
function SettingItemFactory () {
this.createSettingItem = function (name, type, initState) {
let settingItem = <Text/>;
switch(type){
case 'pressable':
settingItem = <PressableSetting title={name}/>;
break;
case 'switch':
settingItem = <SwitchSetting name={name} state={initState}/>
break;
case 'check':
settingItem = <CheckBoxSetting name={name} state={initState}/>
break;
default:
settingItem = <PressableSetting title={name} />;
}
return settingItem;
}
}
export default SettingItemFactory;
import React from 'react'
import {View, Text, ImagePropTypes} from 'react-native'
import CheckBox from '#react-native-community/checkbox'
const CheckBoxSetting = (props) => {
return (
<View>
<Text>
{props.name}
</Text>
</View>
)
}
export default CheckBoxSetting;
The answer was given by Tushar Khatiwada in the comments of the original post:
As of right now, the library isn't supported by expo. Thanks Tushar!
If you're using expo in your react native project, expo provides a Checkbox component that can be leveraged, and it appears to utilize the same API as the react-native CheckBox component. :)
https://docs.expo.io/versions/latest/sdk/checkbox/
It's not supported in the expo.
in react-native CLI, make sure linking is done and do pod install.
I'm a beginner in react, I learned using a (french) tutorial for learning react native. I have a new library in my project and I added react-navigation, i don't know why i have this error when I check my device.
"Unable to resolve module 'react-navigation-stack' from 'Navigation/Navigation.js' (my files) react-navigation-stack could not be found within the project.
Here is the link to the french tutorial: https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/5046301-concevez-une-navigation-entre-vos-vues
Thanks you so much if you can help me. I don't understand why it does not work
Package.json :
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
Your guide is using React Navigation 4, and it has a link to React Navigation page which has been updated to use version 5.
So you are probably missing some dependencies here, but since you are learning, it would be best to move to the new version and follow the Getting started guide to install new version and all dependencies, and then use:
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
You also have a code example there: Hello React Navigation
I am getting the following error on creating the navigation stack as follows:
Unable to resolve "./vendor/TransitionConfigs/CardStyleInterpolators" from "node_modules/react-navigation-stack/lib/module/index.js"
App.js:-
import React from "react";
import {createAppContainer,createSwitchNavigator} from "react-navigation";
import {createStackNavigator} from "react-navigation-stack";
import {createBottomTabNavigator} from "react-navigation-tabs";
import AccountScreen from "./src/screens/AccountScreen";
import SigninScreen ...... ;
const switchNavigator=createSwitchNavigator({
loginFlow:createStackNavigator({
Signin:SigninScreen,
Signup:SignupScreen
}),
mainFlow:createBottomTabNavigator({
trackListFlow:createStackNavigator({
TrackList:TrackListScreen,
TrackDetails:TrackDetailsScreen
}),
TrackCreate:TrackCreateScreen,
Account:AccountScreen
})
});
export default createAppContainer(switchNavigator);
I am using the following dependency version:-
Package.json:-
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "^1.5.3",
"react-native-reanimated": "^1.4.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.7.0"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"#babel/core": "^7.0.0"
},
"private": true
}
While bundling I am getting the following error although I am using stable version of all the dependencies...
You need to clear your metro Cache.
Since you're using Expo, first stop Expo server. Then run:
expo start -c
If you're not, run:
react-native start --reset-cache
I encounter a problem with, I think, Expo environment
When my Redux State is updated, my components are not rendered, whereas in Production mode, everything works fine
I do not print my code because it's surely not related to code, but rather than Expo environnement. Some others developers encountered that problem, but I still not found a working solution ..
It's just annoying to code in Prod' env rather than Dev' / Local env
Here is my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^32.0.0",
"native-base": "^2.12.1",
"react": "^16.5.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.9.1",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"schedule": "^0.4.0"
},
"private": true
}
If anyone has an idea about how to fix it, it would be great
If you require more information, don't hesitate to ask
EDIT : Here is my app.js
import React from 'react'
import { View, StyleSheet } from 'react-native'
import Navigation from './Navigation/Navigation'
import { Provider } from 'react-redux'
import Store from './Store/configureStore'
class App extends React.Component {
render() {
return (
<Provider store={Store} >
<Navigation />
</Provider>
);
}
}
export default App
Here is another Git post relative to this subject : https://github.com/expo/expo/issues/3859#issuecomment-490979505
I am just a new developer on React. I have just starting a new app using the create-react-app plugin. After that I have customised my own App Component, but this is using some third party components which makes the npm run test (react-scripts test --env=jsdom) fails with an error:
SyntaxError: Unexpected token import
This error only happens for an import inside a dependency at node_modules I am using. For example, it gives no error on
import React, { Component } from 'react';
Since I am using the create-react-app plugin I do not know what I need to change to make it pass. However, it seems to be something related with some babel configurations missing.
I think I should not need to install babel-jest dependency since that is embedded with create-react-app.
I have also tried to execute, without success:
npm run test -- --no-cache
The package.json file:
{
"name": "dhis2-hello-world",
"version": "0.1.0",
"private": true,
"dependencies": {
"d2": "^28.3.0",
"d2-manifest": "^1.0.0",
"d2-ui": "^28.0.8",
"d2-utilizr": "^0.2.15",
"loglevel": "^1.6.0",
"material-ui": "^0.20.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17",
"rxjs": "^5.5.5"
},
"scripts": {
"prestart": "d2-manifest package.json ./public/manifest.webapp",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"manifest.webapp": {
"name": "DHIS2 App Template",
"description": "DHIS2 App Template",
"icons": {
"48": "icon.png"
},
"developer": {
"url": "",
"name": "DHIS2"
},
"activities": {
"dhis": {
"href": ".."
}
}
}
}
The error:
/node_modules/d2-ui/lib/app-header/HeaderBar.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import PropTypes from 'prop-types';
PropTypes is being imported on a component at d2-ui which is being import at App component like this:
import React, { Component } from 'react';
import HeaderBarComponent from 'd2-ui/lib/app-header/HeaderBar';
I was looking for a way to solve it without need to eject the project.
Could anyone give me some clues of how to solve that problem?
Many thanks!