Locale switching in react-native - react-native

I'm building a react native app that supports both English & Arabic locale, my problem is that user locale is unknown until user log in to my app, my question is how can i switch locale from english to arabic when user is logging to my app without restarting my app.
my code for switching locale is :
I18nManager.forceRTL(!this.state.isRTL);
this.setState({isRTL: !this.state.isRTL});
// problem is that it requires restarting and i think restarting my app when user is logging in isn't a good practice.
anyone have a good solution or a recommendation on how to implement a good solution.

Related

Updating app with new codebase results in blank screen

recently I've rewritten native iOS and Android apps (Swift, Java) to React Native. On testing, everything works fine, but when the application has been published to Appstore and Play Store, many (if not all, only judging by the users that contacted me before rollbacking to previous version) users were on update greeted with black screen. Once removing the app and installing it again, everything worked fine.
I can't really pinpoint any reason why this would happen. Has anyone met with this problem before?
Thanks
I think it is related to stored user data (user preferences).
It seems that you are depending/using the same old users' preferences keys/values which is tricky to pull off.

Is it possible to collect info on why an app you created is crashing?

I have developed an Android app using react native.
When I run on simulator its fine, and also when I debug via USB on real device its fine.
However when I publish to Google Play store and download the app as a regular customer it sometimes crashes.
Are there any logs somewhere that I can refer to in order to identify what the issue is? Or perhaps there is something I can add to code to help identify where/why issue is occuring.
You can use log errors to do so, record the activity of user. When the app crashes, your app can ask the user to send the bug report.
Using that bug report you can understand why your app crashes.
You could also use tools like Sentry or Firebase Crashlytics with an Error Boundary
wrapping your app to report errors, allowing you to have a better understanding of the production errors by displaying the full error stack trace and a lot more.

react-native-webview high vulnerability UXSS

I started a new ReactNative app and tried to use webview for playing Youtube Video
It was ok the last time i used it but this time when i install the package i get a high vulnerability message :
" High Universal XSS in Android WebView"
More info : https://npmjs.com/advisories/1560
My questions :
can we use it despite this message or it will be rejected by the Play Store ?
otherwise do you know how to fix it ?
Or
do you know another way to do it (without using react-native-youtube)
It is good that you are security aware!
Can we use it?
I don't think Google will reject your app. In other words, we launched a few apps using react-native-webview and did not experience any problem when launching on Google Play.
This vulnerability affects React Native apps which use a react-native-webview that allows navigation to arbitrary URLs. I don't think you use the webview that way.
So, yes, I think you can use it.
How to fix it?
As found in the advisory https://npmjs.com/advisories/1560:
Ensure users update their Android WebView system component via the
Google Play Store to 83.0.4103.106 or higher to avoid this UXSS.
'react-native-webview' is working on a mitigation but it could take
some time.
So you have to be patient and wait for a fix. The way you use it is save.

React Native: How to make HTTP request when app is backgrounded?

To simplify my problem: I have an ecommerce app that uses geofencing to detect when to prepare an order:
BackgroundGeolocation.onGeofence(geofence => {
this.props.prepareOrder();
});
The thing is, prepareOrder() makes an HTTP request to my server. I've noticed that it doesn't actually make the request until my app is foregrounded.
Is there a way around this? It is very likely that my app is backgrounded when they enter the geofence and I need to make a request.
======
The more complex version is here: https://github.com/redux-saga/redux-saga/issues/816. I'm using redux-sagas and it doesn't seem like yield call is being called. But I'm not sure if it's a redux-saga thing or something with making HTTP requests in the background.
Same here... It's not a redux-saga problem, it's a more general problem with ReactNative apps working in background: the JS Thread appears to be frozen when app is in background for a long time (especially on iOS when screen is shut down)
the behavior is different between iOS & android, and also depends on OS version. Still, We're building an application that needs constant geolocation in foreground & background, we tried doing it with sagas and we saw it didn't work : we would stop receiving locations after some time. Watching at our logs, we would see that all the ReactNative logs we had would stop too. Hence our wild guess on "maybe the OS stops all the ReactNative context, for energy reasons
So we moved our background code into native :
HTTP POST in a custom RN Native Module when app is in background on iOS
Headless JS on android.
(it seems to be the solution others have chosen too, like https://github.com/mauron85/react-native-background-geolocation)
it works!

How to get crash logs for React Native app?

My React Native App crashed on a tester's phone.
What is the best way to get logs of that crash? I'm using React Native 0.14.2
We just rolled out official support for react native error reporting with Bugsnag this week which reports both JavaScript and native (Java/Cocoa) layer errors to a single dashboard.
Compared to Fabric - Bugsnag adds support for js source maps, ios symbolication, and android proguard mapping - which make a big difference.
Let me know if you have any questions or I can help in any way - I'm a founder.
As #Abhishek has commented, you'll have to use some monitoring tools with crashlytics to get such infomation.
Fabric is a good option in this case. It comes with a crashlytics solution.
Here is a blogpost that explains in-depth on how to set it up for your app.
Here's an excerpt of features of crashlytics tool of Fabric from the blogpost
Crash Reporting —It will record every single crash and its stack trace. This is way better than the iTunes Connect crash reports, which only include the info of users that opted in to share information with developers while setting up a new iPhone. It’s also not updated in real-time (you can read more about this here).
Crash Logs — (A.K.A. CLS_LOG) If you’re familiar with Objective-C, you have probably been using “NSLog” while you’re developing your app. You should use CLS_LOG instead. There’s no difference at all when you’re debugging (whatever you’re logging will still show up in the console) but the cool part is that when a user crashes your app, all the information will be sent to Crashlytics’s servers the next time the user launches your app, including all the content that you’ve logged through CLS_LOG. So if you log information for most of the actions/events in your app, you can read the logs later and reproducing the crash should be simple.
A good crash log framework that reports from the javascript level I've tried recently is Sentry. More descriptive with the actual error, if it comes from he JS side.
I wrote expo-error-log as a free alternative to BugSnag, etc.
Check it out if you like :
https://github.com/marchingband/expo-error-log
https://www.npmjs.com/package/expo-error-log
https://medium.com/#andymarch/free-error-reporting-in-expo-apps-with-expo-error-log-819cab5b6062
It seems like Crashlytics does the error reporting job perfect for a native app made in android/ios.
For a react-native app, however, Bugsnag looks more promising. You can explore both and see which one fits your requirements.