Win 10 and latest expo. Have a new project set up with
npm install -g expo-cli
npm start
Everything works fine. Then add react-native-elements to the project together with the following code:
import { Button } from 'react-native-elements';
<Button />;
It show that Unable to resolve "react-native-elements" from "screens\LinksScreen.js".
This is app.json:
{
"expo": {
"name": "Orange",
"description": "A very interesting project.",
"slug": "Orange",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
And this is package.json:
{
"name": "my-new-project",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"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": "^30.0.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"react-native-elements": "^0.19.1",
"react-navigation": "^2.16.0"
},
"devDependencies": {
"jest-expo": "30.0.0"
}
}
Any idea?
Have you done an npm install for the react-native elements? That could very well be your problem. Try
npm install --save react-native-elements
at the command line in the project folder.
Related
I have an react-native project managed by expo.
The project runs smoothly on expo go but after building it by following the current eas build procedure the app crashes on physical device.
To build the apk the eas global cli npm package was installed and after generating a eas.json file it was configured for distributable apk building same as this:
{
"cli": {
"version": ">= 3.4.1"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal",
"ios": {
"resourceClass": "m1-medium"
}
},
"preview": {
"distribution": "internal",
"ios": {
"resourceClass": "m1-medium"
},
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {
"ios": {
"resourceClass": "m1-medium"
}
}
},
"submit": {
"production": {}
}
}
Finally the command "eas build -p android --profile preview" was executed to build it.
But after building it and installing it on the physical device the app crashes after loading the splash image.
This is the package.json file:
{
"name": "cyberlino",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/bottom-tabs": "^6.5.2",
"#react-navigation/material-top-tabs": "^6.5.2",
"#react-navigation/native": "^6.1.1",
"#react-navigation/native-stack": "^6.9.7",
"expo": "~47.0.12",
"expo-clipboard": "~4.0.1",
"expo-linear-gradient": "^12.0.1",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"react-native-modal": "^13.0.1",
"react-native-toast-message": "^2.1.5",
"react-native-vector-icons": "^9.2.0"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
I'm trying to release my App on GooglePlay but I get this error message , Apparently my Expo App is targeting Api level 30 , and I need to change it to target Api level 31.
I tried installing BuildProperties by doing an expo install expo-build-properties
and trying to set target sdk version in the plugins but didnt work
Screenshot
My package.json
{
"name": "klearners",
"version": "1.0.0",
"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-async-storage/async-storage": "^1.17.6",
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.2",
"expo": "~44.0.0",
"expo-ads-admob": "~12.0.0",
"expo-build-properties": "^0.3.0",
"expo-status-bar": "~1.2.0",
"radio-buttons-react-native": "^1.0.4",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-chart-kit": "^6.12.0",
"react-native-confetti-cannon": "^1.5.2",
"react-native-countdown-circle-timer": "^3.0.9",
"react-native-radio-buttons-group": "^2.2.11",
"react-native-react-native-quiz-single-choice": "^1.0.3",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-simple-radio-button": "^2.7.4",
"react-native-svg": "^12.3.0",
"react-native-tts": "^4.1.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "^0.17.1",
"react-native-webview": "^11.23.0",
"react-translate-json": "^2.1.0",
"react-youtube": "^9.0.1",
"styled-components": "^5.3.5"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
app.json
{
"expo": {
"name": "AppName",
"slug": "AppName",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/logo.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#5e9bff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"config": {
"googleMobileAdsAppId": "ca-app-pub-3*******************"
},
"package": "com.name.AppName"
},
"web": {
"favicon": "./assets/favicon.png"
},
"extra": {
"eas": {
"projectId": "ca****-****-****-****-**************"
}
},
"plugins": [
[
"expo-build-properties",
{
"android": {
"compileSdkVersion": 31,
"targetSdkVersion": 31,
"buildToolsVersion": "31.0.0"
},
"ios": {
"deploymentTarget": "13.0"
}
}
]
]
}
}
eas.json
{
"build": {
"preview": {
"android": {
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {}
}
}
you can use expo-upgrade in your project delete node_modules and run yarn or npm install again
expo-upgrade
//Delete node_modules
yarn //Or npm i
enter image description here
When I'm going to execute the command expo start, give me the following error, I'm starting to work with react native and I don't manage much, what can it be?
app.json
{
"expo": {
"name": "Project",
"slug": "Project",
"version": "1.0.0",
"orientation": "portrait",
"sdkVersion": "35.0.0",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
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": "^35.0.0",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"expo-status-bar": "^1.0.2",
"react-dom": "~16.11.0",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
new error
enter image description here
folders
I changed the files in the folder
\node_modules\metro-config\src\defaults\blacklist.js
in
var sharedBlacklist = [
/node_modules[/\\]react[/\\]dist[/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
for
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
now this error is showing up
this last error was solved by installing the expo directly on the emulator.
As it is shown in the error, React Native is not installed. So,
(1) npm install
(2) npm start
That's it. If you still get any problem, please update your question by containing your app.json file content.
UPDATE:
I think the problem is with your sdk version. Please try changing the version of the sdk version.
(1) replace your package.json with the following content. (Copy and Paste)
{
"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": "~37.0.3",
"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-37.0.1.tar.gz",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
Above, I've changed the sdk version from 38 to 37.
(2) Delete node_module, and .expo folders if they have been created in your project root directory.
(3) npm install
(4) npm start
That's it. It should work now!
try changing the source of react-native in your package.json by changing this line:
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
for this
"react-native": "^0.63.0",
I see a comment here, but I don't want to install expo-cli globally. I want my project's packages to be dictated by the package.json. This way when it's shared, nobody needs to do any other extra configuration. My package.json is:
{
"name": "my-new-project",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"upgrade": "expo upgrade",
"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",
"expo-cli": "^3.22.3",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-navigation": "^2.18.2"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^31.0.0"
}
}
Here is my app.json
{
"expo": {
"name": "stuff",
"description": "A very interesting project.",
"slug": "stuff",
"privacy": "public",
"sdkVersion": "31.0.0",
"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
Ok after spending countless hours on this, it's fixed. I basically just did what was asked and changed expo to 35.0.0 and have react-native point to sdk-35.0.0.tar.gz. Changed the version to 35.0.0 in app.json as well
try with this one
expo upgrade
or you can find your version documentation from
https://docs.expo.io/workflow/upgrading-expo-sdk-walkthrough/
in individual page has instruction
https://blog.expo.io/expo-sdk-38-is-now-available-ab6cd30ca2ee
Below 37.0.0 support
expo update 35.0.0
this code
I've recently updated my Expo SDK from 3.0 to 3.2 and I've suddenly started to get all kinds of erros, at first I needed to replace my use of vector icons from
import Icon from "react-native-vector-icons/Ionicons";
to
import {Ionicons} from '#expo/vector-icons';
Because I started to get the following error using the old method
fontFamily "Ionicons" is not a system font and has not been loaded through Font.loadAsync.
I checked the expo docs https://docs.expo.io/versions/latest/guides/icons/
It is the recommended method. But now when using this method I get the following message
The syntax "import { Font } from 'expo-font'" is deprecated. Use "import * as Font from 'expo-font'" or import named exports instead. Support for the old syntax will be removed in SDK 33.
So I'm confused as it is recommended to use this method in version 3.2 but it will be also deprecated in the next
I've tried changing my .babelrc file
{
"presets": [ "babel-preset-expo" ]
}
// Uitgeschakeld inverband met https://github.com/expo/expo/issues/2576
// {
// "presets": ["babel-preset-expo"],
// "env": {
// "development": {
// "plugins": ["transform-react-jsx-source"]
// }
// }
// }
Removing node_modules and reinstalling
checking expo version in app.json and package.json
App.json
{
"expo": {
"name": "Rapio",
"description": "Wait less, enjoy more.",
"slug": "Rapio",
"privacy": "public",
"sdkVersion": "32.0.0",
"ios": {
"bundleIdentifier": "com.rapio.consumerapp"
},
"android": {
"package": "com.rapio.consumerapp"
},
"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
package.json
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "^8.0.0",
"axios": "^0.18.0",
"expo": "^32.0.0",
"navigation": "^5.1.0",
"react": "^16.6.0",
"react-native": "0.57.1",
"react-native-elements": "^1.1.0",
"react-native-fbsdk": "^0.8.0",
"react-native-maps": "^0.22.1",
"react-native-payment-gateway": "^0.4.3",
"react-native-simple-radio-button": "^2.7.3",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^2.18.2",
"react-redux": "^5.1.1",
"redux": "^4.0.1"
},
"devDependencies": {
"schedule": "^0.4.0"
}
}
I'm expecting to be able to use the correct method for using icons without getting error messages or warnings