Where can I find my MainActivity.java when running a Android simulator - react-native

I just mad my first React native project and I'm trying to lock my screen orientation to landscape. I installed this package
https://github.com/yamill/react-native-orientation#configuration
with npm install react-native link react-native-orientation and now I need to
Implement onConfigurationChanged method in MainActivity.java
So this code
import android.content.Intent; // <--- import
import android.content.res.Configuration; // <--- import
public class MainActivity extends ReactActivity {
......
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
Intent intent = new Intent("onConfigurationChanged");
intent.putExtra("newConfig", newConfig);
this.sendBroadcast(intent);
}
......
}
But where can I find that? From what I've seen is that you can find it in a android studio project. But I don't have a project, I just go to the AVD manager to run my virtual device. So where am I supposed to add this code?

The whole aim of expo is to handle everything related to android or ios for you.
Thus, you won't have access to these two folders unless you eject your app from expo as it's explained here on the official doc.
However, if your goal is to handle screen orientation, expo has a built-in API for you that you may find here.
Or even simpler, you could just update your app.json and add this line:
"expo": {
...
"orientation": "landscape"
...
}
Have a look at the official doc if you want to see everything that you can handle with this configuration file.

Related

Segment trackEvent doesn't work right after CodePush update installs

Our React Native project has both Segment and CodePush integrated.
Segment works fine, normally.
But there's a scenario where Segment stops working right after a CodePush update has been installed. Nothing gets flushed out and none of the events are shown in the Live Debugger list - except for events that are tracked in the native layer (eg: "Application Opened" and "Application Backgrounded" - only these show up).
So I assumed that any Segment call in the RN - Javascript layer only stops working after the app restarts the bundle (by CodePush).
The user should close and kill the app and reopen the app for it to work normally again.
Happens to both iOS and Android (when installed from the store).
And weirdly enough, I cannot recreate the issue on Android when I run a debug or release build directly to my Android phone from my machine (it just works 🤷‍♂️). Same goes for iOS simulators.
Any ideas or workarounds on this?
This is how the setup looks like:
import React, { Component } from "react";
import CodePush from "react-native-code-push";
import segment from "#segment/analytics-react-native";
...
class App extends Component {
constructor(props) {
super(props);
this.setupSegment();
}
private setupSegment(): void {
segment.setup("<Segment Write Key>", {
debug: true,
trackAppLifecycleEvents: true,
ios: {
trackAdvertising: true
}
});
}
...
}
export default CodePush({
installMode: CodePush.InstallMode.IMMEDIATE,
checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
updateDialog: null
})(App);
react-native: 0.61.5
react-native-code-push: 6.1.0
#segment/analytics-react-native: 1.1.1-beta.2 (also tried 1.1.1-beta.5)

setting up gradle plugin with DefaultTask to instantiate a class that renders react-native

I am trying to build a module with gradle that starts up a react-native app in a native app. Im following a guide that explains that a class extending from DefaultTask is responsible for the root behavior of the plugin. Going off of that, I want to do something with a file like this. start react app class . Am I on the right track?
public class DemoTask extends DefaultTask {
#TaskAction
public void renderRNSDK() {
}
}

Why Android App showing blank screen when coming out of an App with back button React Native Navigation?

I am working on React Native Application and integrated react-native-navigation package for navigation inside app, link of package
Android App got stuck and show blank screen. This happens if I am closing app using back button in case of Android app. At the end I have a listing screen, after reopen the application it shows blank screen because it's not calling Navigation.registerComponent again, it might be destroying app when closed using back button.
This is a code inside my index.js::
import { Navigation } from "react-native-navigation";
import App from './src/app';
Navigation.registerComponent("appName", () => App);
Killing the app and restarting would fix the stuck on splash screen issue. But shouldn't be stuck in the first place. Just an issue when closing through back button.
Does anyone have a fix for this? Please suggest how can I handle and call my Navigation.registerComponent once again after closing app using back button.
Environment
React Native Navigation version: 2.12.0
React Native version: 0.58
Platform(s) : Android only
To resolve this you need to make modification inside react-native-navigation package. Open NavigationActivity.java file and replace below code with new one:
Replace this code:
#Override
public void invokeDefaultOnBackPressed() {
if (!navigator.handleBack(new CommandListenerAdapter())) {
super.onBackPressed();
}
}
With this one:
#Override
public void invokeDefaultOnBackPressed() {
if (!navigator.handleBack(new CommandListenerAdapter())) {
this.moveTaskToBack(true);
//super.onBackPressed();
}
}
After saving your changes check on android device.

