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

React Native app crashing when visiting specific screen

$
0
0

This screen works fine when testing using Expo, but crashes the app when it is bundled to apk

I'm not sure whats causing the crash here, but it works on Expo.This has been tested on both emulators and real android devices, which have the same behavior.

This is the error log from the device when visiting the screen:

04-22 10:14:11.713  7008  7008 E unknown:ReactNative: Tried to remove non-existent frame callback04-22 10:14:11.778  1731  7439 E ResolverController: No valid NAT64 prefix (101, <unspecified>/0)04-22 10:14:11.786  7008  7065 E GraphResponse: {HttpStatus: 400, errorCode: 100, subErrorCode: 33, errorType: GraphMethodException, errorMessage: Unsupported get request. Please read the Graph API documentation at https://developers.facebook.com/docs/graph-api}04-22 10:14:11.963  7008  7008 E c       : java.lang.RuntimeException: A TaskDescription's primary color should be opaque04-22 10:14:11.963  7008  7008 E CrashlyticsCore: Crashlytics must be initialized by calling Fabric.with(Context) prior to logging exceptions.04-22 10:14:12.023  1731  7449 E ResolverController: No valid NAT64 prefix (101, <unspecified>/0

And this is the respective screen:

import React, { Component } from 'react'import { View } from 'react-native'import MapView from 'react-native-maps'import { Appbar } from 'react-native-paper'import Database from './components/Database'const db = new Database()import styles from './components/allStyles'export default class MapScreen extends Component {  state = {    emergencies: [],  };  componentDidMount() {    db.mapOn(emergencies => {        this.setState(previousState => ({            emergencies: previousState.emergencies.concat(emergencies),        }))    })  }  render() {    k = 0    return (<View style={styles.absoluteFillView}><MapView          style={styles.absoluteFillView}          mapType={"satellite"}          showsUserLocation={true}          region={{            latitude: 39.625083,            longitude:  -79.956796,            latitudeDelta: 0.0025,            longitudeDelta: 0.0025,          }}>          {this.state.emergencies.map(emergency => {            if(k + 1 == this.state.emergencies.length){              color = 'red';            }            else {              color = 'orange';            }            return (<MapView.Marker                 key = {k++}                title={emergency.title}                description={emergency.description}                coordinate={{                  latitude: emergency.latitude,                  longitude: emergency.longitude,                }}                pinColor={color}              />            );          })}</MapView><Appbar.Header          dark = {true}          style={{backgroundColor:'#bdbdbd'}}><Appbar.Action           icon = 'arrow-left'          size = {24}            onPress={() =>{              this.props.navigation.navigate('Home')            }}        /></Appbar.Header></View>    );  }  componentWillUnmount(){    db.mapOff()  }}

Here are the event listener functions used in the componentDidMount() and componentWillUnmount():

mapOn = callback => {    firebase.database().ref('alerts/emergency/').on('child_added', snapshot => {        callback(this.edit(snapshot))    })}mapOff = () => {    firebase.database().ref('alerts/emergency/').off()}edit = snapshot => {    const { name, description } = snapshot.val()    const { longitude, latitude } = snapshot.val().location    const emergency = { title: name, description, longitude, latitude}    return emergency}Any help into what may be causing the issue would be very helpful.

ANDROID_SDK_ROOT is not defined while running detox test

Is it possible to use Ellipsis with RNPickerSelect : react-native-picker-select

$
0
0

I'm using react-native-picker-select, and I want to customize the picker (color and fontWeight).

So i set useNativeAndroidPickerStyle={false} but if the width value is longer than my picker, there is no ellipsis, and text seems troncate by the left : Android

On iOS everythings fine : iOS

Is it possible to make the Android look like iOS with useNativeAndroidPickerStyle to false so i can set the fontWeight to bold ?

<RNPickerSelect  placeholder={{}}  style={form.smallSelect}  style={{    inputIOS: {      ...form.smallInputIOS,    },    inputAndroid: {      ...form.smallInputAndroid,    },  }}  useNativeAndroidPickerStyle={false}/>...  smallInputIOS: {    color: SkinColors.green,    fontWeight: 'bold',    fontSize: normalize(15),    width: '85%',    paddingLeft: normalize(12),    borderRadius: 30,    height: normalize(30),  },  smallInputAndroid: {    color: SkinColors.green,    fontWeight: 'bold',    fontSize: normalize(15),    width: '100%',    paddingLeft: normalize(12),    borderRadius: 30,    height: normalize(30),    margin: 0,    padding: 0,  },

Thank you

Is it possible to make two mobile projects within single build?

$
0
0

I am newly join react technology, I created a small expo project but now it wants to introduce react-native, So I wil have parent (Expo Project) and child (React-Native with some differents module). How can i combine those project into one.

Is there any possibility please guide on it.

Thanks in advance

Unhandled promise rejection: TypeError: Network request failed expo node backend

$
0
0

I have a node backend that my expo app is querying. The node-express-mongo backend works just perfect which I can verify using GET Request from Postman but I get unhandled promise rejection Network Failed error in my app

Complete error:

[Unhandled promise rejection: TypeError: Network request failed]- node_modules/whatwg-fetch/dist/fetch.umd.js:473:29 in xhr.onerror- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:574:29 in setReadyState- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:388:25 in __didCompleteResponse- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0* [native code]:null in callFunctionReturnFlushedQueue

here's my code:

api.js

export const fetchMeetups = () =>    fetch('http://localhost:3000/api/meetups')        .then(res => res.json());

App.js

import * as React from 'react';import { Platform, StyleSheet, Text, View, ActivityIndicator } from 'react-native';import { fetchMeetups } from './constants/api'; const instructions = Platform.select({  ios: `Press Cmd+R to reload,\nCmd+D or shake for dev menu`,  android: `Double tap R on your keyboard to reload,\nShake or press menu button for dev menu`,});class App extends React.Component{  static defaultProps = {    fetchMeetups  }  state = {    loading: false,    meetups: []  }  async componentDidMount(){    this.setState({loading: true});    const data = await this.props.fetchMeetups();    setTimeout(() => this.setState({loading: false, meetups: data.meetups}),2000)  }  render(){    if(this.state.loading){      return(<ActivityIndicator size="large"/>      )    }    return (<View style={styles.container}><Text>MeetupME</Text></View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});

index.js

import { registerRootComponent } from 'expo';import App from './App';// registerRootComponent calls AppRegistry.registerComponent('main', () => App);// It also ensures that whether you load the app in the Expo client or in a native build,// the environment is set up appropriatelyregisterRootComponent(App);

--------------UPDATE------------------added a catch block to fetch & getting this new error

Network request failed- node_modules/whatwg-fetch/dist/fetch.umd.js:473:29 in xhr.onerror- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:574:29 in setReadyState- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:388:25 in __didCompleteResponse- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0* [native code]:null in callFunctionReturnFlushedQueue

emulator

postman

missing script: build:android in vue native

$
0
0

I want to build an apk file like Android studio in Vue native but getting this error:

missing script: build:androidam i missing something in my package.json?

"scripts": {"start": "expo start","android": "expo start --android","ios": "expo start --ios","web": "expo start --web","eject": "expo eject"  },

android.content.pm.PackageManager $NameNotFoundException com.google.android.webview React Native

$
0
0

This application was working just fine before attempting to create an apk file. I created a signed keystore and tried to generate an apk file but that apk crashes and now when I try to run it in physical device it gives this error. I am unable to understand what sort of error this is. Can anyone help me guide through this?I am attaching the screenshot as well as my androidxml file.<code>Error</code>errorlog

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.***">

<uses-permission android:name="android.permission.INTERNET" /><application  android:name=".MainApplication"  android:label="@string/app_name"  android:icon="@mipmap/ic_launcher"  android:roundIcon="@mipmap/ic_launcher_round"  android:allowBackup="false"  android:theme="@style/AppTheme"><activity    android:name=".MainActivity"    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></activity><activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /><service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService"><intent-filter><action android:name="com.google.firebase.MESSAGING_EVENT" /></intent-filter></service><service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService"><intent-filter><action android:name="com.google.firebase.INSTANCE_ID_EVENT"/></intent-filter></service><service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" /><meta-data    android:name="com.google.firebase.messaging.default_notification_channel_id"    android:value="@string/default_notification_channel_id"/><meta-data

android:name="com.google.android.geo.API_KEY" android:value="****"/>

<receiver android:name="io.invertase.firebase.notifications.RNFirebaseNotificationReceiver"/><receiver android:enabled="true" android:exported="true"  android:name="io.invertase.firebase.notifications.RNFirebaseNotificationsRebootReceiver"><intent-filter><action android:name="android.intent.action.BOOT_COMPLETED"/><action android:name="android.intent.action.QUICKBOOT_POWERON"/><action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/><category android:name="android.intent.category.DEFAULT" /></intent-filter></receiver></application>

How to fix Network Response Timed Out when Using Expo on Windows?

$
0
0

enter image description here

I am using same wifi network.. I checked my ip address, but I don't understand how to get same build output on same network address


React Native Navigation Stack Navigator Back Button Displayed Incorrectly on Android

$
0
0

The Problem I have is best described with this GIF:

enter image description here

As you may notice, when I select the Back Button from the Stack Navigator, this weird bug appears, where the width of the back button seems to be too high.I wasn't able to fix this with the headerBackTitleStyle option.

This is my code:

export const AccountStackNavigation = () => (<Stack.Navigator initialRouteName="Account"><Stack.Screen      name="Account"      component={AccountPage}      options={({navigation}) => ({        headerRight: () => (<TouchableOpacity            onPress={() => navigation.navigate('Settings')}            style={globalStyles.borderRadius}><UilCog size={Typography.TITLE_1} color={Colors.TEXT_PRIMARY} /></TouchableOpacity>        ),        headerRightContainerStyle: globalStyles.stackContainer,        headerTitleAlign: 'center',      })}></Stack.Screen>    // here's the settings stack screen where the problem occurs<Stack.Screen      name="Settings"      component={SettingsPage}      options={{        headerBackTitleVisible: true,        headerBackTitle: 'Done',        headerTitleAlign: 'center',      }}></Stack.Screen></Stack.Navigator>);

I was sadly unable to find a similar problem online, so my guess would be that something with my code isn't right?

Also something to note; It works perfectly find on IOS. A possibile solution would be of course, that I write a back button from scratch for Android, however I am hoping on a better solution.

react-native :app:installDebug FAILED

$
0
0

Install APK debug to my device failed.

jianglinghuadeMacBook-Pro:hello jianglinghua$ react-native run-androidJS server already running.Building and installing the app on the device (cd android && ./gradlew installDebug...WARNING [Project: :app] Current NDK support is deprecated.  Alternative will be provided in the future.:app:preBuild UP-TO-DATE......:app:assembleDebug UP-TO-DATE:app:installDebugInstalling APK 'app-debug.apk' on 'MI NOTE LTE - 6.0.1'Unable to install /Users/jianglinghua/Desktop/hello/android/app/build/outputs/apk/app-debug.apkcom.android.ddmlib.InstallException: Failed to establish session    at com.android.ddmlib.Device.installPackages(Device.java:894)    ........    at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61):app:installDebug FAILEDFAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:installDebug'.> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to establish session* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.BUILD FAILEDTotal time: 13.945 secs

Could not install the app on the device, read the error above for details. Make sure you have an Android emulator running or a device connected and have set up your Android development environment:https://facebook.github.io/react-native/docs/android-setup.html

I look at my devices

jianglinghuadeMacBook-Pro:hello jianglinghua$ adb devicesList of devices attached98333978    device

How to add safeArea in React Native for Android

$
0
0

I'm developing an app with react native and testing it with my android emulator.The SafeAreaView component in React Native is currently applicable only to ios devices with ios version 11 or later.

Did someone know about anything to solve this issue?

java.lang.ClassNotFound: Didn't find class “android.support.multidex.MultiDexApplication” on path: DexPathList

$
0
0

I`m trying to enable multidex on my app of react-native but I get a error when the app is launched.

I already did the steps in the official doc of android: https://developer.android.com/studio/build/multidex

My build.gradel (android/app/build.gradel)

 defaultConfig {        ....        versionName "1.0"        multiDexEnabled true    }    ...    dependencies {      implementation 'com.android.support:multidex:1.0.3'      implementation fileTree(dir: "libs", include: ["*.jar"])      implementation "com.facebook.react:react-native:+"  // From node_modules      implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"       ...    }

And my AndroidManifest.xml:

<application  android:name="android.support.multidex.MultiDexApplication"  android:label="@string/app_name"  android:icon="@mipmap/ic_launcher"  android:roundIcon="@mipmap/ic_launcher_round"  android:allowBackup="false"  android:theme="@style/AppTheme">  ...</application>

I don't understand what the problem is, why the error keeps happening when I start de app.

I`m using react-native V0.62.2

ReactNative PanResponder limit X position

$
0
0

I'm building a Music Player and I'm focusing on the progress bar.I was able to react to swipe gestures, but I cant limit how far that gesture goes.

This is what I've done so far. I've reduced everything to the minumal:

constructor(props) {    super(props);    this.state = {      pan: new Animated.ValueXY()    };}componentWillMount() {    this._panResponder = PanResponder.create({        onMoveShouldSetResponderCapture: () => true,        onMoveShouldSetPanResponderCapture: () => true,        onPanResponderGrant: (e, gestureState) => {            // Set the initial value to the current state            let x = (this.state.pan.x._value < 0) ? 0 : this.state.pan.x._value;            this.state.pan.setOffset({ x, y: 0 });            this.state.pan.setValue({ x: 0, y: 0 });        },        onPanResponderMove: Animated.event([            null, { dx: this.state.pan.x, dy: 0 },        ]),        onPanResponderRelease: (e, { vx, vy }) => {            this.state.pan.flattenOffset();        }    });}render() {    let { pan } = this.state;    // Calculate the x and y transform from the pan value    let [translateX, translateY] = [pan.x, pan.y];    // Calculate the transform property and set it as a value for our style which we add below to the Animated.View component    let imageStyle = { transform: [{ translateX }, { translateY }] };    return (<View style={styles.container}><Animated.View style={{imageStyle}} {...this._panResponder.panHandlers} /></View>    );}

Here there is an image showing what the problem is.

Initial position:

Initial position

Wrong Position, limit exceeded:

Wrong position

So the idea is to stop keeping moving once the limit (left as well as right) is reached. I tried checking if _value < 0, but it didn't work since It seems to be an offset, not a position.

Well any help will be appreciated.

can't send http request on android release apk (built in react-native)

$
0
0

I am sending an HTTP request with dummy username and password to test the my App.

On working with non-release variants i.e react-native run-android, I am capable of sending http requests to the server and receive a token, thus, logging in. However, this is not true when I try it on the release version of the apk react-native run-android --variant=release

Note: It allow works on ios after making

<key>NSAllowsArbitraryLoads</key><true/>

Appcenter Codepush integration. Cannot add task 'bundleDebugJsAndAssets' as a task with that name already exists

$
0
0

Steps to Reproduce

  1. yarn add react-native-codepush
  2. Add following to android/app/build.gradle
apply from: "../../node_modules/react-native/react.gradle"apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
  1. Add following to MainApplication.java
...import com.microsoft.codepush.react.CodePush;...        @Override        protected String getJSBundleFile() {            return CodePush.getJSBundleFile();        }
  1. Add the following to strings.xml
<string name="CodePushDeploymentKey" moduleConfig="true">MYKEY</string>

Expected Behavior

Build should be successful

Actual Behavior

What actually happens?

 $ react-native run-androidinfo Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.Jetifier found 998 file(s) to forward-jetify. Using 4 workers...info JS server already running.info Installing the app...> Configure project :appWARNING: BuildType(debug): resValue 'react_native_dev_server_port' value is being replaced: 8081 -> 8081WARNING: BuildType(debug): resValue 'react_native_inspector_proxy_port' value is being replaced: 8081 -> 8081WARNING: BuildType(release): resValue 'react_native_dev_server_port' value is being replaced: 8081 -> 8081WARNING: BuildType(release): resValue 'react_native_inspector_proxy_port' value is being replaced: 8081 -> 8081Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.Use '--warning-mode all' to show the individual deprecation warnings.See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warningsFAILURE: Build failed with an exception.* Where:Script '/Users/user/Desktop/project/app/native/node_modules/react-native/react.gradle' line: 118* What went wrong:A problem occurred configuring project ':app'.> Cannot add task 'bundleDebugJsAndAssets' as a task with that name already exists.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 4serror Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081FAILURE: Build failed with an exception.* Where:Script '/Users/user/Desktop/project/app/native/node_modules/react-native/react.gradle' line: 118* What went wrong:A problem occurred configuring project ':app'.> Cannot add task 'bundleDebugJsAndAssets' as a task with that name already exists.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 4s    at makeError (/Users/user/Desktop/project/app/native/node_modules/execa/index.js:174:9)    at /Users/user/Desktop/project/app/native/node_modules/execa/index.js:278:16    at processTicksAndRejections (internal/process/task_queues.js:97:5)    at async runOnAllDevices (/Users/user/Desktop/project/app/native/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:5)    at async Command.handleAction (/Users/user/Desktop/project/app/native/node_modules/@react-native-community/cli/build/index.js:186:9)error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

  • react-native-code-push version: ^6.2.1
  • react-native version: 0.62.2
  • iOS/Android/Windows version: unknown
  • Does this reproduce on a debug build or release build? only checked on debug
  • Does this reproduce on a simulator, or only on a physical device? build error

External SDKs

I do have an external SDK in build.gradle. I don't know if that is the reason for this error.

buildscript {    repositories {        maven { url 'https://plugins.gradle.org/m2/' } // Gradle Plugin Portal    }    dependencies {        classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.6, 0.99.99]'    }}apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'apply plugin: "com.android.application"apply from: "../../node_modules/react-native/react.gradle"apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"....apply plugin: 'com.google.gms.google-services'

What I tried.

I moved two declarations to the bottom of app/build.gradle. but the error remains same

// puts all compile dependencies into folder libs for BUCK to usetask copyDownloadableDepsToLibs(type: Copy) {    from configurations.compile    into 'libs'}apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)apply from: "../../node_modules/react-native/react.gradle"apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

Some article state to remove the line apply from: "../../node_modules/react-native/react.gradle". But New error is

yarn run v1.22.4$ react-native run-androidinfo Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.Jetifier found 998 file(s) to forward-jetify. Using 4 workers...info JS server already running.info Installing the app...Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.Use '--warning-mode all' to show the individual deprecation warnings.See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warningsFAILURE: Build failed with an exception.* What went wrong:Could not determine the dependencies of task ':app:mergeDebugAssets'.> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.> Could not resolve project :react-native-code-push.     Required by:         project :app> Unable to find a matching configuration of project :react-native-code-push:          - None of the consumable configurations have attributes.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 3serror Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081FAILURE: Build failed with an exception.* What went wrong:Could not determine the dependencies of task ':app:mergeDebugAssets'.> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.> Could not resolve project :react-native-code-push.     Required by:         project :app> Unable to find a matching configuration of project :react-native-code-push:          - None of the consumable configurations have attributes.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 3s    at makeError (/Users/user/Desktop/project/app/native/node_modules/execa/index.js:174:9)    at /Users/user/Desktop/project/app/native/node_modules/execa/index.js:278:16    at processTicksAndRejections (internal/process/task_queues.js:97:5)    at async runOnAllDevices (/Users/user/Desktop/project/app/native/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:5)    at async Command.handleAction (/Users/user/Desktop/project/app/native/node_modules/@react-native-community/cli/build/index.js:186:9)error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I removed both line (which actually don't make any sense) the error is

yarn run v1.22.4$ react-native run-androidinfo Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.Jetifier found 998 file(s) to forward-jetify. Using 4 workers...info JS server already running.info Installing the app...Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.Use '--warning-mode all' to show the individual deprecation warnings.See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warningsFAILURE: Build failed with an exception.* What went wrong:Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.> Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'.> Could not resolve project :react-native-code-push.     Required by:         project :app> Unable to find a matching configuration of project :react-native-code-push:          - None of the consumable configurations have attributes.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 4serror Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081FAILURE: Build failed with an exception.* What went wrong:Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.> Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'.> Could not resolve project :react-native-code-push.     Required by:         project :app> Unable to find a matching configuration of project :react-native-code-push:          - None of the consumable configurations have attributes.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 4s    at makeError (/Users/user/Desktop/project/app/native/node_modules/execa/index.js:174:9)    at /Users/user/Desktop/project/app/native/node_modules/execa/index.js:278:16    at processTicksAndRejections (internal/process/task_queues.js:97:5)    at async runOnAllDevices (/Users/user/Desktop/project/app/native/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:5)    at async Command.handleAction (/Users/user/Desktop/project/app/native/node_modules/@react-native-community/cli/build/index.js:186:9)error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

React Native - change icon color on press

$
0
0

When the 'check' icon is being pressed, I want it to change color from default red to green. In my case, while I have another function for onpress, I use this conditional color statement

<Icon name="check" size={20} color={this.state.isCompleted ? '#1DA664' : '#DE5347'} onPress={() => this.isCompleted(rowData)} isCompleted={this.state.isCompleted}/>

I call this function for onpress

isCompleted(rowData){     if (this.state.status != 'new'){  this.itemsRef.child(rowData.id).update({    status: 'completed'  });  this.setState({    isCompleted: true  })}}

When one of the icon in a list view is pressed, the icon changed color but everytime the color change is the icon of last item.

As shown in pic,

enter image description here

When I press on item 'cook lunch' , it should be the icon in cook lunch turn to green. Instead, the icon in the last item 'hello' changed. Totally clueless of what did wrong. Appreciate if someone to guide me.

Thanks in advanced.

Function AsyncStorage in ComponentWillMount() don't execute before this render

$
0
0

I want change my state 'entree' before render with a function asyncstorage for change color button when I reset page. But this problem its my function _getData don't work in componentwillmount but after this render.I try to take of 'await' in my function _getData that its working my function runs just before the render but he don't return true or false, he return [object, Object].

My code:

    constructor(props) {        super(props)        this.state = {             entree: true,            colorButton: null,            icoButton: null,        }        console.log("constructeur")    }     _getData = async () => {        try {            const value = await AsyncStorage.getItem('en')             if (value !== null) {                this.setState({                     entree: JSON.parse(value),                    loading : 'true',                })                console.log("Donnée recupéré : "+ value)            }        }catch(e) {            console.log(e);        }    }     _setData = async () => {          try {            await AsyncStorage.setItem('en', JSON.stringify(this.state.entree));            console.log("Donnée Sauvegardé : "+ this.state.entree)          } catch (err) {            console.log(err);          }    };    UNSAFE_componentWillMount(){        console.log("ComponentWillMount")           this._getData();         if(this.state.entree == false)          {              this.setState({                  colorButton: 'red',                  icoButton: 'sign-out-alt',              });          }         if(this.state.entree == true)          {              this.setState({                  colorButton: 'green',                  icoButton: 'sign-in-alt',              });          }            }    async componentDidMount(){        console.log("componentDidMount")          }    UNSAFE_componentWillUpdate(){        this._setData();        console.log("componentWillUpdate")    }    componentDidUpdate(){        console.log('componentDidUpdate')    }    componentWillUnmount() {        clearInterval(this.interval);        console.log("componentWillUnmount")    }    render() {        console.log("render : "+ this.state.entree);            return (<View style = {styles.main_containers}><View style={styles.containers_clock}><Text style={styles.style_text}>                               {this.state.time}    </Text> </View><View style={styles.containers_clock}><Text style = {styles.imei_text}>                            {this.state.DeviceIMEI}</Text></View><View style = {styles.containers_button_imei}><FontAwesome5.Button  style = {styles.button_imei}                                     name={this.state.icoButton}                                    backgroundColor='none'                                    onPress={() => this._getDeviceIMEI()}                                     size={250}                                     color={this.state.colorButton}                        /> </View></View>            )          }    }export default PointingMy Cycle of life : [Thu Jun 11 2020 11:00:45.363]  LOG      constructeur[Thu Jun 11 2020 11:00:45.366]  LOG      ComponentWillMount[Thu Jun 11 2020 11:00:45.367]  LOG      render : true[Thu Jun 11 2020 11:00:45.475]  LOG      componentDidMount[Thu Jun 11 2020 11:00:45.665]  LOG      componentWillUpdate[Thu Jun 11 2020 11:00:45.667]  LOG      render : true[Thu Jun 11 2020 11:00:45.669]  LOG      componentDidUpdate**[Thu Jun 11 2020 11:00:45.670]  LOG      Data comming : true[Thu Jun 11 2020 11:00:45.838]  LOG      Data save: true**

Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`. , Failed to install the app

$
0
0

enter image description here

Im new to React-Native and this is driving me insane, I just want to launch the project in the and view the project in the emulator so I can just start coding, I have tried downloading the latest version of JDK, which is apparently not even needed since android studio comes bundled with its own version & also how do I know what version of JDK my android studio comes bundled with ? I have been trying to fix this for days now, I even got Blue screen of death when after I messed around with the enviroment variables so now I am desperate and want someone to point me in the right direction.

React Native adb reverse ENOENT

$
0
0

I am trying to get React-Native to work with Android V4.2.2 (Genymotion) but I am unable to test the app on the Emulator. When I ran react-native run-android, I get this error Could not run adb reverse: spawnSync

Here is a log

JS server already running.Running ~/Library/Android/sdk/platform-tools/adb reverse tcp:8081 tcp:8081Could not run adb reverse: spawnSync ~/Library/Android/sdk/platform-tools/adb ENOENTBuilding and installing the app on the device (cd android && ./gradlew installDebug...FAILURE: Build failed with an exception.* What went wrong:A problem occurred configuring project ':app'.> The SDK directory '~/Library/Android/sdk' does not exist.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.BUILD FAILEDTotal time: 3.785 secsCould not install the app on the device, read the error above for details.Make sure you have an Android emulator running or a device connected and haveset up your Android development environment:https://facebook.github.io/react-native/docs/android-setup.html

NOTE: In the log it saids SDK directory does not exist, I have double check that I do have the SDK installed in that directory.

I found my android emulator when executing adb devices

List of devices attached192.168.56.101:5555 device

I have tried the following steps from Stack Overflow post, but still no luckhttps://stackoverflow.com/a/38536290/4540216

React native expo Android emulator is not rendering uri image

$
0
0

I have Android emulator rendering text successfully, however it is not rendering image with uri. Funny thing iOS simulator rendering both text and image. What could be the problem? should I add anything for Android? here is my code,

export default function App() {  return (<View style={styles.container}><Image        source={{          width: 200,          height: 300,          uri: "https://picsum.photos/200/300",        }}      /><Text> App</Text></View>  );}
Viewing all 28469 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>