Stable React Native App Suddenly Showing White Screen - ios

An app I have been building for the past month using react native suddenly stopped working and started showing a white screen upon running react-native run-ios. Sometimes the emulator shows a yellowBox that says Possible Unhandled Promise Rejection, but other than that, I cannot see any errors. The issue is happening in both the branch I was working on and the master branch, which was definitely stable at its last commit.
These are the dependencies I have currently:
"axios": "^0.17.1",
"base-64": "^0.1.0",
"firebase": "^4.8.1",
"query-string": "^5.0.1",
"react": "16.0.0",
"react-native": "0.51.0",
"react-native-dotenv": "^0.1.0",
"react-native-linear-gradient": "^2.4.0",
"react-navigation": "^1.0.0-beta.22",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-persist": "^5.4.0",
"redux-thunk": "^2.2.0"
Does anyone have any suggestions for how to overcome this obstacle? Or any tools that would help debug? I really would appreciate any help anyone could provide.
Screenshot of JS Debugger Error

I believe I found the solution. The error was happening with the redux-persist dependency.
In my Redux reducer, I had this case:
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case 'persist/REHYDRATE': {
if (action.payload.auth) {
const { access_token, refresh_token, expiration } = action.payload.auth;
return {
...state,
access_token: access_token,
refresh_token: refresh_token,
expiration: expiration,
};
} return state;
}
// other cases
}
But for some reason, there was no payload to the rehydration (hence the error Cannot read property "Auth" of undefined).
I commented out this case, reloaded my simulator using cmd-R, and everything seemed to work again! I'm not entirely sure why this fixed the problem, so if anyone has any thoughts, definitely feel free to share.

Related

ios App is not showing infoPlist permission string in app store review and got rejected

I am using expo-image-picker in one of my expo managed project (SDK 40). Here is my app.json:
{
"expo": {
"name": "Alpha Soko Classifieds",
"slug": "alphasokoclassifieds",
"version": "1.1",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"backgroundColor": "#ff4500",
"resizeMode": "contain"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.alpha.soko",
"buildNumber": "2",
"infoPlist": {
"NSCameraUsageDescription": "This app uses the camera to capture and upload user profile image and listing image.",
"NSPhotoLibraryUsageDescription": "This app needs access to the photo library to select and upload user profile image and listing image.",
"NSLocationWhenInUseUsageDescription": "This app usages device location on listing information, Listing search Data and User information."
},
"config": {
"googleMapsApiKey": "AIzaSyCCCF3jLaTY******hGASwzod1bPYNi***"
}
},
"web": {
"favicon": "./assets/favicon.png"
},
"android": {
"package": "com.alpha.soko",
"config": {
"googleMaps": {
"apiKey": "AIzaSyCCCF3jLaTY******hGASwzod1bPYNi***"
}
},
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#fff"
},
"permissions": [
"CAMERA",
"CAMERA_ROLL",
"MEDIA_LIBRARY",
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE",
"RECORD_AUDIO",
"READ_PHONE_STATE",
"READ_CONTACTS",
"LOCATION"
],
"versionCode": 2
}
}
}
The standalone build (.ipa) got rejected twice , because it is not showing the text in the permission modal. See the Image apple review team has sent me.
Apple's recommendation is following:
"Please revise the purpose string in your app’s Info.plist file for the photos to explain why your app needs access.
You can modify your app's Info.plist file using the property list editor in Xcode."
I tried with a simulator build and it works well.
I am really confused now . Can Anybody help me with this? What can I do now? Please help.
I had the exact same situation during the same days that you posted this question. Had my app update rejected twice for the same reason, even though I had the proper texts in the Info.plist.
I actually just decided to open an appeal in the conflict resolution center, responding to the rejection by explaining what had happened. I told them there is probably going something wrong in their testing environment, since I'm not the only one who has this problem (I linked to this question on Stackoverflow, so thank you), and told them I can see the messages when I view the app on my device.
Miraculously, they just accepted my update - the exact same build that was rejected previously!
I've found the problem and solved it.
Expo image picker has feature to reduce image quality and crop before "NSPhotoLibraryAddUsageDescription" this permission. I've add this and the problem is gone. Apple approved my app.
Thanks everyone.

