I have been searching for a solution for a long time, but surprisingly, I think nobody has faced it yet. So I am posting it.

I have created a simple Drawer Navigator with React Navigation V3. I have added a Menu icon, and when I click it, the drawer appears as it should be. But, no hand gesture is working. Swiping from left to right don't do anything. Even when the drawer is open, tapping on empty space doesn't close the drawer.

Here is my code:

import {
    createStackNavigator,
    createSwitchNavigator,
    createAppContainer,
    createDrawerNavigator
} from 'react-navigation';
import Home from './screens/Home';
import LoginForm from './screens/LoginForm';
import Articles from './screens/Articles';

const AuthStack = createStackNavigator({
    LoginScreen: LoginForm
});

const AppStack = createDrawerNavigator({
    HomeScreen: Home,
    ArticlesScreen: Articles
});

const RootNavigator = createSwitchNavigator(
    {
        Auth: AuthStack,
        App: AppStack
    },
    {
        initialRouteName: 'Auth'
    }
);

export default createAppContainer(RootNavigator);

I would like to know if it's possible to install a package only for iOs or Android in React Native ? I'm using tipsi-stripe for Apple Pay and there is some bugs with Android and RN0.61.5, and I don't need it on Android.

I tried to delete module from Android Studio and from packages.json and it's working but it's not clean, does someone have a better solution ?

I am new to react native and app gives an issue in security scan which is related to Update Security Provider. The application does not use the Google Play Service Updated Security Provider which may leave it vulnerable to future vulnerabilities in OpenSSL Library. I have found few solution for it on https://developer.android.com/training/articles/security-gms-provider. I have used Patch asynchronously (simply write the given code in my mainActivity) but I don't think its working because issue still persists.

I using Windows 10, coding Android and use CLI. And I using Genymotion.

I have a problem, metro bundler stuck don't loading.

I normally used the latest version but I changed the version because I had the same problem. Now it's not working again.

React native version : 0.61.5 CLI version : 2.0.1 I normally used the latest version but I changed the version because I had the same problem. Now it's not working again.

Screenshoots :

1. https://ibb.co/bP7mKDz
2. https://ibb.co/Gt2MFhv
3. https://ibb.co/Sr0V9L3

Error: EPERM: operation not permitted, chmod 'C:\Windows\System32\myapp\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\external\xsel' at Object.chmodSync (fs.js:1027:3) at Object. (C:\Windows\System32\myapp\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\copyToClipBoard.js:50:15) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object. (C:\Windows\System32\myapp\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\middleware\copyToClipBoardMiddleware.js:8:47)

I have added an onKeyPress event listener to my text input so that when a user clicks done or go or "enter" on the phone keyboard it will call my searchProducts function. I was hoping for an onSubmit type of event listener option but was not able to find anything like that so now I have resorted to simply examining each key that was pressed. When a character key is pressed such as 'j' or 'x' it triggers the onKeyPress event and calls my searchProducts function. However, when I click done with the mouse OR hit the enter key on the keyboard nothing happens. How do I get this to trigger the onKeyPress event listener??

searchProducts = (e) => {
    if (e.nativeEvent.key == "Enter"){
        this.props.searchFunc(this.state.term);
    }
}

<TextInput 
    ref='searchBar'
    style={styles.searchInput} 
    placeholder={placeholder}

    onChangeText={this.searchSuggestions}
    onKeyPress={this.searchProducts.bind(this)}
    underlineColorAndroid="transparent" 
/>

I m basically need this functionality to get location from a Bluetooth device if there is any other way to do please do tell

Any insight is greatly appreciated. Even if it's only a link to a useful article or tutorial.

I'm trying to get a grasp on handling audio that is pulled from a website. I have done my best to create a Snack that is similar to my situation.

If you look at the snack, you can see that line 10 of PlayerScreen.js has shouldPlay: set to false. If I set this to true then the audio file will begin playing as soon as you enter PlayerScreen.

The problem is that this is the only way I have managed to get the file to play, and I have no idea how to get it to stop. Ideally, I would start the file with a play button, and pause with a pause. I just don't know how to store the audio into an object that I can look into. Such that I can manipulate its play state and see the duration and current position.

android: Q, react-native: 0.60 expo-sdk .35+

Our app uses certificate pinning with self-signed certificate.

This all works with React native nicely, because React native provides a hook to specify a custom OkHttp Client, that manages the pinned certificate. Very similar to example provided here https://medium.com/@jaedmuva/react-native-ssl-pinning-is-back-e317e6682642

Things like <Image source='https://domain.withcert.com/image.jpg' /> work well with this model, as react native, using its underlying okhttp mechanism, relies on the custom-provided OkHTTp client were we manage the certificate.

Now we are adding audio (via Expo-AV). Expo-AV uses Android Exoplayer2 audio library. That Audio library issues https request to our server, eg. https://domain.withcert.com/sound.mp3 The https handshake fails, and it shows up as

'Error: com.google.android.exomplayer2.upstream.HttpDataSource$HttpDataSourceExcception: Unable to connec to to https://domain.withcert.com/sound.mp3'

