I want to add IAP with Expo for subscriptions (monthly).
I follow this document (https://docs.expo.io/versions/latest/sdk/in-app-purchases/)
I added library with this code yarn add expo-in-app-purchases and there is no issue.
The app crashed when I write import code
import * as InAppPurchases from 'expo-in-app-purchases';
error is blowInvariant Violation: Native module cannot be null.
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": {
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/drawer": "^5.11.4",
"#react-navigation/native": "^5.8.10",
"#react-navigation/stack": "^5.12.8",
"expo": "~40.0.0",
"expo-in-app-purchases": "^9.1.0",
"expo-status-bar": "~1.0.3",
"install": "^0.13.0",
"moment": "^2.29.1",
"npm": "^6.14.10",
"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.9.0",
"react-native-reanimated": "^1.13.2",
"react-native-screens": "^2.16.1",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "~7.9.0"
},
"private": true
}
Do you have any idea for this?
Finally, Is there any demo on snack or github etc.
Thanks for updating the question. It looks to me as you are in an expo managed workflow. In order to make use of Expos IAP you would need to expo eject and configure react native unimodules.
Give some thought before ejecting and research it. However expo makes the process straight forward, however once you've ejected you cant go back.
https://docs.expo.io/expokit/eject/
Actually with eas / expo-dev-client it's possible to add IAP with managed workflow.
I published a medium guide here.
Related
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 created project npx react-native init after creating some UI screens I need to migrate to the expo, I created a new project using expo init I copy all files from old project to the new one but I got this error.
any hint where to start from
./node_modules/react-native/Libraries/Performance/Systrace.js:216:3
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
214 | // with numeric IDs
215 | // TODO(davidaurelio) Scan polyfills for dependencies, too (t9759686)
> 216 | (require: $FlowFixMe).Systrace = Systrace;
| ^
217 | }
218 |
219 | module.exports = Systrace;
packages.json
{
"name": "shiftmanagement",
"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.15.0",
"#react-native-community/datetimepicker": "4.0.0",
"#react-navigation/drawer": "^6.2.0",
"#react-navigation/native": "^6.0.7",
"#react-navigation/stack": "^6.0.11",
"expo": "~44.0.0",
"expo-document-picker": "~10.1.1",
"expo-status-bar": "~1.2.0",
"moment": "^2.29.1",
"native-base": "^3.3.4",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-web": "0.17.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~17.0.21",
"#types/react-native": "~0.64.12",
"typescript": "~4.3.5"
},
"private": true
}
it was not easy to get what cause this issue so I upload my code to https://snack.expo.dev/ which gives me better insight into what was happing
the error come from this import
import { Colors } from "react-native/Libraries/NewAppScreen";
remove it fixed the issue
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.
package.json
{
"main": "node_modules/expo/AppEntry.js",
"homepage": "<My URL>",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"deploy": "gh-pages -d web-build",
"predeploy": "expo build:web"
},
"dependencies": {
"#react-native-community/masked-view": "0.1.6",
"#react-navigation/bottom-tabs": "^5.2.6",
"#react-navigation/drawer": "^5.8.2",
"#react-navigation/native": "^5.1.5",
"#react-navigation/stack": "^5.2.10",
"axios": "^0.19.2",
"expo": "^37.0.11",
"modal-react-native-web": "^0.2.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-actionsheet": "^2.4.2",
"react-native-dialogbox": "^0.6.10",
"react-native-elements": "^1.2.7",
"react-native-image-view": "^2.1.9",
"react-native-modal": "^11.5.6",
"react-native-reanimated": "~1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "~2.2.0",
"react-native-skeleton-content": "^1.0.13",
"react-native-swipeout": "^2.3.6",
"react-native-tab-view": "^2.14.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#expo/webpack-config": "^0.12.11",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
Make sure your package lock or yarn lock don't still include references to older versions of react-native-reanimated
for me react-native-skeleton was still referencing to an old reanimated version.
If anyone is still experiencing this problem, especially after installing react-native-skeleton, all you need to do is to run:
yarn add react-native-reanimated#1.9.0
yarn upgrade react-native-reanimated
worked for me
In my case, I have another package that has a dependency with react-native-reanimated with a specific version.
You need to update react-native-reanimated to that version.
Check this comment by jakub-gonet to Animated node with ID 2 already exists #1072:
This is most likely caused by two instances of reanimated running simultaneously.
check the package.lock file, it has two reanimated plugins, so delete the old version
and also delete the node_modules, then give yarn install or npm install and run the app
Delete the react-native-reanimated fileby
yarn remove react-native-reanimated
This solved my problem
I try to use react navigation but get errors like : Package react-native-gesture-handler has been ignored because it contains invalid configuration. Reason: Cannot find module 'react-native-gesture-handler\package.json'
my json package looks like :
{
"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-navigation/stack": "^5.1.0",
"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.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-safe-area-view": "^1.0.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.2.2"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"#babel/core": "^7.0.0"
},
"private": true
}
Any help would be really appreciated! Thanks
I get this eror every time install a new package. I run yarn install to resolve all dependencies again and it works.