I have recently upgraded my expo-cli to version 2.21.2 and Expo SDK v33 to get support of Background Playback of Audio. However, I'm getting the error while running the code. consider the code snippet attached below,
import { Audio } from 'expo-av';
Audio.setAudioModeAsync({
staysActiveInBackground : true,
playsInSilentModeIOS: true,
interruptionModeIOS: INTERRUPTION_MODE_IOS_DUCK_OTHERS,
shouldDuckAndroid : true,
});
Project Configurations app.json just modified infoPlist in ios,
"infoPlist": {
"UIBackgroundModes": [
"audio"
]
}
Unable to figure out the issue in setup, or in the project?
You probably forgot to add expo-av in your dependencies in package.json :
npm install expo-av
# OR yarn add expo-av
Since SDK 33, expo has released package expo-codemod which intends to transform most of theses kind of changes when upgrading an app.
https://www.npmjs.com/package/expo-codemod
For example, after installation, you could execute something like this to automatically fix new imports and upgrade your package.json accordingly :
npx expo-codemod sdk33-imports ./src
Related
Since I have upgraded to Expo SDK 38, I am getting this error when I start my app. I need to upgrade to SDK38 because Android will not let me publish at any less version.
This was working fine on SDK37, the only thing that I have changed is that I have upgraded all packages using expo upgrade, also there was an error error: unknown option --assetExts so I had to remove this from the app.json, which may be the cause. I changed assetExts to sourceExts which made it compile but maybe this is stopping the fonts working..
"packagerOpts": {
"assetExts": ["otf", "ttf"]
},
I am following the example here of preloading the font in my App.js which is what all other answers that I can find are suggesting to do, but still getting the error.
I have also tried deleting my node_modules, package.json.lock and .expo folders, all which have not helped.
https://docs.expo.io/guides/preloading-and-caching-assets/#pre-loading-and-caching-assets
import { FontAwesome } from "#expo/vector-icons";
function cacheFonts(fonts) {
return fonts.map((font) => Font.loadAsync(font));
}
const fontAssets = cacheFonts([FontAwesome.font]);
await Promise.all([...fontAssets]);
Turns out this was a cache issue, the code was absolutely fine. I thought I had cleared everything but obviously not.
Deleted node_modules, package.json.lock again and npm installed and worked fine.
module.exports = function () {
return {
"presets": ['module:metro-react-native-babel-preset'],
"plugins": [
["transform-inline-environment-variables", {
"include": [
"APP_ENV"
]
}]
]
}
};
This is my babel.config.js for my react-native project, and I'm trying to configure the transform-inline-environment-variables babel plugin. But whenever I run the app the environment variable is always undefined.
I run react-native start --reset-cache to clear the cache and run the project using the command APP_ENV=dev react-native run-ios.
But the variable is still undefined. What am I doing wrong here? The react-native version is 0.60.6
Try logging access directly (rather than destructuring):
console.log(process.env.APP_ENV)
Also, once you have the emulator connected, you can then run start, so:
yarn run-ios
Close the metro bundler terminal window and leave the emulator open
API_ENV=dev yarn start --reset-cache
This issue is covered in detail here.
Better still, replace your implementation with react-native-config.
Even I set updates.enable=false in app.json, still clients getting updated versions from expo server automatically (without deploying apk/ios to store’s).
I set updates.enable=false in version 1.1.7. Clients with version 1.1.7, 1.1.8 and 1.1.9 got 1.2.0 version automatically without putting new version (1.2.0) into store(s).
I’m using expo build:android and expo build:ios commands for build.
Could anyone can help me about this problem? Is there any way to prevent update on code level?
You can find my app.json content below:
{
“expo”: {
“name”: “XXX”,
“slug”: “XXX”,
“privacy”: “public”,
“sdkVersion”: “31.0.0”,
“platforms”: [
“ios”,
“android”
],
“version”: “1.2.0”,
“orientation”: “portrait”,
“icon”: “./assets/icon.png”,
“splash”: {
“image”: “./assets/icon.png”,
“resizeMode”: “contain”,
“backgroundColor”: “#FFCB09”
},
“notification”: {
“icon”: “./assets/icon96gs.png”,
“color”: “#ffcd00”,
“androidMode”: “collapse”,
“androidCollapsedTitle”: “XXX”
},
“updates”: {
“enabled”:false
},
“assetBundlePatterns”: [
“**/*”
],
“android”:{
“package”:“com.xxx.yyy”,
“permissions” : [“CAMERA”, “LOCATION_HARDWARE”,“ACCESS_COARSE_LOCATION”,“ACCESS_FINE_LOCATION”],
“versionCode”: 17
},
“ios”: {
“bundleIdentifier”: “com.xxx.yyyt”,
“buildNumber” : “17”
},
“scheme” : “xxx”
}
}
you should upload your app in apple store and google play store. only after that updates will be switched off.
Because you created a stand-alone app with Expokit, the commands in the setup do not apply.
You have to set up your own settings in Android Studio and xcode.
"updates"
Configuration for how and when the app should request OTA JavaScript updates
{
"updates": {
/*
If set to false, your standalone app will never download any code.
And will only use code bundled locally on the device.
In that case, all updates to your app must be submitted through Apple review.
Defaults to true.
Note that this will not work out of the box with ExpoKit projects.
*/
"enabled": BOOLEAN,
...
}
ExpoKit: To change the value of enabled, edit ios//Supporting/EXShell.plist and android/app/src/main/java/host/exp/exponent/generated/AppConstants.java. All other properties are set at runtime.
After upgrading expo from: SDK 26 to SDK 32, I have the following issue when I use expo run emulator or expo app:
/Users/name user/project name/node_modules/expo/AppEntry.js: Cannot read property ‘1’ of undefined
AppEntry.js:
import { KeepAwake, registerRootComponent } from 'expo';
import App from '../../App';
if (__DEV__) {
KeepAwake.activate();
}
registerRootComponent(App);
package.json:
{
“main”: “node_modules/expo/AppEntry.js”,
“private”: true,
“scripts”: {
“test”: “node ./node_modules/jest/bin/jest.js --watchAll”
},
“jest”: {
“preset”: “jest-expo”
},
“dependencies”: {
“#expo/samples”: “2.1.1”,
“babel-preset-expo”: “^5.1.1”,
“expo”: “^32.0.0”,
“npm”: “^4.6.1”,
“react”: “16.5.0”,
“react-native”: “https://github.com/expo/react-
native/archive/sdk- 32.0.0.tar.gz”,
“react-native-animatable”: “^1.2.4”,
“react-native-device-info”: “^0.21.5”,
“react-native-drawer”: “^2.5.0”,
“react-native-drawer-menu”: “^0.2.5”,
“react-native-elements”: “^0.19.1”,
“react-native-fetch-polyfill”: “^1.1.2”,
“react-native-geocoder”: “^0.5.0”,
“react-native-geocoding”: “^0.3.0”,
“react-native-google-maps-directions”: “^2.0.0”,
“react-native-keyboard-spacer”: “^0.4.1”,
“react-native-maps”: “^0.21.0”,
“react-native-masked-text”: “^1.6.5”,
“react-native-qrcode-svg”: “^5.1.1”,
“react-native-select-input-ios”: “^1.2.0”,
“react-native-swipeable”: “^0.6.0”,
“react-native-swiper”: “^1.5.13”,
“react-native-touch-id”: “^4.0.4”,
“react-native-vector-icons”: “^4.6.0”,
“react-navigation”: “^3.0.9”
},
“devDependencies”: {
“#babel/core”: “^7.4.3”,
“#babel/preset-env”: “^7.0.0-beta.47”,
“gulp-babel”: “^7.0.1”,
“jest-expo”: “^32.0.0”
}
}
EDIT:
After adjusting at the suggestion, I'm getting this error:
Users/user name/project name/App.js: Cannot read property 'filename' of undefined
Any ideas on potential solutions to try? Any help would be greatly appreciated!
Looking at the issue log for expo, I see someone else had a similar issue when updating from:
SDK version 30 to SDK version 31
and the issue was related to their babel configuration. Perhaps you're dealing with the same issue, maybe you could try the solution they suggested and see if that resolves your issue as well since you're updating from SDK version 26.
Here is what they suggested:
Install the latest version of babel-plugin-module-resolver:
npm i --save-dev babel-plugin-module-resolver#latest
alternatively:
yarn add babel-plugin-module-resolver#latest
Additionally, others had to change their .babelrc contents to use the "babel-preset-expo" preset:
.babelrc
{
"presets": ["babel-preset-expo"]
}
Hopefully that helps!
I have followed the steps outlined in the VS Code documentation for getting Intellisense working for React Native by installing typings for React Native. Now, what do I need to do to get autocomplete working? For instance, if I type <Text>, I would like to see an automatic closing of that tag. What am I missing here? This seems like it shuld work out of the box.
To enable IntelliSense (autocomplete) you have to install the official React Native Tools extension.
Installation
Open Command Palette by pressing F1, type ext install and press Enter, then look for React Native Tools extension.
Create a jsconfig.json file
You should create a jsconfig.json file in you root directory. It can be empty but must be present. The presence of such a file in a directory indicates that the directory is the root of a JavaScript project.
(Optional)
The file itself can optionally list the files belonging to the project, the files to be excluded from the project, as well as compiler options.
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
You can find more at https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson
Create a .babelrc file for ReactNative Packger transformer (optional, if you want to use TypeScript)
You should create a .babelrc file with sourceMaps = true and "presets": [ "react-native" ] for better source-mapping support. (required if you want TypeScript support).
{
"presets": [
"react-native" // this is required for debugging with react-native/packager/transformer
],
"plugins": [],
"sourceMaps": true // must be true react-native/packager/transformer using with node-module-debug
// because of some bugs from vscode-node-debug & vscode-react-native, "sourceMaps" cannot be "inline" or "both"
}
Install typings for React Native (optional)
To get IntelliSense for React Native, run npm install typings -g and then typings install dt~react-native --global in your terminal.
Hope this helps!!
React Native Tools in VSCode can't help you close the Tag after you typed<Text>,you can try to install Auto Close Tag and Auto Rename Tag
In my case, I have to copy jsconfig.json to tsconfig.json, close Visual Code and reopen it. Then it works properly.
jsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
I am also not getting any IntelliSense and also package auto-import is not working. Since I am not using Typescript, deleting the tsconfig.json helped me.
Take backup of your tsconfig.json file first
In my case, I've already installed many react-native extensions for autoSuggestion and another helper extension, e.g. "React Native Tools", and "React-Native/React/Redux snippets for es6/es7"
Issues:
autoSuggestion keywords not coming while typing.
command(in IOS) + click not letting me to jump on the target files.
Recently I have seen in VS Code editor for new React-native applications autoSuggestion not working.
Steps I have followed to solve:
Go to Extensions
Search for React or React-native
Remove the installed extension
Reload it.