import com.sudoplz.reactnativeamplitudeanalytics.RNAmplitudeSDKPackage;
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new RNAmplitudePackage(MainApplication.this))
return packages;
}
MainApplication.java . If possible can anyone share link to integrate amplitude analytics in react-native.
Thank You in advance
If you are using Expo Amplitude is event tracking in build in and you should refer Expo docs.
Any other case official JS SDK has built-in React Native support. You can read more here.
Related
i install react navigation version 6 and i want to use drawer navigation in project
for that install all packages of drawer navigation and make changes in
babel.congile file = plugins: ["react-native-reanimated/plugin"],
Second change in MainActivity.java file
"import android.os.Bundle;"
"import com.facebook.react.bridge.JSIModulePackage"
"import com.swmansion.reanimated.ReanimatedJSIModulePackage"
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
#Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}
}
also i changes the andrion app buid.gradlew
project.ext.react = [
enableHermes: true, // clean and rebuild if changing
]
when remove all these changes then Project buid succeeded and run
when i use the JS Module Packages then i face the above error
so My React native version 0.67
so any body can helper
hi #waqas i think you are using the latest version of react native reanimated.
please try to downgrade react native reanimated version to
"react-native-reanimated": "^1.13.2",
may be helps this;
Please refer to this GitHub thread https://github.com/facebook/react-native/issues/35210. It worked for me!
The steps I followed:
Deleted node_modules
Changed "react-native" package version (in the package.json file) from "0.70.1" to the latest patch I found in the thread (that was "0.70.5" for me)
Ran npm install to generate again the node_modules folder (you may want to use yarn install if your project is based on yarn packages)
Then cd android && ./gradlew clean
Finally cd .. (back to root folder) and npm run android to build the app.
Note that I followed the instructions for React Native >= 0.63 (version)
Hope this works for somebody else too!
In order for my application to be approved and visible on both of Google PlayStore and Huawei App Gallery, I am currently maintaining two different branches:
Google branch which has react-native-maps installed but no HMS packages.
Huawei branch which has HMS maps installed but not react-native-maps.
I'm aware of the HMS+GMS approach, but from my experience having a module like react-native-maps that relies heavily on GMS made my app hidden from pure HMS devices, even though my app had ways to check and never navigate to screens that rely on GMS.
Both branches have the same code on the JavaScript side except one file which is used to display the map, this file imports from react-native-maps on GMS phones, and from react-native-hms-map for Huawei phones.
My question is: is there a way to dynamically exclude some files and packages in build time based on the product flavor so that I can use one codebase and just ignore some file when building the APK.
Solution:
Managed to come up with a solution that got my app approved and fully visible on app stores through disabling auto linking for react native maps and manually linking it based on the product flavor.
(Code might not be the cleanest but it's behaving as expected, so any cleanup suggestions would be appreciated)
Steps:
1. Disable manual linking for react-native-maps on android
By creating a file named react-native.config.js in the root directory of the project, and added the following
module.exports = {
dependencies: {
"react-native-maps": {
platforms: {
android: null,
}
}
}
}
2. Added product flavors for Google and Huawei
By adding the following to android/app/build.gradle
...
...
android{
...
...
flavorDimensions "provider"
productFlavors {
google {
dimension "provider"
}
huawei {
dimension "provider"
}
}
...
...
}
...
...
3. Added the following to the same android/app/build.gradle file
...
...
dependencies {
...
...
huaweiImplementation 'com.huawei.hms:location:4.0.2.300'
huaweiImplementation 'com.huawei.hms:hwid:4.0.1.300'
googleImplementation project(':react-native-maps')
...
...
}
...
...
4. Added the following into android/settings.gradle
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
5. Created 2 folders inside android/app/src
folders named: huawei and google with the following structure
6. added a java file inside android/app/src/google/java/com/appname
MapPackageChecker.java
package com.appname;
import com.facebook.react.ReactPackage;
import com.airbnb.android.react.maps.MapsPackage;
public class MapPackageChecker {
public static ReactPackage getMapPackage() {
return new MapsPackage();
}
}
7. added a java file inside android/app/src/huawei/java/com/appname
MapPackageChecker.java
package com.appname;
import com.facebook.react.ReactPackage;
public class MapPackageChecker {
public static ReactPackage getMapPackage() {
return null;
}
}
8. added the following to android/app/src/main/java/com/appname/MainApplication.java
import static com.appname.MapPackageChecker.getMapPackage;
...
...
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//start of new lines
if(BuildConfig.FLAVOR.equals("google")){
packages.add(getMapPackage());
}
//end of new lines
return packages;
}
...
...
9. Access flavor name from react native code
I decided to use react-native-build-config for this purpose
Example for navigation component:
import googleMapScreen from "./googleMapScreen.js"; //relies on gms maps
import huaweiMapScreen from "./huaweiMapScreen.js"; //relies on hms maps
import BuildConfig from 'react-native-build-config';
const flavor = BuildConfig.FLAVOR
...
...
<Stack.Screen
name="MapScreen"
component={flavor === "huawei" ? huaweiMapScreen : googleMapScreen}
/>
...
...
10. After adding product flavors, we need to make some changes to our commands
yarn react-native run-android
becomes: yarn react-native run-android --variant=huaweiDebug
or: yarn react-native run-android --variant=googleDebug
./gradlew assembleRelease
becomes: ./gradlew assembleHuaweiRelease
or: ./gradlew assembleGoogleRelease
11. For convenience we can add the following to package.json scripts
"scripts":{
"run-huawei": "yarn react-native run-android --variant=huaweiDebug",
"run-google": "yarn react-native run-android --variant=googleDebug",
}
First of all, Huawei does support react-native-maps. Please check here: https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides-V1/integrating-sdk-0000001050034173-V1
When HMS+GMS is the preferred solution, in the code the APP needs to decide whether to use HMS or GMS based on the availability of HMS and GMS services on the device.
. How to decide whether to use HMS or GMS :
Check that GMS is available
There are also some links for your reference:
React Native Application Detect device support GMS or HMS: https://forums.developer.huawei.com/forumPortal/en/topic/0201200045194610058?fid=0101187876626530001
Choice SDK - an open-source GMS-HMS wrapper: https://forums.developer.huawei.com/forumPortal/en/topic/0201555879126330259?fid=0101187876626530001
You may refer to this.
It's configured in hereļ¼
And run the following command:
Hi there I am integrating google pay api using react-native-gpay but I have got an issue
Steps to install react-native-gpay
1- npm i react-native-gpay
2- react-native link react-native-gpay
3- Added in dependency block of android/app/build.gradle compile project(':react-native-gpay')
4- added import com.reactlibrary.RNGpayPackage; in MainActivity.java
5- Replaced getPackages method in MainApplication.java with below code() >
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new RNGpayPackage()); // added a package in the list returned by getPackages()
return packages;
}
and also imported in MainApplication.java import com.reactlibrary.RNGpayPackage;
6- My settings.gradle
rootProject.name = 'Pmt'
include ':react-native-gpay'
project(':react-native-gpay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gpay/android')
apply from: file("../node_modules/#react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
I checked on GitHub too to resolve the issue like this
But I couldn't find any answer. I am getting the following issue in my console
* What went wrong:
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'.
> Could not resolve project :react-native-gpay.
Required by:
project :app
> Unable to find a matching configuration of project :react-native-gpay:
- None of the consumable configurations have attributes.
This is my problem.
A problem occurred configuring project ':react-native-vector-icons'.
Could not resolve all dependencies for configuration ':react-native-vector-icons:classpath'.
Could not load module metadata from C:\Users\erick.gradle\caches\modules-2\metadata-2.71\descriptors\com.android.tools.build\gradle-api\3.3.1\fc7e8eef251519086b6ee9788cba4dd2\descriptor.bin
Please refer to this to see if there are any missing parts.
Edit android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
Edit android/settings.gradle to look like this (without the +):
+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
Edit android/app/build.gradle (note: app folder) to look like
this:
dependencies {
+ implementation project(':react-native-vector-icons')
}
Edit your MainApplication.java (deep in
android/app/src/main/java/...) to look like this (note two places to
edit):
package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}
}
in React Native > 0.60, you do not need to link packages manually. All you need is install your package and run link command. for react-native-vector-icons, remove any code and files you added to android or ios manually, or run react-native unlink react-native-vector-icons.
Remember that for ios, you need to get the last update of cocopods. if you have problem again, in ios folder run pod install command.
I hope this can help you.
I have followed the guide on the react-native-maps documentation : I got the error.
I looked everywhere on stackoverflow and on google and I was not able to find a fix.
I tried all answers I could find on forums and I still get the error.
The error :
Invariant Violation: requireNativeComponent: "AIRMap" was not found in the UIManager.
My code :
import React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet } from 'react-native';
export default class App extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<MapView
style = {styles.map}
showsUserLocation = {false}
followUserLocation = {false}
zoomEnabled = {true}
/>
)
}
}
const styles = StyleSheet.create ({
map: {
height: 400,
marginTop: 80
}
})
Please check these two links which provide you detailed information about react native map integration in iOS & Android
Map integration link 1 for Android & ios
Map integration link 2
Some time iOS library does not link properly so you need to manually add library into Xcode.
Try this:
open xcode project > your project > Build Phases > Link Binaries > Remove libAirMaps.a >
then add it again > check if it works ...
check image for detailed instruction
Edit :
if you already installed react-native-maps try to add AirMapsLib manually. Follow the instructions on this image. after that, try again the above instruction.
I do not face this issue yet in iOS but on Android.
Invariant Violation: requireNativeComponent:xxx not found in UIManager
Issue seems to be the dependent is not linked to your project, hence 2 solutions for this issue (depending on your 'dependency')
run react-native link in terminal/cmd at your project path.
Manual append the dependency in your MainApplication.java as shown below:
Manual append the dependency in your MainApplication.java as shown below:
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for
packages.add(new RNFirebaseAnalyticsPackage());
packages.add(new xxxPackage());
}
There may be
I have solved this issue by only running react-native run-android.
Note: if you have run react-native link unlink this first.
Add below lines to MainApplication.java
import com.airbnb.android.react.maps.MapsPackage;
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new MapsPackage());
return packages;
Take advantage of yarn. As npm would give giving errors that has no relevance to the solve the problem.
you need to add google api key in your project as well to install the library properly.
for me i had on my ios map, i had to close my terminal and my stimulator then restart again and everything was okay.
There are 2 possible errors which throw AIRMap error in your application.
Check your GOOGLE GEO API KEY is set correctly in AndroidManifest.xml. For e.g.:
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning"> <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY"/> </application>
react-native-maps package is out of date.
With "react-native-maps": "^0.25.0" i had this problem too.
So try to update react-native-maps package. In your package.json set for e.g. "react-native-maps": "^1.4.0"