I'm having an error while using the ExpoPermission interface. I just started to learn about Android development with React and Expo, followed a guide to create a new project
npm install -g create-react-native-app
create-react-native-app my-app
cd my-app/
npm start
Everything worked, and the example run on my phone, then i just added a simple button that calls the example from the expo documentation, but it launches this message when i press it.
[Error: Encountered an exception while calling native method: Exception occurred while executing exported method askAsync on module ExpoPermissions: null]
My code is simple, just added to the view
<TouchableOpacity onPress={handlePressMe} style={styles.helpLink}>
<Text style={styles.LinkBlue}>
Press me!
</Text>
</TouchableOpacity>
Then added the code:
function handlePressMe() {
request_storage_runtime_permission();
}
async function request_storage_runtime_permission() {
try {
const granted = await Permissions.askAsync(Permissions.WRITE_EXTERNAL_STORAGE);
print(granted)
Alert.alert("Storage Permission received.");
/*if (granted === PermissionsAndroid.RESULTS.GRANTED) {
Alert.alert("Storage Permission Granted.");
}
else {
Alert.alert("Storage Permission Not Granted");
}*/
} catch (err) {
console.warn(err)
}
}
And import * as Permissions from 'expo-permissions';
I've read the documentation of Expo, and found many installs that said to do for this library, but none has changed anything, just in case, both things i've added
sudo expo install expo-permissions
sudo yarn add react-native-unimodules
Also to note that i added the permission to app.json, and tried to use getAsync to see if it had been granted, but launched the same error, this is my app.json:
{
"expo": {
"name": "Test App",
"slug": "testApp",
"privacy": "public",
"sdkVersion": "35.0.0",
"platforms": [
"android",
"web"
],
"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": [
"**/*"
],
"android": {
"permissions": [
"WRITE_EXTERNAL_STORAGE"
]
}
}
}
Tried searching for more info, but only thing i found are unanswered topics. Does anyone knows what is the problem, or how to prompt more info? Only thing it shows is null.
After trying to do it directly with React Native, i found the problem here:
Expo uses it's own way to name permissions, so if you want to request for WRITE_EXTERNAL_STORAGE, while on RN you would call exactly for this permission, on Expo you need to ask for CAMERA_ROLL permission instead, which includes both Write and Read permissions. The error message is little intuitive, since it only marks null, while trying to say that you're sending a null as parameter due to the
permission that you are requesting (Permissions.WRITE_EXTERNAL_STORAGE) returning null. So the solution was to change it to:
const granted = await Permissions.askAsync(Permissions.CAMERA_ROLL);
Hope this helps someone on the future.
Related
I'm trying to implement expo push notification ! I did everything as the docs say.
Created a firebase project and downloaded the google-services.json and uploaded the server key on the cloud messaging to expo servers using expo push:android:upload --api-key <your-token-here> ! so basically I did everything mentioned on their docs! My notifications works perfectly fine when I test it on the Expo GO ! but after I built an apk using eas build -p android --profile preview
The notification doesn't pop up! the api that I send from says that the notification was sent but it doesn't show on the device!
I read that notifications work on expo go and not apk because of the credentials! did I miss a step or something?
When I go to the expo builds and go to the project credentials Two options pop up, One by the path of com.company.app and the other one : by Legacy ( classic build)!
app.json
{
"expo": {
"name": "myapp",
"slug": "myapp",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true
},
"android": {
"googleServicesFile": "./google-services.json",
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"package": "com.hyrix.myapp",
"useNextNotificationsApi": true
},
"web": {
"favicon": "./assets/favicon.png"
},
"extra": {
"eas": {
"projectId": "ee001501-c3b5-402f-8a1d-914144496965"
}
}
}
}
You could check the Android Studios's logcat after connect your android smartphone to your PC.
I've tried to debug the app in Android Studio's logcat and got the following error message:
'[expo-notifications] Error encountered while updating the device push token with the server:', '{"errors":[{"code":"VALIDATION_ERROR","message":"\"appId\" must be a string.","isTransient":false}]}'
What I did to solve this issue was set "applicationId" manually in the Notifications.getExpoPushTokenAsync() method. Ex:
Notifications.getExpoPushTokenAsync({applicationId: "xxxxxx..."})
The applicationId can be found in app's firebase config as appId.
The method getExpoPushTokenAsync() can receive some parameters, maybe some of them are not being set correctly.
My app contains a plugin for maps and it doesn't require user location permission. However, Google Play rejected it because my app isn't compliant with the Location permissions policy.
The following is the code I write, which doesn't require user location.
import MapView from 'react-native-maps';
<MapView region={this.state.mapRegion}>
<MapView.Marker coordinate={this.state.marker} />
</MapView>
Is there anyone who can provide advice? Thank you.
Please add permissions=[] in your App.json (in android) and try again.
"android": {
"permissions": [],
"package": "com.xxxxxx.xxxxx"
}
You can set app permission required in app.json
If permission is not defined in app.json, the default permission will include all except ACCESS_BACKGROUND_LOCATION
{
"android": {
"package": "xxx.yyy.zzz"
}
}
If an empty array is provided, only these permissions will be included:
• receive data from Internet (fetch)
• view network connections (expo-network)
• full network access (expo-network/fetch)
• change your audio settings (expo-av)
• prevent device from sleeping (expo-keep-awake)
{
"android": {
"package": "xxx.yyy.zzz",
"permissions": []
}
}
If you don't want to include all permissions, you can customize in the permissions field
{
"android": {
"package": "xxx.yyy.zzz",
"permissions": [
"CAMERA",
"RECORD_AUDIO",
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE"
]
}
}
ref: https://docs.expo.io/versions/latest/config/app/#permissions
I am building an apk for my application which is built by react native using expo
I use expo build:android command in the terminal and after this I got a prompt to choose from:
? Would you like to upload a keystore or have us generate one for you?
If you don't know what this means, let us handle it! :)
so i choosed that expo will handle it and I got the following steps
Publishing to channel 'default'...
Building iOS bundle
Building Android bundle
Analyzing assets
Uploading assets
Uploading \assets\alert.mp3
Uploading \assets\images\splash.png
Uploading \assets\images\icon.png
and then I got the follwing error
read ECONNRESET
Set EXPO_DEBUG=true in your env to view the stack trace.
I also updated expo-cli to the latest version!
and here is my app.json if it helps
{
"expo": {
"name": "app name",
"slug": "app-name",
"platforms": [
"android"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"android": {
"package": "com.el3ameed.appname",
"versionCode": 1,
"adaptiveIcon": {
"foregroundImage": "./assets/images/icon.png",
"backgroundColor": "#171717"
}
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"bundleIdentifier": "com.el3ameed.appname",
"buildNumber": "1.0.0"
},
"description": ""
}
}
I assume you're on Windows because I faced the exact same issue.
So first verify that you've followed the instructions given here:
https://docs.expo.io/versions/latest/distribution/building-standalone-apps/
Especially regarding installing Ubuntu and enabling WSL (in that order).
I was getting this error even after following the instructions so what worked for me was disabling my Windows Firewall. After that it worked like a charm.
Also as a last resort try using a VPN as that worked for me aswell.
I am trying to compile a 'kitchen-sink' demo, for 'react-native':
NativeBase-KitchenSink
, and I have followed the following links already:
Solution to "React native: Android project not found. Maybe run react-native android first?"
Solution to "Expo : Cannot find a module LogReporter"
That is, from the installation of 'npm' till the installation of required tools using 'Yarn'.
And now I am stuck myself:
a. I run the command npm install in the 'root directory' of this project.
b. Then I run expo start, I see that the problems addressed in link 1 and 2 have gone away.
c. Then when the browser is up, I issue expo build:android
The following error shows up:
[11:14:44] Checking if current build exists...
[11:14:48] No currently active or previous builds for this project.
[11:14:50] Publishing to channel 'default'...
[11:14:56] Building iOS bundle
[11:15:09] Building Android bundle
[11:15:20] Analyzing assets
[11:15:27] Uploading assets
[11:15:27] No assets to upload, skipped.
[11:15:27] Processing asset bundle patterns:
[11:15:27] - D:\Projects\ReactNativeProjects\AwesomeProject\**\*
[11:15:27] Cannot read property 'forEach' of undefined
[11:15:27] TypeError: Cannot read property 'forEach' of undefined
at C:\xdl#51.4.0\src\Project.js:903:26
at Generator.next (<anonymous>)
at step (C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:191)
at C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:361
Please help me know where I am wrong? Some posts say the code is correct.
[EDIT]:
I also did a new thing in my 'app.json', just before executing command react-native eject, to create Android and iOS folders:
(Note: It is not mandatory to issue the react-native eject command, as this will cause permanent change according to the documentations)
{
"expo": {
"name": "AwesomeProject",
"description": "A Kitchen Sink project.",
"slug": "AwesomeProject",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": [
"ios",
"android"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.abhsax.first"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/logo.png",
"splash": {
"image": "./assets/splashscreen.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
]
},
"changes": "----below are the changes----",
"name": "AwesomeProject",
"displayName": "AwesomeProject"
}
That is, just when I added:
"name": "AwesomeProject",
"displayName": "AwesomeProject"
at the bottom of my 'app.json'
the command react-native eject started working, which was not working earlier, as the output was:
App name must be defined in the app.json config file to define the
project name. It must not contain any spaces or dashes.
Clearly, it is the hybrid of two different versions of the package managers: 'Expo' and 'npm'.
But the 'forEach' error in the concern here, did not go away.
Further efforts done were useless, so I am not putting them here.
I shall keep on trying until I figure it out.
you have to upgrade the expo cli version
do npm install -g expo-cli
and then expo start again
I resolved this by knowing that I was again mixing up with the package managers: 'npm' and 'yarn', and this time you do not need 'expo' for time being or all-together, so modify your 'app.json', removing expo section.
All I had to do was to issue the following commands in order.
Add React Base
yarn add react-base --save
Install Peer Dependencies
The peer dependencies included from any 'npm' packages does not automatically get installed. Your application will not depend on it explicitly.
react-native link
In the case of this demo project, one dependency was missing:
react-native link react-native-vector-icons
Start Yarn
yarn start
Run on android device or simulator.
react-native run-android
[Note:] Java 8 is recommended to be installed instead of higher versions of Java. see: What to install? Java 8 or Java 10
I wish it helps.
Happy coding :-)
Try changing:
"assetBundlePatterns": ["**/*"] to "assetBundlePatterns": ["assets/*"]
in your app.json file.
I've built an App with react-native and expo. Installed it on my Android-TV and my Android-TV emulator.
The app works when I run it through the ES File Explorer app, however when I try to run it regularly by clicking it on the Android-TV app section I get a constant white screen.
Built the apk with expo through $exp build:android.
App.json code:
{
"expo": {
"name": "CommuniTV",
"description": "The future of watching TV is here!",
"slug": "CommuniTV",
"privacy": "public",
"sdkVersion": "26.0.0",
"platforms": ["ios", "android"],
"version": "1.0.4",
"orientation": "landscape",
"entryPoint": "./App.js",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "project.communiTV.com",
"versionCode": 104,
"permissions": [],
"icon": "./AppIcon.png",
"adaptiveIcon": {
"foregroundImage": "./launcherIcon.png" // size is 1024x1024
}
}
}
}
Couldn't find any solution on the web and I'm stuck.
Any suggestions?
First screenshot - I click here I get a white screen
Second screenshot - I'll start it from here the App works fine
After spending some time looking at the native code I managed to solve this issue by adding the proper configuration to app.json:
"android": {
...
"intentFilters": [
{
"action": "MAIN",
"category": [
"LEANBACK_LAUNCHER"
]
}
]
},
More detailed answer can be found here: https://gist.github.com/miazga/2e6449e0c591e3ac8e22185b2edb447d
As recommended in this thread, Go to File -> Setting -> Build,Execution,Deployment -> Instant Run then uncheck the Enable Instant Run if it is checked, then run the project.
Also from this link, when your app starts, it first uses the theme of the launching activity to display the window background. If you don't specify windowBackground in your styles.xml, the default white will be used, and damage the UX.
Matt's answer seems to be oudated as of now, its throwing build time error while reading manifest.
TypeError: Cannot convert undefined or null to object
at Function.entries (<anonymous>)
at renderIntentFilterDatumEntries (/app/turtle/node_modules/#expo/xdl/build/detach/AndroidIntentFilters.js:33:17)
at /app/turtle/node_modules/#expo/xdl/build/detach/AndroidIntentFilters.js:37:70
at Array.map (<anonymous>)
at renderIntentFilterData (/app/turtle/node_modules/#expo/xdl/build/detach/AndroidIntentFilters.js:37:48)
at /app/turtle/node_modules/#expo/xdl/build/detach/AndroidIntentFilters.js:25:9
at Array.map (<anonymous>)
at renderIntentFilters (/app/turtle/node_modules/#expo/xdl/build/detach/AndroidIntentFilters.js:22:24)
at runShellAppModificationsAsync (/app/turtle/node_modules/#expo/xdl/build/detach/AndroidShellApp.js:632:115)
at async Object.createAndroidShellAppAsync (/app/turtle/node_modules/#expo/xdl/build/detach/AndroidShellApp.js:392:3)
at async runShellAppBuilder (/app/turtle/build/builders/android.js:95:9)
at async Object.buildAndroid [as android] (/app/turtle/build/builders/android.js:43:28)
at async build (/app/turtle/build/jobManager.js:181:33)
at async processJob (/app/turtle/build/jobManager.js:118:32)
at async Object.doJob (/app/turtle/build/jobManager.js:49:5)
at async main (/app/turtle/build/server.js:66:13)
I updated it with data property, now seems to work fine, tested on expo 39 & 40
Also note that you have to include "LAUNCHER" too in category or else some devices may still show white screen.
"intentFilters": [
{
"action": "MAIN",
"data":{},
"category": [
"LEANBACK_LAUNCHER",
"LAUNCHER"
]
}
]