I'm trying to use Ionicons on react-native app using expo, unfortunately the icon is not showing and the following error is received:
fontFamily "ionicons" is not a system font and has not been loaded through Font.loadAsync.
If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Font.loadAsync.
I'm using Iocincons in the following way:
import { Ionicons } from '#expo/vector-icons';
....
<Ionicons name="arrow-back" size={24} color="black" />
In addition, this is my package.json file:
{
"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/vector-icons": "^12.0.4",
"#react-native-community/masked-view": "^0.1.10",
"axios": "^0.21.1",
"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-font": "^9.0.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.0.1",
"react-native-screens": "^2.18.1",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-header-buttons": "^7.0.0",
"react-navigation-stack": "^2.10.4",
"react-redux": "^7.2.3",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "^7.13.15"
},
"private": true
}
I've already tried to remove node_modules, package-lock.json, and run npm install, but it didn't solved the problem.
Any idea will be appreciated.
Updating expo to version 41 solved this problem.
Related
I just added react-redux with reduxjs/toolkit on react-native.
I tried in dev mode and its been working fine.
I tried with expo start --no-dev --minify and it crashed.
I decided to publish it and when I launched it, my app instantly crashed.
Why ?
package.json
{
"name": "cusual test",
"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-native-picker/picker": "2.4.2",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.9.1",
"#reduxjs/toolkit": "^1.8.6",
"#types/axios": "^0.14.0",
"axios": "^1.1.3",
"eas-cli": "^2.5.1",
"expo": "~46.0.16",
"expo-status-bar": "~1.4.0",
"expo-updates": "~0.14.6",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.6",
"react-native-dotenv": "^3.3.1",
"react-native-picker-select": "^8.0.4",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.7",
"react-redux": "^8.0.4"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~18.0.14",
"#types/react-native": "~0.69.1",
"#types/react-native-vector-icons": "^6.4.12",
"typescript": "~4.3.5"
},
"private": true
}
This line makes my app crahes :
const App = () => {
return (
<Provider store={store}>
<Router />
</Provider>
);
};
If I comment provider's lines, it doesn't crash anymore.
Did I miss anything ?
I'm using SDK 46 and expo 6.0.6.
Thanks for help.
Having the same issue. Looks to be caused by a bug in the Redux code. Have a look at this issue on GitHub:
https://github.com/reduxjs/redux/issues/4443
Describes a crash that happens when code is minified and running in production mode.
Can't fix expo problem.
My package.json:
{"name": "smth", "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.3.2",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#reduxjs/toolkit": "^1.8.4",
"expo": "~46.0.7",
"expo-app-loading": "~2.1.0",
"expo-linear-gradient": "~11.4.0",
"expo-status-bar": "~1.4.0",
"link": "^1.5.1",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.4",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-svg": "12.3.0",
"react-native-svg-transformer": "^1.0.0",
"react-native-web": "~0.18.7",
"react-redux": "^8.0.2",
"tailwindcss-react-native": "^1.7.10" }, "devDependencies": {
"#babel/core": "^7.18.6",
"#types/react": "~18.0.0",
"#types/react-native": "~0.69.1",
"#types/react-redux": "^7.1.24",
"tailwindcss": "^3.1.8",
"typescript": "^4.6.3" }, "private": true}
I'm trying to launch my project, but this error keeps popping up, I can't find any information
Screenshot:
Error message
Babel config
I had the same issue. I fixed it by
removing node_modules
removing deps that were causing the issue from package.json (in my case - react-native-svg)
installing those deps NOT through npm install, but through expo install. The difference is that expo may have some compatibility issues with some libraries and expo install gets the version that it's compatible with as opposed to the latest one
hope this helps :)
cheers
I am using #react-navigation/stack in my expo app and everything has been working fine. I wanted to start to add tab/drawer navigation to my app and keep running into the following 2 errors when I try to import
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'.
and
Attempted import error: 'Appearance' is not exported from 'react-native-web/dist/index'.
The following 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/async-storage": "^1.11.0",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/material-bottom-tabs": "^5.2.16",
"#react-navigation/material-top-tabs": "^5.2.16",
"#react-navigation/native": "^5.7.3",
"#react-navigation/stack": "^5.9.0",
"#reduxjs/toolkit": "^1.4.0",
"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-elements": "^2.2.1",
"react-native-gesture-handler": "~1.6.0",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "~1.9.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-tab-view": "^2.15.1",
"react-native-web": "~0.11.7",
"react-redux": "^7.2.1",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
I've gone as far as creating a whole new expo app the solve this problem-but I still hit a wall once I import the bottom/top tab navigators. Any idea how to solve this?
Downgrade react-native-paper to 4.0.0-alpha.1 solved my issue. It seemed like expo#38.0.0 was incompatible with react-native-paper#^4.0.1.
node_modules\react-native-floating-label-input\src\index.tsx
import Animated, { EasingNode, timing, interpolateColors } from 'react-native-reanimated';
Replace the file with the following and it will be fixed.
import Animated, { Easing as EasingNode, timing, interpolateColors } from 'react-native-reanimated';
I'm new to React natives , i have this issue saying : Invariant Violation: ListView has been removed from React Native.
I'm not even using ListView on my project , i'll share with you 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",
"postinstall": "cp node_modules/#expo/vector-icons/FontAwesome.js node_modules/#expo/vector-icons/Fontisto.js"
},
"dependencies": {
"babel-plugin-inline-import": "^3.0.0",
"expo": "~37.0.3",
"idx": "^2.5.6",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
"react-native-animatable": "^1.3.2",
"react-native-camera": "^2.11.0",
"react-native-country-picker-modal": "^0.7.1",
"react-native-gesture-handler": "^1.6.1",
"react-native-pose": "^0.9.1",
"react-native-reanimated": "^1.7.1",
"react-native-screens": "^2.2.0",
"react-native-tab-view": "^2.10.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7",
"react-navigation": "^3.11.0"
},
"devDependencies": {
"babel-preset-expo": "~8.1.0",
"#babel/core": "^7.8.6",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3"
},
"private": true
}
```
Thank you in advance.
ListView is a default Component.
You may use it in any Component.
It has been replaced by
new list components, such as FlatList or SectionList for bounded memory use, fewer bugs, better performance, an easier to use API, and more features.
You can read over this here:
ListView
I couldn't make Jest snapshot testing work in React native expo app. I am getting all kinds of errors depending on set of node modules and configuration.
Examples are:
* SyntaxError: Unexpected identifier import ... or about import React from another file,
* jest encountered an unexpected token import,
* Errors related to script_transformer .
Here is my package.json
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"lint": "eslint .",
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node_modules/.bin/jest"
},
"dependencies": {
"expo": "^31.0.0",
"moment": "^2.22.2",
"pouchdb-react-native": "^6.4.1",
"prop-types": "^15.6.2",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-easy-toast": "^1.1.0",
"react-native-range-datepicker": "^1.8.2",
"react-navigation": "^2.18.2",
"react-redux": "^5.1.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"babel-plugin-syntax-class-properties": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"eslint": "^5.9.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-react": "^7.11.1",
"jest-expo": "^31.0.0",
"react-test-renderer": "^16.7.0"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(pouchdb-react-native|pouchdb-adapter-asyncstorage))"
]
}
}
Can someone point me to a working Repo of a React-native Expo app with Jest snapshot tests.
jest-expo has better snapshots supoport now,
check https://docs.expo.io/versions/latest/guides/testing-with-jest/#snapshot-test