I need to use navigation when pressing the bag icon in the header. When I press it, I get the following error:

undefined is not an object (evaluating '_this.props.navigation')

Screen with bag icon in the header

App.js file:

import React, { Component } from 'react';import {  Button,  Text,  TextInput,  View,  StyleSheet,  TouchableOpacity,  Image,} from 'react-native';import { Header } from 'react-navigation-stack';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import TelaInicial from './components/telaInicial';import TelaCarrinho from './components/telaCarrinho';const Stack = createStackNavigator();export default function AppContainer() {  return (<NavigationContainer><Stack.Navigator initialRouteName="Inicial"><Stack.Screen          name="Inicial"          component={TelaInicial}          options={{            title: '',            headerTintColor: 'white',            headerStyle: { backgroundColor: '#6b39b6', height: 100 },            height: Header.height,            headerLeft: null,            headerTitle: (<View><TouchableOpacity                  onPress={() => {                    this.props.navigation.navigate('Carrinho');                  }}><Image                    style={{                      width: 29,                      height: 29,                      marginTop: 0,                      marginLeft: 170,                    }}                    source={require('./assets/shopping bag.png')}                  /></TouchableOpacity></View>            ),          }}        /><Stack.Screen          name="Carrinho"          component={TelaCarrinho}          options={{            title: '',            headerTintColor: 'white',            headerStyle: { backgroundColor: '#6b39b6', height: 100 },            height: Header.height,            headerBackTitle: 'Voltar',            headerTitle: 'Carrinho'.toUpperCase(),            headerTitleStyle: {              fontSize: 17,              fontWeight: 600,            },          }}        /></Stack.Navigator></NavigationContainer>  );}

Seems simple to make it work, but I've tried many alternatives and it didn't work. Do you guys have any idea how I can fix it?

I have a link to Expo: https://snack.expo.io/@rapolasls/eager-crackers

Thank you!

Trying to get an android version of a react-native 0.61.2 app running...

The app intends to use react-native-geolocation-service but can not get past this error:

"Error: @react-native-community/geolocation: NativeModule.RNCGeolocation is null."

I understand that react-native-geolocation-service uses @react-native-community/geolocation on iOS but this is android. I have searched the entire project for the string RNCGeolocation and it's not there. How can I get running with react-native-geolocation-service on android?

I am handling the keyboard in my app... I have read that the best way to animate it on android is using the LayoutAnimation API, and yeah it works fine but when I navigate back to other screens in which keyboard doesn't appear an unknown View with the same height of my keyboard is shown.

Has anyone experimented with this problem? On iOS it works perfectly, but not on Android.

I have tried to do UIManager.setLayoutAnimationEnabledExperimental(false); when my component unmounts and this View doesn't appear when going back, but if I open the keyboard again the animation disappears.

I'm new to the detox framework and end-to-end testing on react native.

I followed all the steps described in this tutorial ()

I managed to start the "detox test", but unfortunately, I don't know why the apk generated, does not render the assets and the images correctly.

as you can see below the differences between the apk generated by detox and mocha, and the real apk generated by the react-native run-android command :

[![enter image description here][1]][1]

[![enter image description here][2]][2]

Thanks you.

apk generated by the react-native run-android command :

apk generated by the command detox build --configuration android.emu.debug :