How can i check app installed in react native code

i tried to check other app install in my react native project, I'm used module like: https://www.npmjs.com/package/react-native-check-app-install
But always got this error:
Cannot read property 'pkgName' of undefined
Here is my code:
AppInstalledChecker
.isAppInstalledAndroid('com.skype.raider')
.then((isInstalled) => {
// isInstalled is true if the app is installed or false if not
console.log('App Skype status: ', isInstalled);
});
Anyone can suggest me one way so check app install in react native (both: iOS/android)
install this
https://github.com/KjellConnelly/react-native-shared-group-preferences
and
async check() {
try {
await SharedGroupPreferences.isAppInstalledAndroid("com.farsitel.bazaar")
// IF IS INSTALL
} catch (e) {
// IF IS NOT INSTALL
}
}
Google Play considers the list of installed apps to be personal and sensitive user data.
As we are using
AppInstalledChecker
.isAppInstalledAndroid()
method for checking app installed check, for that we have to white-list the queries in manifest.xml
Reference : https://developer.android.com/training/package-visibility
<queries>
<package android:name="com.instagram.android"/>
…
</queries>
For adding Queries need to upgrade build gradle version:
new default settings and features for package visibility in Android 11 that need to add  you must update your android gradle plugin version
Reference: How to fix "unexpected element <queries> found in <manifest>" error?
I have updated from 3.5.2 to 4.0.2
Now react-native-check-app-install module working as expected
Hope this is resolved!
Android
I. For app's which has deep links like 'waze://', 'mapsme://' you can use:
import { Linking } from 'react-native'
...
Linking.canOpenURL('waze://ul?ll=${latitude},${longitude}&navigate=yes')
OR
II. You can use for absolutely all apps (for example with deep links like "https://...")
https://github.com/KjellConnelly/react-native-shared-group-preferences
iOS
import { Linking } from 'react-native'
...
Linking.canOpenURL(iOS_app_URL_Scheme)
...
where iOS_app_URL_Scheme you can find via Google for each separate app. Like "waze://", "comgooglemaps://", "osmandmaps://" etc

react-native : Native modules with same name for both android and iOS

I'm trying to build a react-native wrapper around our existing native android and ios SDK. I want to know if I can use the same class name and class methods for both the Android and iOS bridge modules? And how do I map the right module to be called for the right device?
For instance, for iOS :
// CalendarManager.h
#import "RCTBridgeModule.h"
#interface CalendarManager : NSObject <RCTBridgeModule>
#end
// CalendarManager.m
#implementation CalendarManager
RCT_EXPORT_MODULE();
#end
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
{
//Some work
}
For Android :
public class CalendarManager extends ReactContextBaseJavaModule {
public CalendarManager(ReactApplicationContext reactContext) {
super(reactContext);
}
#Override
public String getName() {
return "CalendarManager";
}
#ReactMethod
public void addEvent(String name, String location) {
//Some work
}
}
And in my js file, if I have something like this :
import { NativeModules } from 'react-native';
NativeModules.CalendarManager.addEvent("Name", "Location")
Which one will be executed? Is there a way where I could route it to the right function based on the device?
Thanks.
You don't have to do that routing yourself. That is build into React-Native. It knows which type of device you're on.
React Native packages a different version of the code that you have in your project according to the target platform that you set when you create the application APK or IPA. That is, when you do react native run-android for instance, it will compile the native Java code present in the Android project located in the android folder and pack the APK with that. Then JavaScript will have access to the native Java code. Same thing for iOS with the Objective-C/Swift code. So yes, you can (actually, I'd say you must) use the same name for the native modules.