Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all 28476 articles
Browse latest View live

React native - Can i integrate multi react native application to exiting native application (ios/android)?

$
0
0

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 enter image description here


Is it possible to combine a GUI made with react native with utility methods from native code (kotlin)?

$
0
0

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

$
0
0

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%"),},

enter image description here

React Native (Android): Can't return String in a jobject via JNI

$
0
0

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

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

$
0
0

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

$
0
0

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

$
0
0

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)

$
0
0

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

  1. Create a project using react-native CLI not Expo CLI
  2. Navigate to the project folder
  3. Connect a device or an emulator with API less than 21
  4. 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

$
0
0

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?

$
0
0

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

$
0
0

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

$
0
0

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

$
0
0

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

Is there a way to integrate a packaged game (Unreal Engine 4) apk into an application that is developed using React-Native?

$
0
0

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)

$
0
0

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)

$
0
0

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

$
0
0

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

$
0
0

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

$
0
0

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 :)

Viewing all 28476 articles
Browse latest View live