I have an app built on React Native whose core functionality is to capture some images, analyse and process the images and return some results. As of now the image analysis was done in the server side using python and opencv. Only the results and the resultant images were returned. Now as per the requirement by the clients, due to privacy concerns, they want the image processing to be done on the mobile app itself. (As the images are medical related and they don't want the images to be sent to the server)

So, my question is, if there is a way I can use my existing python with opencv code and integrate it directly into react-native/android/ios?

Right now what I am doing is using the library react-native-opencv3 , numjs, etc to re-write the algorithm in react-native as I feel comfortable using javascript (I have no experience in swift). However not all opencv, numpy functions are supported by these libraries and it is consuming all the time to re-write the code.

I found about using jython, python-for-android and swift-python-interoperabilityCan I use these to directly integrate python opencv code into my current application? If yes, it would be great if someone can help me with some small example or guidelines as I cannot find anything.

Other method that I considered was:

Re-write the algorithm using native code and opencv-android and opencv-ios sdks and create the react-native bridge to call the algorithm. (I am guessing it will take a lot of time as I have to write in 2 different languages. Time that I don't have)

I have an Android native module in a React Native app. From there I start an Activity and on some event from it (if it matters, this event is not received from the Main thread), I'm sending an event to JS via:

reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);

When I'm catching the event in JS I do:

new Promise((resolve) => {      setTimeout(() => {        console.log("Resolving promise")      }, 1000)

The problem is that the promise does not resolve after 1 second, but only when I quit the Activity (the one that I called from a native module).

I'm pretty new to React native so I'm not sure what blocks the promise resolution. Any hints are highly appreciated.

I am new to react-native / android development. I have created a react-native project. I have to run it on a real physical android device. I am following the react-native official documentation. When i do react-native run-android, i get the following error.

debug Running command "cd android && gradlew.bat app:installDebug -PreactNativeDevServerPort=8081"'gradlew.bat' is not recognized as an internal or external command,operable program or batch file.error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.Error: spawn gradlew.bat ENOENT

I did check adb device, my device is attached with the system but i am unable to install/run the app on real android device.

Can anyone help me ? I am stuck on this issue for 2 days.

I have an app that needs to be able to use two drawer navigators, one on the left and on on the right side of the header.

I am at the point where I can get both drawers to open with the slide gesture, however I need to be able to open it programmatically. I have found the navigation.openDrawer() function only works with one of the drawers and not the other because it is only able to use one of the navigation props (whichever comes first) from my drawer navigators.

Below are my rendering functions:

const LeftStack = createStackNavigator(  {    LeftDrawerStack  },  {    navigationOptions: ({navigation}) => ({      headerLeft: (<TouchableOpacity onPress={() => navigation.openDrawer()}><Icon style={{marginLeft: 10}} name='menu'/></TouchableOpacity>      )    })  });const RightStack = createStackNavigator(  {    RightDrawerStack  },  {    navigationOptions: ({navigation}) => ({      headerRight: (<TouchableOpacity onPress={() => navigation.openDrawer()}><Icon style={{marginRight: 10}} name='ios-bulb'/></TouchableOpacity>      )    })  });export const RouteStack = createStackNavigator(  {    screen: LoginScreen,    navigationOptions: ({navigation}) => ({      header: null    }),    LeftStack,    RightStack  });

and here are my drawer routes:

export const LeftDrawerStack = createDrawerNavigator(  {    Dashboard: {      screen: DashboardScreen    },    History: {      screen: HistoryScreen    },    Privacy: {      screen: PrivacyPolicyScreen    },    TermsAndConditions: {      screen: TermsAndConditionsScreen    }  }, {    initialRouteName: 'Dashboard',    contentComponent: LeftDrawerScreen  });export const RightDrawerStack = createDrawerNavigator(  {    LeftDrawerStack,    Settings: {      screen: SettingsScreen    }  }, {    drawerPosition: 'right',    contentComponent: RightDrawerScreen  });

Here is a picture of what I have the navigation looking like so far, however both of the hamburger menus are opening up the same menu on the right instead of one menu on their respective sides.

I may be missing some parts but I will be sure to post more info if I forgot any!

After running npx react-native run-android i got the common issue "Task 'installDebug' not found in project ':app".'

Following an advice i tried to do this https://reactnative.dev/docs/signed-apk-android, but when i run:$ ./gradlew bundleRelease from android directory i got: "Task 'bundleRelease' not found in root project 'MoscowForDummies'."

My gradle.properties:

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystoreMYAPP_UPLOAD_KEY_ALIAS=my-key-aliasMYAPP_UPLOAD_STORE_PASSWORD=Profit***MYAPP_UPLOAD_KEY_PASSWORD=Profit***

Part of my build.gradle:

android {compileSdkVersion rootProject.ext.compileSdkVersioncompileOptions {    sourceCompatibility JavaVersion.VERSION_1_8    targetCompatibility JavaVersion.VERSION_1_8}defaultConfig {    applicationId "com.moscowfordummies"    minSdkVersion rootProject.ext.minSdkVersion    targetSdkVersion rootProject.ext.targetSdkVersion    versionCode 1    versionName "1.0"}signingConfigs {    release {        if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {            storeFile file(MYAPP_UPLOAD_STORE_FILE)            storePassword MYAPP_UPLOAD_STORE_PASSWORD            keyAlias MYAPP_UPLOAD_KEY_ALIAS            keyPassword MYAPP_UPLOAD_KEY_PASSWORD        }    }}

and my ~/.bash_profile:

export ANDROID_HOME=$HOME/Android/Sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-tools

Does anybody have any advice how to fix the problem?

I'm using a mapbox in React native.I get the following errorWhat is the solution to this problem?

use map box : error (evaluating’MapboxGL.StyleURL’)

I want a react-native app, when started on a device to check for some update and download it and use it instead of old js file.I have checked out Codepush but as an alternative I am searching for a simple and clean implementation for a small case usage.

I just want some js code/file to be updated without bundling the app again or updating it through playstore, maybe suggest some other options too.

I am currently having an annoying problem with (I think) LayoutAnimation.

My problem is the following, I have an app where I can search throughout my FlatList, with a search button I open the panel and get the focus on the TextInput which open the keyboard. The problem comes when I want to close it for some reason if I close it manually with the back button of the phone It closes and everything is fine same by tapping on the list to close it, but the problem comes when I close the search (so the TextInput is remove from the screen and the keyboard is closed automatically even without calling .blur() but I also tried and got the same problem.

Here are some screens to explain :

Now here is some chunk of the code :

 _onPressSearch() {LayoutAnimation.easeInEaseOut();this.setState({   showSearch: !this.state.showSearch }, function () {  ( this.state.showSearch ?     this.refs.searchInput.focus() :     this.setState({      searchString: "",      filtered: null    }) )});

}

    var searchBar = (this.state.showSearch ?<View><TextInput      style={styles.searchInput}      ref='searchInput'      onChangeText={this._onChangeText.bind(this)}      value={this.state.searchString}      underlineColorAndroid={Colors.search}      maxLength={25}      autoCapitalize='none'      autoCorrect={false}      placeholder={I18n.t('search')}      placeholderTextColor={Colors.search}      clearButtonMode='never' /></View> : <View />);<List style={{ flex: 1 }}><FlatList        data={(this.state.filtered === null ? this.state.listings : this.state.filtered)}        keyExtractor={this._keyExtractor}        extraData={this.state}        renderItem={this._renderItem} /></List>

I am using :

"react": "16.0.0-alpha.12","react-native": "0.52.0",

which I updated from 0.49.4 to 0.52.0 hoping it would fix the problem but seems not

For information : no problem in IOS, and I did active the animation on android to get the animation.Furthermore, if I remove the animation LayoutAnimation.easeInEaseOut();everything works except that I don't have animation of course.

Thanks a lot

I am using react-native and currently started using redux and created one app but when I am running that app on the emulator it is working fine. Then I connected my mobile with android 6 through USB on that also it is working. But in other devices of Android 8 it is not working then I have changed targetSdkVersion to 28 then also it not working I am not getting what is the problem.

Following is my package.json

{"name": "Demo","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start","test": "jest"  },"dependencies": {"react": "16.6.3","react-native": "^0.57.8","react-native-flash-message": "^0.1.10","react-native-linear-gradient": "^2.5.3","react-native-modal-datetime-picker": "^6.0.0","react-native-navigation": "^2.8.0","react-native-tab-view": "^1.3.2","react-native-vector-icons": "^6.2.0","react-redux": "^6.0.1","redux": "^4.0.1","redux-thunk": "^2.3.0"  },"devDependencies": {"babel-core": "^7.0.0-bridge.0","babel-jest": "24.0.0","jest": "24.0.0","metro-react-native-babel-preset": "0.51.1","react-test-renderer": "16.6.3"  },"jest": {"preset": "react-native"  }}

android/build.gradle

buildscript {    ext {        buildToolsVersion = "28.0.3"        minSdkVersion = 19        compileSdkVersion = 28        targetSdkVersion = 28        supportLibVersion = "28.0.0"    }    repositories {        google()        mavenLocal()        mavenCentral()        jcenter()    }    dependencies {        classpath 'com.android.tools.build:gradle:3.2.1'        // NOTE: Do not place your application dependencies here; they belong        // in the individual module build.gradle files    }}allprojects {    repositories {        google()        mavenCentral()        mavenLocal()        jcenter()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }        maven { url 'https://jitpack.io' }    }}task wrapper(type: Wrapper) {    gradleVersion = '4.7'    distributionUrl = distributionUrl.replace("bin", "all")}subprojects { subproject ->    afterEvaluate {        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {            android {                variantFilter { variant ->                    def names = variant.flavors*.name                    if (names.contains("reactNative51") || names.contains("reactNative55")) {                        setIgnore(true)                    }                }            }        }    }}

I am not getting where is the problem. Thanks in advance

I am trying to get EXIF Metadata informations before capturing Image. I am using React Native Camera library for implementing camera and their properties for defaults settings. In my point of view after capturing only i am getting EXIF metadata value in both Android and iOS. React native camera documentation link.

 render() {    return (<View style={{ backgroundColor: 'transparent', flex: 1 }}><View style={styles.MainContainer}><StatusBar barStyle='light-content'></StatusBar><View style={[styles.TitleView]}><Text style={styles.title}>Camera</Text></View><View style={{                    flexDirection: 'column',                    justifyContent: 'center',                    backgroundColor: 'transparent',                    marginBottom: 20,                }}><RNCamera                    ref={ref => {                        this.camera = ref;                    }}                    onBarCodeRead={(code) => {                        console.log('bar', code)                      // if (this.state.barcode === '') this._onBarcodeRead(code)                      }}                    style={styles.preview}                    type={RNCamera.Constants.Type.back}                    flashMode={RNCamera.Constants.FlashMode.off}                    whiteBalance={RNCamera.Constants.WhiteBalance.auto}                    autoFocus={RNCamera.Constants.AutoFocus.on}                    autoFocusPointOfInterest={ {x: 0.5, y: 0.5 }}                    exposure={0.5}                    focusDepth={1.0}                    cameraViewDimensions={{                        width: CAM_VIEW_WIDTH,                        height: CAM_VIEW_HEIGHT,                    }}                    showViewFinder={true}                    androidCameraPermissionOptions={{                        title: 'Permission to use camera',                        message: 'We need your permission to use your camera',                        buttonPositive: 'Ok',                        buttonNegative: 'Cancel',                    }}                    androidRecordAudioPermissionOptions={{                        title: 'Permission to use audio recording',                        message: 'We need your permission to use your audio',                        buttonPositive: 'Ok',                        buttonNegative: 'Cancel',                    }}                    onGoogleVisionBarcodesDetected={({ barcodes }) => {                        console.log(barcodes);                    }}>                    {/* <View                    style={{                    // position: 'absolute',                    // top: 20,                    // right: 20,                    alignSelf: 'center',                    justifyContent: 'center',                    width: frameHeight,                    height: frameWidth,                    borderWidth: 2,                    borderColor: 'white',                    opacity: 0.5,                    }}                /> */}<View style={{ flexDirection: 'row', justifyContent: 'center', }}><TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}><Text style={{ fontSize: 14 }}> Click </Text></TouchableOpacity></View></RNCamera></View><View style={{ backgroundColor: 'red' }}><Text>Back camera: {RNCamera.Constants.Type.back}</Text><Text>autoFocusPointOfInterest</Text></View></View></View>    )}}takePicture = async () => {        if (this.camera) {            const options = { quality: 0.5, base64: true, exif: true };            this.setState({loading: true})            const data = await this.camera.takePictureAsync(options);            console.log(data); // This data provide EXIF data        }    };

In Native iOS we get live metadata using CMSampleBuffer delegate. Is there any possibility to get Exif data before taking pictures.

I have set up the react native project for the login authentication of Instagram and fetch the feed (Video) from the account. I have used this API but got the error like invalid token.

so, any one have idea about this situation ?

https://api.instagram.com/v1/users/self/media/recent/?access_token={access-token}

I have a React Native App that uses WebView to render an HTML page from the assets. The page has some javascript that does some processing. The problem is that I cannot see the console.log statements from the web view. I have tried the Chrome Remote Remote Debugging WebViews

Here's how the code looks like. Note that for Android, I am trying to supply some native props to enable debugging.

import React from 'react';import Expo from 'expo';import { WebView } from 'react-native';export default class App extends React.Component {  render() {    const htmlURL = Expo.Asset.fromModule(require('./assets/index.html')).uri;    return (<WebView nativeConfig={{props: {webContentsDebuggingEnabled: true}}}        source={{uri: htmlURL}} />    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    alignItems: 'center',    justifyContent: 'center',  },});

Any ideas around how that might work will be highly appreciated.

I installed react native successfully and now I want to install chrome custom tab library after installation I run my app it crashes on start and the same happens to all new library any solution please?

I am getting this error on Android simulator:

React Native version mismatch:Javascript version: 0.58.5Native version: 0.59.5

I have upgraded React Native, modules, Android studio and pretty much everything i could. Everything works fine on iOS, this happens only on Android. Build is succesful

Package.json

{"name": "MyProject","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start","test": "jest"  },"dependencies": {"@react-native-community/async-storage": "^1.3.3","latlon-geohash": "^1.1.0","react": "16.8.3","react-native": "0.59.5","react-native-firebase": "^5.2.3","react-native-gesture-handler": "^1.0.16","react-native-keyboard-aware-scroll-view": "^0.8.0","react-native-linear-gradient": "^2.5.3","react-native-maps": "^0.24.2","react-native-vector-icons": "^6.4.2","react-navigation": "^3.3.2","react-redux": "^6.0.1","redux": "^4.0.1"  },"devDependencies": {"babel-core": "^7.0.0-bridge.0","babel-jest": "24.1.0","jest": "24.1.0","metro-react-native-babel-preset": "0.52.0","react-test-renderer": "16.6.3"  },"jest": {"preset": "react-native"  }}

Build.gradle

buildscript {    ext {        buildToolsVersion = "28.0.3"        minSdkVersion = 16        compileSdkVersion = 28        targetSdkVersion = 28        supportLibVersion = "28.0.0"        googlePlayServicesVersion = "15.0.1"        androidMapsUtilsVersion = "0.5+"    }    repositories {        google()        //mavenLocal()                jcenter()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }    }    dependencies {        classpath 'com.android.tools.build:gradle:3.3.0'        classpath 'com.google.gms:google-services:4.2.0'    }}allprojects {    repositories {        mavenLocal()        google()        jcenter()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }    }}/*task wrapper(type: Wrapper) {    gradleVersion = '4.7'    distributionUrl = distributionUrl.replace("bin", "all")}*/   dependencies {        implementation project(':react-native-firebase')        implementation project(':react-native-gesture-handler')        implementation fileTree(dir: "libs", include: ["*.jar"])        implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"        implementation "com.facebook.react:react-native:+"  // From node_modules        implementation project(':react-native-linear-gradient')        implementation project(':react-native-maps')         implementation "com.google.android.gms:play-services-base:16.0.1"        implementation project(':@react-native-community_async-storage')        implementation ("com.google.firebase:firebase-core:16.0.7") {            exclude group: 'com.google.android.gms'        }         implementation ("com.google.firebase:firebase-auth:16.1.0") {            exclude group: 'com.google.android.gms'        }         implementation ("com.google.firebase:firebase-database:16.0.6") {            exclude group: 'com.google.android.gms'        }    }

I have tried closing all terminals, yarn install, creating new android device. I am guessing it has to do with actual version of the React Native in Package.json, but it is the 0.59.5 and when i searched whole project i cant find any reference to 0.58.5 anywhere.

ThanksLuke

After changing the version the images stopped to change. onIndexChanged is triggered after pressing buttons, but the images does not change. It also shows only the last image instead of the first one for some reason.This component used to work but after changing to newer version this problem occurred, I changed it back to ^1.5.14 but it works the same. It could be some external problem, but I tried changing styles and images, with little effect, so I think updating to 1.6.0-rc was source of the problem.

This is my code for reference:

<Swiper     style={{ width: this.state.frameWidth, height: this.state.imageHeight, alignSelf: 'center',     alignItems: 'center', }}     showsButtons={true}     showsPagination={false}    onIndexChanged={(index) => { this.setState({ index: index }) }}     buttonWrapperStyle={styles.buttonContainer}     dotColor={colors.white}     activeDotColor={colors.darkPrimary}     nextButton={<View><Text style={styles.button}>›</Text></View>}     prevButton={<View><Text style={styles.button}>‹</Text></View>} >     { this.props.images.map((image, index) => <View key={index}         style={{ alignSelf: 'center', width: this.state.frameWidth,         height: this.state.imageHeight,                                 alignSelf: 'center', alignItems: 'center',         paddingBottom: 30, }}> <Text>{index}</Text> <Image source={image} style={{ width: this.state.imageWidth,         height: this.state.imageHeight, borderRadius: 20, }} /> </View> ) } </Swiper>

I am making react native application and one screen I am used webview for that and I want to handle onNavigationStateChange props one time call right now it is calling multiple times so any idea how can I solve this issue. refer below code

<WebView          ref={r => this.webview = r}         style={{width:globals.screenWidth, height:globals.screenHeight}}         bounces={false}         style={{ flex: 1 }}         startInLoadingState         scalesPageToFit         javaScriptEnabledAndroid={true}         javaScriptEnabled={true}         domStorageEnabled = {true}         onNavigationStateChange={data =>            this.handleNavigationStateChange(data)        }         onLoadStart={() => {             console.log("onLoadStart-->");         }}         onLoadEnd={() => {            console.log("onLoadEnd-->");         }}         source={{uri: globals.MYURL}}         onError={(error) => this.onError()}        />handleNavigationStateChange = navState => {    console.log("navState >>>>"+ JSON.stringify(navState));};

When i run above code navState >>>> print 3 times I want to handle it 1 time so how can I solve this issue? Your all suggestions are appreciable.