Error trying to run bare React Native app with gesture handler - android

Background
Hey everyone, I'm building my first React Native app without Expo. I'm trying to use #react-navigation/bottom-tabs, I've followed the instructions provided in the docs every step of the way. I'm then trying to add react-native-appearance to handle dark mode preference from device. However, from here on out things get tricky when I try to run the app using an Android emulator.
Problem
ERROR react-native-gesture-handler module was not found. Make sure
you're running your app on the native platform and your code is linked
properly (cd ios && pod install && cd ..).
And that is followed by a number of variations of this error message:
TypeError: null is not an object (evaluating
'_$$_REQUIRE(_dependencyMap[8],
"./NativeAppearance").NativeAppearance.initialPreferences')
What I've tried
As I've mentioned earlier, I've referred to the Navigation docs, but also to all the following:
Gesture handler docs I've exhausted all options here, from the basic stuff to manual linking.
Gestutre handler github issue 671
All options from Appearance docs
How you can help me
I would really appreaciate if someone could let me know how to solve this issue, I imagine it has to do with compatibility with Appearance, so I'll be checking that out while I wait for an answer.
Thanks a lot in advance!

Related

Expo only working on web and fails on Android with multiple issues

My project is mainly based on this boilerplate. To not get into trouble with the deployments later on, I'm using expo.
Now I'm just wondering why the deployment to Android is not working. When I deploy it to web it works great without any trouble. But doing gives me and this on the Android Emulator:
But the project structure is clean and that index.css is working properly
What is the difference between a Run in web and Run on android?
Also when I just remove that index.css for testing. Web still works but without styles. But on Android I now get another error on my used localstorage.
I know there is a difference between react-native and react-web. But I was thinking that expo is able to handle this. Maybe I was expecting too much from expo? So am I wrong with that and all is fine. And all I have to do is making it work on Android, like fixing the index.css issue and the localstorage? Or is there a smarter way to get my obviously react-web application to work on my Android device?
So react-native and react-native-web are very different.
react-native - using native UI controls and have full access to the native platform
react-native-web - brings the platform-agnostic Components and APIs of React Native to the Web
While it is possible to use react-native-web for web and native like Android, it is not recommended. You always have to do workarounds like with the localstorage.
It is better to completely switch to react-native and rewrite all the code to be working in the native way. Like instead of using an index.css you now have to create the Stylesheet in the code directly.
But for the case someone really wants to use the boilerplate from the question you need to refactor the code. This is described here.
But in short you need a helper App.js like this one:
// /App.js
import React from 'react';
import HybridApp from './src/App';
const App = (props) => {
return (
<HybridApp />
);
}
export default App;

Chrome devtools blank page when inspecting mobile app

I am developing mobile app(in Ionic4), but I am not able to inspect it and debug it in chrome devtools. When I go to Chrome/inspect the device with running app appears in the list, but when I click on inspect, only blank page opens, it looks like this:
device page
blank inspect page
When i hit Ctrl+Shift+I blank page reopens, and i can look into the console, there are some errors:
Uncaught TypeError: Cannot read property 'appendChild' of null
at installExtraStyleRules (devtools_compatibility.js:1484)
at installBackwardsCompatibility (devtools_compatibility.js:1457)
at devtools_compatibility.js:1504
at devtools_compatibility.js:1506
Uncaught TypeError: Cannot redefine property: keyIdentifier
at Function.defineProperty (<anonymous>)
at installBackwardsCompatibility (devtools_compatibility.js:1381)
at devtools_compatibility.js:1504
at devtools_compatibility.js:1506
[Deprecation] Application Cache was previously restricted to secure origins only from M70 on but now secure origin use is deprecated and will be removed in M82. Please shift your use case over to Service Workers.
Uncaught TypeError: Object.observe is not a function
at WebInspector.Main._createSettings (inspector.js:10380)
at WebInspector.Main._gotPreferences (inspector.js:10372)
at DevToolsAPIImpl.embedderMessageAck (devtools_compatibility.js:43)
at <anonymous>:1:13
Any ideas where is the problem? It happens only on this type of device, on other devices, it works great.
I have a little experience with Ionic. Not a big fan, since this is the start of the bugs you will face. You have to be a professional expert Javascript programmer to understand every bit of the code Ionic uses to compile (to debug and find problems). And even then I find it hard to find some errors too.
My advice is to switch to React Native with the Typescript template. Since Typescript gives you the best linting, help with errors and compiling. I have built multiple apps using Ionic, all far less advanced and beautiful then my React Native work. As well as other programmers to understand you're code, it's better to use Typescript with generics, interfaces, classes and such... If you have any other questions, post them below and I edit this post.

fastlane screengrab and snapshot

I'm using fastlane tools (https://fastlane.tools) for automating all screenshots for my iOS and Android apps. The tool works very well and I'm happy with it. The problem i'm having is that when I have mixpanel events and other analytics running on the app the app will run those events during screenshots. Is there a way to "detect" in code that it's a screenshot event with simulators?
Basically, I want some sort of if statement but not sure how to tell its from fastlane. I have thoroughly read through the documentation and wasn't able to find anything for this, any help is appreciated!
My current solution involves simply checking if the user is running on a simulator or is running in debug mode. In which case, it doesn't perform the code I want to filter out.

Android Cordova 5.0+ Camera crash

We are using Cordova 5.0.0 and its cordova-camera-plugin
When we are testing it on Android, the app crashes when the user takes a photo.
Looking at the links below, it seems that our app is being killed while the camera app it on front.
PhoneGap camera restarts the application
https://github.com/shaithana/cordova-plugin-wezka-nativecamera
While there are some answers but it seems to be outdated: The foreground camera plugin is not suitable to newer devices or Cordova and other solutions didn't work for us
Does anyone have an up-to-date solution?
Try to use this forked cordova-android and cordova-plugin-camera.
The docs, sample and discussion on the approach used can be found in the cordova-android PR.
BTW, the PRs are going to be merged soon.
First question that comes to my mind is: Why using this camera plugin: https://github.com/shaithana/cordova-plugin-wezka-nativecamera
It's obviously a fork. You might have a good reason for that. It's also outdated. Last contribution was one year ago.
Maybe you want to give the "official" plugin a shot:
https://github.com/apache/cordova-plugin-camera
Going deeper into detail without knowing more about your testing environment (which device(s) with which Android version) and without having possibility to review entire related code, is not possible and answers may not give any reliable advice for change.
Have you ensured, that the call to the camera plugin cannot happen before "deviceready" was triggered? Is cordova.js loaded?
Update:
You may also want to switch from raw alerts to console output. I recognized several times that alerts in callbacks triggered from plugins could cause some trouble.
As a general rule of thumb: Use console.log() instead of alert() and connect with Chrome (chrome://inspect) to the emulator or device to see what happens. You can additionally use adb logcat to have a look into the device log.

How to debug widget applications in Xamarin studio?

I'm experimenting with Simple widget application in Xamarin studio and would like to know how to debug it. Trying regular 'Run -> Start Debugging' (F5) produces
Application does not contain a launchable activity
As far as I understand ActivityAttribute.MainLauncher property is designed specifically for this purpose but there is no activity to apply it to in the example I'm playing with.
p.s.
Is there something similar to 'Attach to process' feature?
It seems that there is still no simple solution other than embedding your widget into a self created activity just for the debugging purposes. The last post from the Xamarin team I've found is here.
I've tried a few approaches with an empty activity and trying to trick the debugger - but failed.

Categories

Resources