Action Cable not working in Safari on IOS

I want to exchange information about action cable in rails 6.0.2.
On my desktop this also works great.
But unfortunately in Safari on my IPhone and IPad (IOS 13.4) the connection to the websocket is not established. Neither the 'connected' nor the 'received' function is called. I have no errors or infos in the Developer Tools console of Safari on my IPhone (connected via cable).
I have all relevant files here again, they are mostly standard generated by rails.
app/javascript/channels/test_channel.js
import consumer from "./consumer"
consumer.subscriptions.create("TestChannel", {
connected() {
console.log("connected")
},
disconnected() {
console.log("disconnected")
},
received(data) {
console.log("received")
}
});
app/javascript/channels/consumer.js
import { createConsumer } from "#rails/actioncable"
export default createConsumer()
app/javascript/channels/index.js
const channels = require.context('.', true, /_channel\.js$/)
channels.keys().forEach(channels)
app/javascript/channels/index.js
const channels = require.context('.', true, /_channel\.js$/)
channels.keys().forEach(channels)
app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
package.json
{
"name": "...",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.2.2",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.3"
}
}
app/channels/test_channel.rb
class TestChannel < ApplicationCable::Channel
def subscribed
stream_from "some_channel"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
ngnix Config (It does not work locally in development either)
....
location /cable {
passenger_app_group_name test_app_action_cable;
passenger_force_max_concurrent_requests_per_process 0;
}
Ok, it was my mistake. In my Safari the experimental features 'NSURLSession WebSocket' was enabled. After I disabled the option, it worked. The option can be found at:
Launch Settings > Scroll down to find Safari, and tap it. > Scroll down to click the Advance option. Then you will see the Experimental Features > Tap it

IOS App Rejection ITMS-90338: Non-public API usage - applicationWillTerminate cordova

Im building an application hybrid application using cordova using the following plugins
"com.lampa.startapp": "0.1.4",
"cordova-android": "8.0.0",
"cordova-ios": "5.0.1",
"cordova-plugin-calendar": "4.6.0",
"cordova-plugin-camera": "4.1.0",
"cordova-plugin-compat": "1.2.0",
"cordova-plugin-device": "1.1.7",
"cordova-plugin-file": "4.3.3",
"cordova-plugin-splashscreen": "4.1.0",
"cordova-plugin-statusbar": "2.4.1",
"cordova-plugin-whitelist": "1.3.3",
"ionic-plugin-keyboard": "2.2.1",
"onesignal-cordova-plugin": "2.2.5",
"cordova-plugin-wkwebview-engine": "^1.2.1"
},
"cordova": {
"plugins": {
"cordova-plugin-camera": {},
"cordova-plugin-device": {},
"cordova-plugin-file": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-calendar": {},
"com.lampa.startapp": {},
"cordova-plugin-wkwebview-engine": {}
},
"platforms": [
"android",
"ios"
]
}
the application got rejected from apple with the following error message.
Dear Developer, We identified one or more issues with a recent
delivery for your app, "AppName" . Please correct the following
issues, then upload again.
ITMS-90338: Non-public API usage - The app references non-public
selectors in Idealys: applicationWillTerminate, ddSetLogLevel:,
localTarget, newSocketQueueForConnectionFromAddress:onSocket:,
setOrientation:animated:, socket:didConnectToHost:port:,
socket:didReadPartialDataOfLength:tag:,
socket:didReceiveTrust:completionHandler:,
socket:didWritePartialDataOfLength:tag:,
socket:shouldTimeoutReadWithTag:elapsed:bytesDone:,
socket:shouldTimeoutWriteWithTag:elapsed:bytesDone:,
socketDidCloseReadStream:, socketDidSecure:, terminateWithSuccess,
webSocket:didReceiveMessage:, webSocketDidOpen:. If method names in
your source code match the private Apple APIs listed above, altering
your method names will help prevent this app from being flagged in
future submissions. In addition, note that one or more of the above
APIs may be located in a static library that was included with your
app. If so, they must be removed. For further information, visit the
Technical Support Information at
http://developer.apple.com/support/technical/ Best regards,
The App Store Team
I think the rejection is caused by a cordova pluggin but i have had a hard time troubleshooting the error.

