I am learning about how to integrate react native app into an existing native app.Most of the tutorials on the internet only instruct integrate 1 application react-native to an existing native application, I don't know if it will work with many react native apps? How can I call multiple jsbundles in native apps? (as screenshot)Thank you <3
React native - Can i integrate multi react native application to exiting native application (ios/android)?
Is it possible to combine a GUI made with react native with utility methods from native code (kotlin)?
I have an app which was made entirely using react native. It's pretty much a todo list, this is the structure:
<SafeAreaView style={styles.container}><Text style={styles.title} >Registro de pacientes</Text><ScrollView style={styles.scroll}><ListaPacientes pacientes={pacientes} onUpdate={this.handleUpdate}/></ScrollView></SafeAreaView>
And here is the list:
const ListaPacientes = ({ pacientes, onUpdate }) => (<Fragment> {pacientes.map( (paciente) => (<TouchableOpacity style={styles.listItem} key={paciente.name} onPress ={() => onUpdate({...paciente, done: !paciente.done})} ><Text style={[styles.texto, paciente.done && styles.textoDone]}>{paciente.name}</Text></TouchableOpacity> ) )}</Fragment>);
This takes a list of clients and displays their names. Upon being clicked on, they are removed from the list. Very simple.
The thing is, the list of clients must be read from a csv file and, after being clicked, update the csv. I already have a piece of code that does that. However, it's written in kotlin (It was coded for another project).
Instead of having to do the whole fetching/reading/treating/updating of the data again in react native, can I somehow use the kotlin code I already have? If so, care to provide an example on how it would be done?
Thank you.
I am using Model from react native but In bottom side showing gray background space
I research multiple times but didn't get any solution, please let me if I am doing wrong.Here is the code for better understanding. The black space is bottom navigation bar but I don't want the bottom navigation bar
<ModalanimationType="fade"transparent={true}visible={true}><View style={styles.popupOverlay}></View><View>test</View></Modal>popupOverlay:{backgroundColor: 'rgba(0,0,0,0.7)', flex:1,height:hp("105%"),},
React Native (Android): Can't return String in a jobject via JNI
I'm trying to (literally) bridge the gap between JavaScript (React Native 0.61.5) and C++ for Android, in order to use OpenCV (3.2.0). Might be noteworthy that I use a deprecated NDK (16) because otherwise I can't use gnustl_static
.
The problem
Whenever I try to return a String
from my native C++ code to Java, the app crashes on the native side. Returning simple data types (in my example, int
) is not a problem though.
Dev Environment
- macOS Catalina Version
10.15.4 (19E266)
- React Native Version
0.61.5
- Android Studio Version
4.0
- NDK Version
16.1.4479499
- CMake Version
3.6.4111459
- NDK Version
Source Files
Application.mk
APP_ABI := allAPP_OPTIM := releaseAPP_PLATFORM := android-8APP_STL := gnustl_staticAPP_CPPFLAGS := -std=c++11
index.js
The JavaScript side of things, calling the native methods test()
and testWithString()
.
import {NativeModules, Platform} from "react-native";const {RNSKOpenCVModule} = NativeModules // RNSKOpenCVModule.java// successRNSKOpenCVModule.test(Platform.OS).then((result) => console.warn (`RNSKOpenCVModule.test(${Platform.OS}) result: ` + JSON.stringify(result, null, 2))).catch(console.error)// errorRNSKOpenCVModule.testWithString(Platform.OS).then((result) => console.warn (`RNSKOpenCVModule.testWithString(${Platform.OS}) result: ` + JSON.stringify(result, null, 2))).catch(console.error)
RNSKOpenCVModule.java
Calls the actual C++ methods and returns a WritableMap
, which can be used as an Object
in JavaScript.
package com.skizzo.opencv;// importspublic class RNSKOpenCVModule extends ReactContextBaseJavaModule { private static ReactApplicationContext reactContext; RNSKOpenCVModule(ReactApplicationContext context) { super(context); reactContext = context; } static { System.loadLibrary("native-lib"); // native-lib.cpp } @Override public String getName() { Log.w ("opencvtest", "RNSKOpenCVModule.java getName() called"); return "RNSKOpenCVModule"; // NativeModules.RNSKOpenCVModule } @ReactMethod public void test(final String platform, final Promise promise) { Activity currentActivity = getCurrentActivity(); if (currentActivity == null) { promise.reject("Activity doesn't exist."); return; } Log.w("RNSKOpenCVModule", "RNSKOpenCVModule.java.test()"); Runnable runnable = new Runnable() { @Override public void run() { try { StructTestResult testResult = RNSKOpenCVNativeClass.test(platform); WritableMap res = testResult.toWritableMap(); promise.resolve(res); } catch (Exception e) { promise.reject("ERR", e); } } }; AsyncTask.execute(runnable); } @ReactMethod public void testWithString(final String platform, final Promise promise) { Activity currentActivity = getCurrentActivity(); if (currentActivity == null) { promise.reject("Activity doesn't exist."); return; } Log.w("RNSKOpenCVModule", "RNSKOpenCVModule.java.testWithString()"); Runnable runnable = new Runnable() { @Override public void run() { try { StructTestWithStringResult testWithStringResult = RNSKOpenCVNativeClass.testWithString(platform); WritableMap res = testWithStringResult.toWritableMap(); promise.resolve(res); } catch (Exception e) { promise.reject("ERR", e); } } }; AsyncTask.execute(runnable); }}
native-lib-cpp
#include <android/log.h>#include <jni.h>#include <string>#include <stdio.h>#include <string.h>#include <stdexcept>#include <dirent.h>#include <unistd.h>#include <iostream>#include <sstream>#include <algorithm>#include <cmath>#include <opencv2/core/core.hpp>#include <opencv2/imgproc/imgproc.hpp>#include <opencv2/highgui/highgui.hpp>using namespace std;using namespace cv;#define LOG_TAG "native-lib"#define LOGD(...) __android_log_print(ANDROID_LOG_DEBUG, LOG_TAG, __VA_ARGS__)#define LOGW(...) __android_log_print(ANDROID_LOG_WARN, LOG_TAG, __VA_ARGS__)#define LOGE(...) __android_log_print(ANDROID_LOG_ERROR, LOG_TAG, __VA_ARGS__)#define PLATFORM_OPENCV_ANDROID#ifdef PLATFORM_OPENCV_ANDROID #define printf(...) __android_log_print (ANDROID_LOG_DEBUG, "SKOpenCv", __VA_ARGS__);#endiftypedef struct { int testInt;} StructTestResult, *pStructTestResult;typedef struct { int testInt; char* testString;} StructTestWithStringResult, *pStructTestWithStringResult;extern "C"{ // StructTestResult jclass STRUCT_TEST_RESULT; jmethodID STRUCT_TEST_RESULT_CONSTRUCTOR; jfieldID STRUCT_TEST_RESULT_TESTINT; // StructTestWithStringResult jclass STRUCT_TEST_WITH_STRING_RESULT; jmethodID STRUCT_TEST_WITH_STRING_RESULT_CONSTRUCTOR; jfieldID STRUCT_TEST_WITH_STRING_RESULT_TESTINT; jfieldID STRUCT_TEST_WITH_STRING_RESULT_TESTSTRING; jclass JAVA_EXCEPTION; jint JNI_OnLoad (JavaVM *vm, void *reserved) { // called once onLoad JNIEnv *env; if (vm->GetEnv((void **) (&env), JNI_VERSION_1_6) != JNI_OK) { return -1; } // StructTestResult STRUCT_TEST_RESULT = (jclass) env->NewGlobalRef (env->FindClass("com/skizzo/opencv/StructTestResult")); STRUCT_TEST_RESULT_CONSTRUCTOR = env->GetMethodID (STRUCT_TEST_RESULT, "<init>", "(I)V"); STRUCT_TEST_RESULT_TESTINT = env->GetFieldID (STRUCT_TEST_RESULT, "testInt", "I"); // StructTestWithStringResult STRUCT_TEST_WITH_STRING_RESULT = (jclass) env->NewGlobalRef (env->FindClass("com/skizzo/opencv/StructTestWithStringResult")); STRUCT_TEST_WITH_STRING_RESULT_CONSTRUCTOR = env->GetMethodID (STRUCT_TEST_WITH_STRING_RESULT, "<init>", "(ILjava/lang/String;)V"); STRUCT_TEST_WITH_STRING_RESULT_TESTINT = env->GetFieldID (STRUCT_TEST_WITH_STRING_RESULT, "testInt", "I"); STRUCT_TEST_WITH_STRING_RESULT_TESTSTRING = env->GetFieldID (STRUCT_TEST_WITH_STRING_RESULT, "testString", "Ljava/lang/String;"); // Exception JAVA_EXCEPTION = (jclass)env->NewGlobalRef (env->FindClass("java/lang/Exception")); return JNI_VERSION_1_6; } jobject JNICALL Java_com_skizzo_opencv_RNSKOpenCVNativeClass_test (JNIEnv *env, jobject instance, jstring platform) { const char* platformStr = env->GetStringUTFChars (platform, NULL); LOGD("platformStr: %s", platformStr); // "android" StructTestResult testResult; testResult.testInt = 123; // int -> OK // turn the C struct back into a jobject and return it return env->NewObject(STRUCT_TEST_RESULT, STRUCT_TEST_RESULT_CONSTRUCTOR, testResult.testInt); } jobject JNICALL Java_com_skizzo_opencv_RNSKOpenCVNativeClass_testWithString (JNIEnv *env, jobject instance, jstring platform) { const char* platformStr = env->GetStringUTFChars (platform, NULL); LOGD("platformStr: %s", platformStr); // "android" StructTestWithStringResult testWithStringResult; testWithStringResult.testInt = 456; // int -> OK char* openCvVersion = CV_VERSION; LOGD("openCvVersion: %s", openCvVersion); testWithStringResult.testString = CV_VERSION; // adding this line produces the crash // turn the C struct back into a jobject and return it return env->NewObject(STRUCT_TEST_WITH_STRING_RESULT, STRUCT_TEST_WITH_STRING_RESULT_CONSTRUCTOR, testWithStringResult.testInt, testWithStringResult.testString); }}
StructTestResult.java
package com.skizzo.opencv;import com.facebook.react.bridge.Arguments;import com.facebook.react.bridge.ReadableMap;import com.facebook.react.bridge.WritableMap;public class StructTestResult { int testInt; public StructTestResult () {} public StructTestResult (int testInt) { this.testInt = testInt; } public StructTestResult (ReadableMap map) { this ( (int)map.getDouble("testInt") ); } public WritableMap toWritableMap() { WritableMap map = Arguments.createMap(); map.putInt("testInt", this.testInt); return map; }}
StructTestWithStringResult.java
package com.skizzo.opencv;import com.facebook.react.bridge.Arguments;import com.facebook.react.bridge.ReadableMap;import com.facebook.react.bridge.WritableMap;public class StructTestWithStringResult { int testInt; String testString; public StructTestWithStringResult () {} public StructTestWithStringResult (int testInt, String testString) { this.testInt = testInt; // this.testString = "testFromJavaConstructor"; // success this.testString = testString; // error } public StructTestWithStringResult (ReadableMap map) { this ( (int)map.getDouble("testInt"), map.getString("testString") ); } public WritableMap toWritableMap() { WritableMap map = Arguments.createMap(); map.putInt("testInt", this.testInt); map.putString("testString", this.testString); return map; }}
Any help is greatly appreciated, I'm really stuck here. Thanks!
How to change display name of an app in react-native
Apple have clear instructions on how to change the display name of an IOS app, but they are not useful for a react-native app because the folder structure is different. How do you change the display name if you have a react-native app?
how to store/save data in react native
How to store/save data in react native.Like we use shared-preference in android is there any solution for react native.I am new to react-nactive.
please add sample example
React Native MapView rotate map with camera heading
I am trying to rotate a map in React Native's <MapView> but haven't been able to find a description on how to rotate a map according to the heading of the camera. The tutorial states:
When this property is set to true and a valid camera is associated with the map, the camera’s heading angle is used to rotate the plane of the map around its center point.
So I came as far as:
<MapView style={styles.map} onRegionChange={this._onRegionChange} onRegionChangeComplete={this._onRegionChangeComplete} region={this.state.mapRegion} annotations={this.state.annotations} rotateEnabled={true}
But there is no explanation on how a camera is associated with the map.
Can anyone help with this issue please?
React Native App Crashes on Launch in Android (API 19)
Description
I have created a project with react-native-cli
When I launch the app using the command "react-native run-android" on Devices and Emulators with Android API level 21+ App is launching.
But for devices less than API 21, the app crashing on launch.
I have specified in android Gradle minSdk version to 16.
I viewed the stack trace using "adb logcat" the crash was due to OkHttp3 that is used internally in Facebook Flipper, which is expecting API 21+.
I haven't used any OkHttp3 Dependency explicitly in my app
React Native version:
6.14.4
Steps To Reproduce
- Create a project using react-native CLI not Expo CLI
- Navigate to the project folder
- Connect a device or an emulator with API less than 21
- run command "react-native run-android" to run the app on the connected device
Expected Results
The app should launch without any crash.
Android Logs
E/AndroidRuntime( 3745): java.lang.RuntimeException: Unable to create application com.infifive.MainApplication: java.lang.RuntimeException: Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found or could not be createdE/AndroidRuntime( 3745): at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4347)E/AndroidRuntime( 3745): at android.app.ActivityThread.access$1500(ActivityThread.java:135)E/AndroidRuntime( 3745): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1256)E/AndroidRuntime( 3745): at android.os.Handler.dispatchMessage(Handler.java:102)E/AndroidRuntime( 3745): at android.os.Looper.loop(Looper.java:136)E/AndroidRuntime( 3745): at android.app.ActivityThread.main(ActivityThread.java:5017)E/AndroidRuntime( 3745): at java.lang.reflect.Method.invokeNative(Native Method)E/AndroidRuntime( 3745): at java.lang.reflect.Method.invoke(Method.java:515)E/AndroidRuntime( 3745): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:779)E/AndroidRuntime( 3745): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:595)E/AndroidRuntime( 3745): at dalvik.system.NativeStart.main(Native Method)E/AndroidRuntime( 3745): Caused by: java.lang.RuntimeException: Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found or could not be createdE/AndroidRuntime( 3745): at com.facebook.react.devsupport.DevSupportManagerFactory.create(DevSupportManagerFactory.java:90)E/AndroidRuntime( 3745): at com.facebook.react.ReactInstanceManager.<init>(ReactInstanceManager.java:238)E/AndroidRuntime( 3745): at com.facebook.react.ReactInstanceManagerBuilder.build(ReactInstanceManagerBuilder.java:281)E/AndroidRuntime( 3745): at com.facebook.react.ReactNativeHost.createReactInstanceManager(ReactNativeHost.java:87)E/AndroidRuntime( 3745): at com.facebook.react.ReactNativeHost.getReactInstanceManager(ReactNativeHost.java:39)E/AndroidRuntime( 3745): at com.infifive.MainApplication.onCreate(MainApplication.java:47)E/AndroidRuntime( 3745): at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1007)E/AndroidRuntime( 3745): at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4344)E/AndroidRuntime( 3745): ... 10 moreE/AndroidRuntime( 3745): Caused by: java.lang.reflect.InvocationTargetExceptionE/AndroidRuntime( 3745): at java.lang.reflect.Constructor.constructNative(Native Method)E/AndroidRuntime( 3745): at java.lang.reflect.Constructor.newInstance(Constructor.java:423)E/AndroidRuntime( 3745): at com.facebook.react.devsupport.DevSupportManagerFactory.create(DevSupportManagerFactory.java:80)E/AndroidRuntime( 3745): ... 17 moreE/AndroidRuntime( 3745): Caused by: java.lang.ExceptionInInitializerErrorE/AndroidRuntime( 3745): at okhttp3.OkHttpClient.newSslSocketFactory(OkHttpClient.java:263)E/AndroidRuntime( 3745): at okhttp3.OkHttpClient.<init>(OkHttpClient.java:229)E/AndroidRuntime( 3745): at okhttp3.OkHttpClient$Builder.build(OkHttpClient.java:1015)E/AndroidRuntime( 3745): at com.facebook.react.devsupport.DevServerHelper.<init>(DevServerHelper.java:132)E/AndroidRuntime( 3745): at com.facebook.react.devsupport.DevSupportManagerImpl.<init>(DevSupportManagerImpl.java:183)E/AndroidRuntime( 3745): ... 20 moreE/AndroidRuntime( 3745): Caused by: java.lang.IllegalStateException: Expected Android API level 21+ but was 19E/AndroidRuntime( 3745): at okhttp3.internal.platform.AndroidPlatform.buildIfSupported(AndroidPlatform.java:238)E/AndroidRuntime( 3745): at okhttp3.internal.platform.Platform.findPlatform(Platform.java:202)E/AndroidRuntime( 3745): at okhttp3.internal.platform.Platform.<clinit>(Platform.java:79)`
Couldn't get push token for device. Check that your FCM configuration is valid
I want to resolve this problem getting a push token [Error: Couldn't get push token for device. Check that your FCM configuration is valid ]... In my react native app I implemented Expo permissions and notification but nothing happened ..I'm using node js and expo push notifications service.
I'm getting very low accuracy from getCurrentPositionAsync(), sometimes more than 2000m. How could I improve this?
I’m working on an app that needs to save user's current position. The user is not really moving much, think fishing or birdwatching... they'd approach the spot and they stay there for a while, take a photo and then move to another location relatively close by.
For context, I'm using React Native/Expo (managed), so the relevant code goes like this:
let coordinates = await Location.getCurrentPositionAsync({ enableHighAccuracy: true, accuracy: Location.Accuracy.Highest,})
Then if resulting accuracy is greater than 50m I repeat the request.
This seems to work fine in urban or semi-urban areas where I guess there's a lot more info for the device to work with (WiFi networks, good mobile connection, cell towers, etc.). But in many cases there's very low mobile signal or none at all. Just GPS. In these situations, results get very inconsistent. Sometimes accuracy goes up to 2000 and 4000 meters which is useless for our purposes.
I think I must be using the wrong approach b/c there's tons of apps that work way better in similar situations, right?
Should I try to collecting positions of the device leading to the final place where the position will be recorded? Could that help without snapping to roads?
I’ve read an article from another app suggesting their users that in some cases historical GPS data is used and sometimes it helps getting rid of that data before attempting to get current position. Does this make sense to try? Is there ways to clear this data in the Expo/RN context?
We've tested this in different areas, in 3 or 4 Android devices, models ranging from about 1 to 4 years old. The data seems to indicate worse accuracy in older models, but still I thought GPS with clear sky view would do better...
I'd appreciate any suggestions or pointers to any relevant info. I'm sure there must be something we're doing very wrong.
Thanks.
duplicate views in view hierarchy testing using espresso with react native
I'm trying to run tests I've created in espresso to test a react native app. I'm trying to target particular buttons to be clicked using AccessibilityLabels, which are successfully appearing as content-descriptions and are being targeted by espresso. The problem is, I'm getting errors because espresso thinks they are duplicate views, however, they only appear in my react native code once. I am using a common button component in react native. Any ideas whats causing this?
The error is below: id 47 and 76 are the duplicated views
android.support.test.espresso.AmbiguousViewMatcherException: '(with content description: is "LOG IN" and is displayed on the screen to the user)' matches multiple views in the hierarchy.Problem views are marked with '****MATCHES****' below.View Hierarchy:+>DecorView{id=-1, visibility=VISIBLE, width=1080, height=1920, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=3}|+->LinearLayout{id=-1, visibility=VISIBLE, width=1080, height=1794, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=2}|+-->ViewStub{id=16909295, res-name=action_mode_bar_stub, visibility=GONE, width=0, height=0, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=true, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0}|+-->FrameLayout{id=16908290, res-name=content, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=63.0, child-count=1}|+--->ReactRootView{id=1, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=1}|+---->ReactViewGroup{id=10, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=1}|+----->ReactViewGroup{id=14, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=1}|+------>ReactViewGroup{id=15, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=2}|+------->ReactViewGroup{id=18, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=1}|+-------->ReactViewGroup{id=19, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=1}|+--------->ReactImageView{id=22, visibility=VISIBLE, width=788, height=263, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=146.0, y=734.0}|+------->ReactViewGroup{id=24, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=1}|+-------->ReactViewGroup{id=25, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=2}|+--------->ReactViewGroup{id=28, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=1}|+---------->ReactViewGroup{id=32, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=8}|+----------->ReactImageView{id=35, visibility=VISIBLE, width=1080, height=447, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=-79.0}|+----------->ReactViewGroup{id=36, visibility=VISIBLE, width=1080, height=0, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=-158.0, child-count=0}|+----------->ReactViewGroup{id=37, visibility=VISIBLE, width=1080, height=157, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=-158.0, child-count=0}|+----------->ReactImageView{id=40, visibility=VISIBLE, width=788, height=262, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=146.0, y=457.0}|+----------->ReactTextView{id=43, visibility=VISIBLE, width=1027, height=155, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=26.0, y=853.0, text=The easy way to organise parties, events, share pictures and memories with friends, family and groups., input-type=0, ime-target=false, has-links=false}|+----------->ReactViewGroup{id=47, desc=LOG IN, visibility=VISIBLE, width=975, height=174, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=true, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=53.0, y=1148.0, child-count=1} ****MATCHES****|+------------>ReactTextView{id=48, visibility=VISIBLE, width=150, height=65, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=413.0, y=54.0, text=LOG IN, input-type=0, ime-target=false, has-links=false}|+----------->ReactTextView{id=52, visibility=VISIBLE, width=56, height=57, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=512.0, y=1355.0, text=OR, input-type=0, ime-target=false, has-links=false}|+----------->ReactViewGroup{id=54, desc=SIGN UP, visibility=VISIBLE, width=975, height=173, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=true, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=53.0, y=1453.0, child-count=1}|+------------>ReactTextView{id=55, visibility=VISIBLE, width=182, height=65, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=397.0, y=54.0, text=SIGN UP, input-type=0, ime-target=false, has-links=false}|+--------->ReactViewGroup{id=57, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=1}|+---------->ReactViewGroup{id=60, visibility=VISIBLE, width=1080, height=1731, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=8}|+----------->ReactImageView{id=64, visibility=VISIBLE, width=1080, height=447, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=-79.0}|+----------->ReactViewGroup{id=65, visibility=VISIBLE, width=1080, height=0, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=-158.0, child-count=0}|+----------->ReactViewGroup{id=66, visibility=VISIBLE, width=1080, height=157, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=-158.0, child-count=0}|+----------->ReactImageView{id=69, visibility=VISIBLE, width=788, height=262, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=146.0, y=457.0}|+----------->ReactTextView{id=72, visibility=VISIBLE, width=1027, height=155, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=26.0, y=853.0, text=The easy way to organise parties, events, share pictures and memories with friends, family and groups., input-type=0, ime-target=false, has-links=false}|// this is the same as id=47+----------->ReactViewGroup{id=76, desc=LOG IN, visibility=VISIBLE, width=975, height=174, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=true, is-layout-requested=false, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=53.0, y=1148.0, child-count=1} ****MATCHES****
Expo - standalone APK crashing when running on physical device; app working on expo-cli
First off, I'm new to react-native so please excuse my missing knowledge regarding troubleshooting.
I have built a basic app using Expo, which runs perfectly fine when I run expo start
and scan the QR code to run it on my physical device.
I then ran expo build:android
in my terminal and selected apk to create an apk file. It installs, but when I try to open the app on my phone, it crashes straight away. I'm not sure why this happens, or how to troubleshoot it.
Some steps I have taken:
- Reinstalled expo-cli
- Reinstalled react-native
- Ran
npm-update
- Manually downgraded my sdkVersion to 37.0.0 in my app.json file (as suggested by online forums)
Here is my app.json file:
{"expo": {"name": "FactApp","slug": "FactApp","sdkVersion": "37.0.0","platforms": ["ios","android","web" ],"version": "1.0.0","orientation": "portrait","icon": "./assets/icon.png","splash": {"image": "./assets/splash.png","resizeMode": "contain","backgroundColor": "#ffffff" },"android": {"package": "com.kmdevops.factapp","versionCode": 2,"config": {"googleMobileAdsAppId": "ca-app-pub-7529073010403742/8555991419" } },"updates": {"fallbackToCacheTimeout": 0 },"assetBundlePatterns": ["**/*" ],"ios": {"supportsTablet": true,"bundleIdentifier": "com.yourcompany.yourappname","buildNumber": "1.0.0" },"description": "" }}
And here is my package.json file:
{"main": "node_modules/expo/AppEntry.js","scripts": {"start": "expo start","android": "expo start --android","ios": "expo start --ios","web": "expo start --web","eject": "expo eject" },"dependencies": {"@react-native-community/masked-view": "0.1.6","@react-navigation/native": "^5.5.1","expo": "^37.0.12","expo-ads-admob": "~8.1.0","expo-linear-gradient": "~8.1.0","react": "~16.9.0","react-dom": "~16.9.0","react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-gesture-handler": "~1.6.0","react-native-reanimated": "~1.7.0","react-native-safe-area-context": "0.7.3","react-native-screens": "~2.2.0","react-native-web": "~0.11.7","react-navigation": "^4.3.9","react-navigation-stack": "^2.7.0","react-navigator": "0.0.0-0" },"devDependencies": {"babel-preset-expo": "~8.1.0","@babel/core": "^7.8.6" },"private": true}
Any help would be greatly appreciated!
"auth/app-not-authorized" in Firebase with react-native
auth/app-not-authorizederror only in phone authentication with device , i can store the data of email /password authentication, testing phone authentication in firebase react-native but not with device,i added the SHA 1, i checked the package name, project name, added google-services.json.i added the react-native-app,react-native-auth. i am not getting otp to my device from firebase.
Digital Assistant using react native
Use case: Need to create a digital/ shopping assistant app something similar like this:https://play.google.com/store/apps/details?id=com.buyhatke.assistant&hl=en
What are the alternatives that could be helpful?
Is there a way to integrate a packaged game (Unreal Engine 4) apk into an application that is developed using React-Native?
We are a video game developing comapny that uses Unreal Engine 4 to develop games.We have a client who has an application under development for both Android and the iOS on their own (we did are not the ones developing it for them). They are developing their application using React-Native.
We would like to develop a game for them using Unreal Engine 4. But, we would like it to be integrated into their application.
Is there a way to integrate a packaged game (Unreal Engine 4) apk into an application that is developed using React-Native?
Thank you
Open external App from React native App ( Button Click)
I want to open New React native App by clicking on Button in which I have used
Linking Concepts in React native
React native Code : Test is the name of the Other App
Linking.openURL('Test://app');
Also following URL for adding Intent in the android.manifest.xml file Andriod Intent
Code : Android.manifestfile.xml
<activity android:name=".MainActivity" android:launchMode="singleTask" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter><intent-filter><action android:name="android.intent.action.VIEW" /><category android:name="com.Test" /><category android:name="android.intent.category.BROWSABLE" /><data android:scheme="Test" android:host="app" /></intent-filter></activity>
How can I resolve the issue?
Android Exoplayer only plays first seconds of stream (Pre-roll)
I have a problem with loading an MP3 stream.
The stream is : https://nostalgiewaf6070.ice.infomaniak.ch/nostalgiewaf6070-128.mp3?aw_0_req.gdpr=true
I am using Exoplayer to load the stream.
new ProgressiveMediaSource.Factory(ds, new DefaultExtractorsFactory() .setConstantBitrateSeekingEnabled(false)) .createMediaSource(uri);
Everything works fine but it only plays the Pre-roll ( first 4-5 seconds ) and it doesn't continue playing the stream after the Pre-roll
How to tell Exoplayer to continue fetching the stream? I am also using the react-native-track-player library.
React-native-fetch-blob create pdf file using base 64 and save it to downloads
How is it possible to create the file using the base64 string and save it to the Downloads folder.and is there any way in react-native to open the file immediately after the download using the default pdf viewer in the device?
React Native - react-native-exception-handler is never triggered
I am implementing an application using React Native and felt the need to have a global exception handler.I did a web search and discovered the react-native-exception-handler component. I followed the guidelines contained inhttps://github.com/a7ul/react-native-exception-handler for installation.
First I ran the installation:$ npm i react-native-exception-handler --save$ react-native link react-native-exception-handler
The Android classes were as follows:
MainApplication.java
import com.masteratul.exceptionhandler.ReactNativeExceptionHandlerPackage;public class MainApplication extends NavigationApplication { private final ReactNativeHost mReactNativeHost = new NavigationReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @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 example: //packages.add(new ReactNativeExceptionHandlerPackage()); return packages; } @Override protected String getJSMainModuleName() { return "index"; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); } . . . }
I had to comment the line packages.add(new ReactNativeExceptionHandlerPackage()) because an error was thrown saying that it was trying to overwrite the ReactNativeExceptionHandlerPackage module.
android/settings.gradle:
rootProject.name = 'detectxpainel'include ':react-native-exception-handler'project(':react-native-exception-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-exception-handler/android')apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)include ':app'include ':react-native-exception-handler'project(':react-native-exception-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-exception-handler/android')
android/app/build.gradle:
apply plugin: "com.android.application"import com.android.build.OutputFileproject.ext.react = [ enableHermes: false, // clean and rebuild if changing]apply from: "../../node_modules/react-native/react.gradle"def enableSeparateBuildPerCPUArchitecture = falsedef enableProguardInReleaseBuilds = falsedef jscFlavor = 'org.webkit:android-jsc:+'def enableHermes = project.ext.react.get("enableHermes", false);android { compileSdkVersion rootProject.ext.compileSdkVersion compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } defaultConfig { applicationId "com.detectxpainel" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" } splits { abi { reset() enable enableSeparateBuildPerCPUArchitecture universalApk false // If true, also generate a universal APK include "armeabi-v7a", "x86", "arm64-v8a", "x86_64" } } signingConfigs { debug { storeFile file('debug.keystore') storePassword 'android' keyAlias 'androiddebugkey' keyPassword 'android' } } buildTypes { debug { signingConfig signingConfigs.debug } release { signingConfig signingConfigs.debug minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } } packagingOptions { pickFirst "lib/armeabi-v7a/libc++_shared.so" pickFirst "lib/arm64-v8a/libc++_shared.so" pickFirst "lib/x86/libc++_shared.so" pickFirst "lib/x86_64/libc++_shared.so" } applicationVariants.all { variant -> variant.outputs.each { output -> // For each separate APK per architecture, set a unique version code as described here: // https://developer.android.com/studio/build/configure-apk-splits.html def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] def abi = output.getFilter(OutputFile.ABI) if (abi != null) { // null for the universal-debug, universal-release variants output.versionCodeOverride = versionCodes.get(abi) * 1048576 + defaultConfig.versionCode } } }}dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.facebook.react:react-native:+" // From node_modules implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" implementation project(':react-native-exception-handler') debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { exclude group:'com.facebook.fbjni' } debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' } debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' } if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath +"hermes-debug.aar") releaseImplementation files(hermesPath +"hermes-release.aar") } else { implementation jscFlavor }}task copyDownloadableDepsToLibs(type: Copy) { from configurations.compile into 'libs'}apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
index.js
import { Navigation } from "react-native-navigation";import App from './App';Navigation.registerComponent('App', () => App);Navigation.events().registerAppLaunchedListener(async () => { Navigation.setRoot({ root: { stack: { children: [{ component: { name: 'App' } }] } } });});
FetchTool.js
export default class FetchTool { static get(uri, headers) { return fetch(uri, headers) .then(response => { if (response.ok) return resposta.json() else { throw new Error('Error'); } }) .catch(error => { throw new Error('Error: '+ error); }); }}
App.js
import React, { Component } from 'react';import { View} from 'react-native';import FetchTool from './src/external/http/FetchTool';import {setJSExceptionHandler, setNativeExceptionHandler} from 'react-native-exception-handler';const errorHandler = (e, isFatal) => { if (isFatal) { Alert.alert('Unexpected error occurred', ` Error: ${(isFatal) ? 'Fatal:' : ''} ${e.name} ${e.message} We will need to restart the app. `, [{ text: 'Restart', onPress: () => { RNRestart.Restart(); } }] ); } else { console.error('JS Error: '+ e) } }; setJSExceptionHandler(errorHandler, true); const exceptionhandler = exceptionString => { console.error('Native Error: '+ exceptionString) }; setNativeExceptionHandler( exceptionhandler, true, true );export default class App extends Component { constructor() { super(); FetchTool.get('http://www.asdfasf/asdfsf', null); } render() { return (<View></View> ); }}
I forced an error in FetchTool.get by performing an http get to a non-existent server to see how the global handler works, but nothing happens. The handler is not called. Can anyone explain to me what mistake I'm making?
Thank you
KeyboardDidShow/Hide events are not working on Android with adjustResize setting
I am trying to capture events on Keyboard Show/Hide events on Android with React Native
. I got stuck at a dead-end.
Here is my manifest setting:
<activity android:launchMode="singleTop" android:name=".MainActivity" android:screenOrientation="portrait" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /><action android:name="android.intent.action.DOWNLOAD_COMPLETE"/></intent-filter></activity>
And here is my RN Component:
import React, {Component} from 'react';import { View,Keyboard} from 'react-native';export default class KeyboardAwareComponent extends Component { componentDidMount() { Keyboard.addListener("keyboardDidShow",()=>{ console.log("Show event"); }) } render() { return <View /> }}
Thank you so much in Advance :)