Because our server's https uses self-signed certificate.

Our Android client has pinned the public portion of that certificate -- however we cannot find way to instruct Expo-Av (and therefore, Android's Exoplayer2) to use it.

ExoPlayer2 uses same library as React-Native, OkHTTP. However, unlike react-native, Expo-AV does not instruct Android's ExoPlayer to use that overriden OkHTTP client from React-Native. (or at least I cannot see how, when examining expo-av Android source).

Is there way to overcome this limitation in some other way? For example, is there a way to override HTTPS certificate handling on Android client, globally for the whole app, rather than for a specific OkHTTP client instance or for a specific HttpsURLconnection (since our app does not have access to specific REST query construction mechanism in ExoPlayer2)

I would like to test my app on at least 2 Android emulators simultaneously. I can start 2 emulators but can't seem to find how to react-native run-android my app on 2 emulators with ADB. If possible I would also like to be able to run a react-native log-android on each one while testing my app.

Is there a way to do so ?

I have a React Native app with firebase for backend,

And now I'm in the last part to release it, But I have a question, after releasing my app I will add some updates or something and I want to ensure every user updates, so should I implement a modal that appears after adding some updates to my app and publishing it to stores

So I just thought if I made a boolean item if I add updates just change it to True and in my code if that true modal appeared else hidden it!

So that's a nice way to go with it?

Or can firebase help me in this case to tells any new things I do "I don't send to them push notifications if u want to tell me that"

I have a list of items that each item has an image album in a horizontal FlatList

<FlatList
    ref={it => {
        carousel = it;
    }}
    onContentSizeChange={()=> this.carousel.scrollToEnd()}
    scrollEnabled
    data={images}
    horizontal
    renderItem={({ item, index }) => renderRow(item, index)}
    keyExtractor={item => item.title}
    onEndReachedThreshold={0.7}/>

I want each item to scrollToEnd

const scrollToEnd = () => carousel.scrollToEnd({ animated: false });

But scrollToEnd works only on the last item in the list and all other items are in first image of album

What should I do?

I am currently implementing SSL Certificate Pinning for my React Native app.

I found a great answer explaining in detail the steps to archive this for both IOS and Android

But unfortunately the Android solution will only work as long as the requests are made with the FetchAPI and I am trying to find a solution that also includes the XMLHttpRequestAPI

TypeError: undefined is not an object(evaluating 'a.PropTypes.func')

There are many similar kinds of questions are available there, But mine is still different because the most of the questions have given the solution like use: import PropTypes from 'prop-types'; as a separate package and not from: import React, { Component, PropTypes } from 'react'; Which I am already doing since I have started my project. Still,I am facing the same issue. Below is one of the place in my code where I am using proptypes:

highlightColour: PropTypes.string.isRequired,
onPress: PropTypes.func.isRequired
};
and
MonthYearPad.propTypes = {
highlightColour: PropTypes.string.isRequired,
onMonthPress: PropTypes.func.isRequired,
onYearPress: PropTypes.func.isRequired
};

Edit: i also installed it with npm install --save prop-types

Edit: this may also help you understand better:

  render() {
    return (
      <View style={styles.container}>
        <InputGroup
          title="Month"
          groups={monthGroups}
          highlightColour={this.props.highlightColour}
          onPress={this.props.onMonthPress}
        />
        <InputGroup
          title="Year"
          groups={yearGroups}
          highlightColour={this.props.highlightColour}
          onPress={this.props.onYearPress}
          isLast
        />
      </View>
    );
  }
}

MonthYearPad.propTypes = {
  highlightColour: PropTypes.string.isRequired,
  onMonthPress: PropTypes.func.isRequired,
  onYearPress: PropTypes.func.isRequired
};

export default MonthYearPad;

i am using react-native-netinfo in my app. In iOS it's working fine. But in android always returns true. It doesn't have internet connection (WiFi or Mobile data). It still returns true. Please give me any suggestions.

Versions:-

react-native:- 0.61.4,
@react-native-community/netinfo:- 4.6.1

Here is my code:-

  componentDidMount() {
    NetInfo.isConnected.addEventListener(
      'connectionChange',
      this.handleConnectivityChange,
    );
  }
  handleConnectivityChange = isConnected => {
    console.log('uyeuiyiuyiu', isConnected);
    this.setState({
      connectionStatus: isConnected,
    });
  };
  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener(
      'connectionChange',
      this.handleConnectivityChange,
    );
  }

Hi I want achieve the following style:

But with the following code i get a the icon in separate column and the text in another

<View style={{flex:1, flexDirection:'row'}}>
  <Icon height={10} width={10} />
  <Text>It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is that it 
    has a more-or-less normal distribution of letters, as opposed to using 'Content here, 
    content here'</Text>
</View>

please ignore the different icons. Any solution to this problem?

I've been trying to run my react native project via "react-native run-android" but each time i got following error i tried several methods to solve this problem including clearing gradlew but they didn't work and issue is persisting I've been struggling with this issue for more than 10 days Does anyone here has any idea how can i solve this?

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\Users\myuser\AndroidStudioProjects\main>react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using
 "--no-jetifier" flag.