importing zbar object to page causes ERROR Error: "[object Object]"

I need to implement a feature that is able to read QR-Code, and i've chosen the ZBar plugin to do so. I've already tested this plugin on a separate test app, and it worked just fine.
However, when i try to navigate to the page he plugin is imported, the app just throws the good old ERROR Error: "[object Object]" (seriously whats is that even supposed to mean).
I've figured out that the error is caused because of the import in the constructor (as suggested by the documentation): constructor(private zbar: ZBar) { }
Any ideas on why this happens, or how to solve it?
Edit:
dependencies from my package.json file (#angular and #ionic depdendencies are supressed) for the plugins i'm using.
"dependencies": {
"ajv": "^6.10.0",
"br-mask": "0.0.6",
"cordova-android": "8.0.0",
"cordova-plugin-cszbar": "1.3.4",
"core-js": "^2.5.4",
"jquery": "^3.4.1",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.5.1",
"zone.js": "~0.8.29"
},
"devDependencies": {
"codelyzer": "~4.5.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.1.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.0.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.0.0",
"tslint": "~5.12.0",
"typescript": "~3.1.6"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-cszbar": {}
}
}
Have you also tried the other qr code plugin in this app?
Because they conflict with each other. I was working on a test app experimenting with everything and when I added zbar I had lots of trouble getting it to work.
It turned out they were both trying to include stuff at the same time which conflicted.
Removing all traces of the original plugin fixed it for me.
If not then I would take a look at what other plugins you're using on that page - share some code!

POST requests not working on IOS in Ionic2 App

I'm having an issue with HTTP requests. Everything is working fine in Ionic View, browser and Android, but not working on IOS. GET requests are working fine on IOS also. Any guesses, what can that be?
I can provide you with more information, just tell me what info do you need. Here's what I have in my package.json:
"dependencies": {
"#angular/common": "2.2.1",
"#angular/compiler": "2.2.1",
"#angular/compiler-cli": "2.2.1",
"#angular/core": "2.2.1",
"#angular/forms": "2.2.1",
"#angular/http": "2.2.1",
"#angular/platform-browser": "2.2.1",
"#angular/platform-browser-dynamic": "2.2.1",
"#angular/platform-server": "2.2.1",
"#ionic/cloud-angular": "0.7.0",
"#ionic/storage": "1.1.7",
"#types/moment-timezone": "0.2.32",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"moment": "2.15.1",
"moment-timezone": "0.5.7",
"ng2-translate": "5.0.0",
"rxjs": "^5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "^1.0.0",
"sw-toolbox": "^3.4.0",
"typescript": "2.0.9"
},
The backend receives blank body of a post request. Here's what I get back:
ERROR: {"_body":"{\"error\":\"Sign up error\",\"message\":{\"first_name\":[\"First Name cannot be blank.\"],\"last_name\":[\"Last Name cannot be blank.\"],\"email\":[\"Email cannot be blank.\"],\"device_id\":[\"Device Id cannot be blank.\"]}}","status":422,"ok":false,"statusText":"Bad Request","headers":{"Content-Type":["application/json; charset=UTF-8"],"Pragma":["no-cache"]},"type":2,"url":"http://app.EDITED"}
Feel free to ask anything and thank you for your help!
UPDATE: We moved our backend to HTTPS and now everything is working fine :)
The official answer seems to be here:
https://techcrunch.com/2016/06/14/apple-will-require-https-connections-for-ios-apps-by-the-end-of-2016/
Apple simply decided to enforce the use of HTTPS. I suspect Cordova / Ionic are simply not handling this well at the moment (aka no error is thrown, it's not documented etc.)
Keep in mind that the safari inspector will show that data is being sent to the server - that is not correct all data sent is removed (entire body) in the iOS app (I lost a day on this).
As Dmytro Garastovych mentioned, the correct (and only) solution is to move to HTTPS

Resources