Jetifier found 864 file(s) to forward-jetify. Using 2 workers...
info Starting JS server...
info Installing the app...
> Task :**app:mergeDebugResources FAILED**
10 actionable tasks: 3 executed, 7 up-to-date

FAILURE: Build failed with an exception.

* What went wrong:
**Execution failed for task ':app:mergeDebugResources'.**
> 8 exceptions were raised by workers:
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #0: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #1: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #2: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #3: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #4: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #5: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #6: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #7: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.


* 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.org

BUILD FAILED in 8s

error Failed to install the app. Make sure you have the Android development envi
ronment set up: https://facebook.github.io/react-native/docs/getting-started.htm
l#android-development-environment. Run CLI with --verbose flag for more details.

Error: **Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8**
081

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeDebugResources'.
> 8 exceptions were raised by workers:
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #0: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #1: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #2: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #3: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #4: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #5: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #6: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.
  com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.4.2
-5326820-windows Daemon #7: Daemon startup failed
  This should not happen under normal circumstances, please file an issue if it
does.


* 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.org

BUILD FAILED in 8s

    at checkExecSyncError (child_process.js:621:11)
    at execFileSync (child_process.js:639:15)
    at runOnAllDevices (C:\Users\myuser\AndroidStudioProjects\main\node_modules\
@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllD
evices.js:94:39)
    at buildAndRun (C:\Users\myuser\AndroidStudioProjects\main\node_modules\@rea
ct-native-community\cli-platform-android\build\commands\runAndroid\index.js:158:
41)
    at C:\Users\myuser\AndroidStudioProjects\main\node_modules\@react-native-com
munity\cli-platform-android\build\commands\runAndroid\index.js:125:12
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Command.handleAction (C:\Users\TORANJ\AndroidStudioProjects\main\no
de_modules\react-native\node_modules\@react-native-community\cli\build\index.js:
164:9)

I would like to have a react native View dynamically added. This will be completely undetermined before calling.

import React, {Component} from 'react';
import {View} from 'react-native';

export default class HelloWorld extends Component {
    render() {
        return (
            <View>{ /** add a component a view depending on paremeters passed into class in Props**/}</View>
        );
    }
}  

Since this will be completely undetermined I am not sure how to call a module from another module without first importing it.

How can I go about it?

Thank you all in advance.

How to dynamically call a module in React Native

I have a file myEnternal.js that I would like to pass as a component via Props from Android.

myEnternal.js

import React, {Component} from 'react';
import {View} from 'react-native';

export default class ExternalComponent extends Component {
    render() {
        return (
            <View>{ /** add a component a view depending on paremeters passed into class in Props**/}</View>
        );
    }
}  

Then in Java :

Bundle initialProperties = new Bundle();
initialProperties.putString("myEnternal_ComponentString", Files.toString(new File("./myEnternal.js"), Charsets.UTF_8));  

Then possibly convert it into a Component and add it.

import React, {Component} from 'react';
import {View} from 'react-native';

export default class HelloWorld extends Component {
    render() {
        var myEnternal_Component = this.props.myEnternal_ComponentString;

        return (
            <View>{ /** convert myEnternal_Component into a component then add <ExternalComponent /> here **/}</View>
        );
    }
}  

How can I go about converting a String representation of a component into a Component dynamically?

Thank you all in advance.

I have just created an react-native app and building the React Native application giving me The error below.

H:\App Data\ejob-app\android\app\build\intermediates\manifests\full\debug\AndroidManifest.xml:2: AAPT: error: attribute 'package' in <manifest> tag is not a valid Android package name: 'com.ejob-app'.

H:\App Data\ejob-app\android\app\build\intermediates\manifests\full\debug\AndroidManifest.xml:17: AAPT: error: attribute 'android:name' in <application> tag must be a valid Java class name.

H:\App Data\ejob-app\android\app\build\intermediates\manifests\full\debug\AndroidManifest.xml:24: AAPT: error: attribute 'android:name' in <activity> tag must be a valid Java class name.

And Ended up with the error below..

FAILURE: Build failed with an exception.

* Where:
Build file 'H:\App Data\ejob-app\android\app\build.gradle' line: 1

* What went wrong:
A problem occurred evaluating project ':app'.
> Plugin with id 'com.ejob.app' not found.

* 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.org

BUILD FAILED in 2s
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/getting-started.html

Here is my AndroidManifest.xml to check the required configuration.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.ejob-app"
android:versionCode="1"
android:versionName="1.0">

<uses-sdk
    android:minSdkVersion="16"
    android:targetSdkVersion="26" />

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<application
    android:name="com.ejob-app.MainApplication"
    android:allowBackup="false"
    android:debuggable="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme">
    <activity
        android:name="com.ejob-app.MainActivity"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:label="@string/app_name"
        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" />
    </application>

</manifest>

Please guide me on this, please tell me if i missing something. i am very new to react-native.