I started to get this error today, yesterday everything worked fine, there was no changes in gradle or firebase version

&gt; The library com.google.firebase:firebase-iid is being requested by
&gt; various other libraries at [[17.0.0,17.0.0]], but resolves to 16.2.0.
&gt; Disable the plugin and check your dependencies tree using ./gradlew
&gt; :app:dependencies.

[I saw that yesterday was update in google-services plugin][1], probably that is causing the problem. 

How to fix this problem?  


  [1]: https://firebase.google.com/support/release-notes/android

The library com.google.firebase:firebase-iid is being requested by various other libraries at [[17.0.0,17.0.0]], but resolves to 16.2.0

I am new to React Native. How can we refresh/reload previous screen when returning to it by calling `goBack()`?

Lets say we have 3 screens A, B, C:

    A -&gt; B -&gt; C

When we run `goBack()` from screen C it goes back to screen B but with old state/data. How can we refresh it? The constructor doesn&#39;t get called 2nd time.


Refresh previous screen on goBack()

I have to capitalize first letter of text that i want to display. I searched for it but i cant found clear thing to do that, also there is no such props for `text` in react native official documentation.

I am showing my text with following format:

    &lt;Text style={styles.title}&gt;{item.item.title}&lt;/Text&gt;

or

    &lt;Text style={styles.title}&gt;{this.state.title}&lt;/Text&gt;

How can I do it?

Suggestions are welcome? 

Is it possible to capitalize first letter of text/string in react native? How to do it?

From [the Expo website][1]

&gt; Expo lets web developers build truly native apps that work across both iOS and Android by writing them once in just JavaScript.

Isn&#39;t this what React Native does? What&#39;s the difference?


  [1]: https://expo.io

What is the difference between Expo and React Native?

I am using React native 0.52.0 and react-native-cli 2.0.1 on my Windows PC for android development. Despite all the changes i have made. When I run `react-native run-android`, it builds successfully but when I run it, I get the default react native screen.

The result when I run `react-native run-android`-
[![enter image description here][1]][1]

The app I get-

[![enter image description here][2]][2]

**index.js**

    import { AppRegistry } from &#39;react-native&#39;;
    import App from &#39;./App&#39;;

    AppRegistry.registerComponent(&#39;albums&#39;, () =&gt; App);

**app.js**

    import React from &#39;react&#39;
    import ReactNative, { Text } from &#39;react-native&#39;

    export default const App = () =&gt; {
      return (
        &lt;Text&gt;Hello World&lt;/Text&gt;
      )
    }

When i ran `react-native init albums`, it was just an index.js file that was created, there was no index.android.js or index.ios.js file
What am I doing wrong?

  [1]: https://i.stack.imgur.com/ouWsW.png
  [2]: https://i.stack.imgur.com/LIxwB.png

React native run-android do not updating modified code

I&#39;m building an Android app with React Native. 

How can you force a `TextInput` to &quot;unFocus&quot;, meaning the cursor is blinking inside the text field. There are functions for `isFocused()` and `onFocus()`, but how do I actually get the text field to give up focus. You would think it does so automatically once I hit enter, but that&#39;s not the case. 


       import React, {Component} from &#39;react&#39;;
       import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableOpacity} 
       from &#39;react-native&#39;;

       var SHA256 = require(&quot;crypto-js/sha256&quot;);

       export default class LoginForm extends Component{


	constructor(props){
		super(props);
		this.state = {
			email: &#39;&#39;,
			password:&#39;&#39;
		};
	}

	tryLogin = () =&gt; {
		if(this.state.email==&quot;email123&quot; &amp;&amp; this.state.password == &quot;password&quot;){
			console.log(&quot;password verified&quot;);
			this.props.navigator.replace({
				title: &#39;Dashboard&#39;
			});
		}

		console.log(this.state.email);
		console.log(this.state.password);
		console.log(&quot;Hash&quot; + SHA256(this.state.password));
	}

	render(){
    	return(
    		&lt;View style={styles.container}&gt;
    			&lt;TextInput 
    				style={styles.input}

    				placeholder=&quot;Email address&quot; 
    				placeholderTextColor=&quot;white&quot;
    				onChangeText={(email) =&gt; this.setState({email})}&gt;
    			&lt;/TextInput&gt;
    			&lt;TextInput style={styles.input} 
    				placeholder=&quot;Password&quot; 
    				placeholderTextColor=&quot;white&quot; 
    				secureTextEntry
    				onChangeText={(password) =&gt; this.setState({password})}&gt;
    			&lt;/TextInput&gt;
    		
    			&lt;TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}&gt;
    				&lt;Text style={styles.loginButtonText}&gt;LOGIN&lt;/Text&gt;
    			&lt;/TouchableOpacity&gt;
    		&lt;/View&gt;
      );
    }
    }

    AppRegistry.registerComponent(&#39;LoginForm&#39;, () =&gt; LoginForm);

    const styles =  StyleSheet.create({
	container: {
		padding: 20
	},
	input:{
		height: 40,
		backgroundColor: &#39;#e74c3c&#39;,
		marginBottom: 20,
		color: &#39;white&#39;,
		paddingHorizontal: 15,
		opacity: .9
	},
	loginButtonContainer:{
		justifyContent: &#39;center&#39;,
		backgroundColor: &#39;#bc4c3c&#39;,
		paddingVertical:15

	},
	loginButtonText:{
		textAlign:&#39;center&#39;,
		color:&#39;white&#39;,
		fontWeight: &#39;700&#39;,
		fontSize: 24

	}

       })



This probably won&#39;t matter as much for real users but I&#39;m just emulating and its pesky if I want to reload.

Unfocus a TextInput in React Native

I am getting this error while making a release build for my react native project:   

    Expiring Daemon because JVM heap space is exhausted
        
    &gt; Task :app:transformDexArchiveWithDexMergerForRelease FAILED
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task &#39;:app:transformDexArchiveWithDexMergerForRelease&#39;.
    &gt; java.lang.OutOfMemoryError (no error message)


Done some research and made some changes, which are below:

 1. Added  `android:largeHeap=&quot;true&quot;` to the application tag in the AndroidManifest.xml
 2. Added 


        dexOptions {
            javaMaxHeapSize &quot;4g&quot; 
        }


    in the android/app/build.gradle file.

 3. Added the below code to gradle.properties

        org.gradle.jvmargs=-Xmx4096m -XX:MaxPermSize=4096m -XX:+HeapDumpOnOutOfMemoryError
        org.gradle.daemon=true
        org.gradle.parallel=true
        org.gradle.configureondemand=true

Still I am not able to get rid of this error. Any permanent way to get rid of this error and how is it caused??


Out of memory error while running gradlew assembleRelease - react-native

`react-native run-android` command terminates by leaving a message in android simulator. The message is as follows:

&gt; Unable to load script.Make sure you are either running a Metro server or that your bundle &#39;index.android.bundle&#39; is packaged correctly for release.

[![Screenshot][1]][1]

What am I doing wrong?

  [1]: https://i.stack.imgur.com/vCZZs.png

Unable to load script.Make sure you are either running a Metro server or that your bundle &#39;index.android.bundle&#39; is packaged correctly for release

Getting the following message when I init a new project and then launch the Xcode emulator:

&gt; React-Native Version Mismatch
&gt;
&gt; Javascript Version 0.50.1
&gt; Native version: 0.50.0 
&gt;
&gt; Make sure you have rebuilt the native code. ...

Does anyone know what is going on here and can help me?


[![][1]][1]


  [1]: https://i.stack.imgur.com/AKlW8.png

React Native version mismatch

I used `react-native init MyApp` to initialise a new React Native app.
This created among others an Android project with the package `com.myapp`.

What&#39;s the best way to change this package name, for example to: `com.mycompany.myapp`?

I tried changing it in `AndroidManifest.xml` but it created other errors, so I&#39;m assuming it&#39;s not the way.

Any idea?

Change package name for Android in React Native

1. I just installed node.js &amp; cli
 
* installed node.js
* installed react-native-cli

            npm -g react-native-cli

2. And created a &#39;new project&#39;.
    
        react-native init new_project

3. and inside that &#39;new_project&#39; directory, I tired to see if metro bundler works well.

        react-native start

4. But the command gave me following error and metro is not starting.
Any clue for fixing this error?
(I&#39;m using windows 10 OS.)

* command : `C:\projects\new_proj&gt;react-native start`
&gt; error Invalid regular expression: 
/(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/: Unterminated character class. Run CLI with --verbose flag for more details.
SyntaxError: Invalid regular expression: /(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/: Unterminated character class
at new RegExp ()
at blacklist (D:\projects\new_proj\node_modules\metro-config\src\defaults\blacklist.js:34:10)
at getBlacklistRE (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:69:59)
at getDefaultConfig (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:85:20)
at load (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:121:25)
at Object.runServer [as func] (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\runServer.js:82:58)
at Command.handleAction (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\cliEntry.js:160:21)
at Command.listener (D:\projects\new_proj\node_modules\commander\index.js:315:8)
at Command.emit (events.js:210:5)
at Command.parseArgs (D:\projects\new_proj\node_modules\commander\index.js:651:12)

How to resolve the error on &#39;react-native start&#39;

```none
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task &#39;:react-native-linear-gradient:compileDebugJavaWithJavac&#39;.
&gt; Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.
```

When I upgraded to Mac os Big sur and run,

    npx react-native run-android

I got this error (Android). I have tried a lot of solutions from Stack Overflow, but none of them worked. 

I have created a fresh project and it&#39;s working. Also some of the old projects are also working perfectly.

    *react-native Version: &quot;0.63.3&quot;,*

Please help me to find a solution?

Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation

I&#39;m facing a weird problem. In my react native app, if I set `onPress` event to `View` it is not triggered but if I set the same to `Text` inside `View`, it fires. What am I missing here?

    &lt;View style={{backgroundColor: &quot;red&quot;, padding: 20}}&gt;
      &lt;Text onPress={()=&gt; {
        console.log(&#39;works&#39;);
        }
      }&gt;X&lt;/Text&gt;
    &lt;/View&gt;


    &lt;View style={{backgroundColor: &quot;red&quot;, padding: 20}} onPress={()=&gt; {
        console.log(&#39;does not work&#39;);
        }
      }&gt;
      &lt;Text&gt;X&lt;/Text&gt;
    &lt;/View&gt;

Why is this so? Is this an issue with React Native? I&#39;m using version 0.43


React Native: View onPress does not work

Surprisingly there isn&#39;t one question that groups these all together yet on Stack Overflow; there hasn&#39;t been an answer on SO for italics or underline, in fact, only [this question](https://stackoverflow.com/questions/35718143/react-native-add-bold-or-italics-to-single-words-in-text-field) for bold. I self-answered this quesiton below.

How do I make text bold, italic, or underline in React Native?

I do not want to compose an email. I just want to be able to launch the main email app on a user&#39;s device (iOS&amp; Android) from a react-native app. 

Scenario:  I will send a verification email to the user upon signup.

How to launch and open email client React-native?

I had an issue in my React-Native project which was working fine earlier but suddenly it stopped working. Whenever I used the command:

    react-native run-android

I was getting an **error**:

&gt; Android project not found. Maybe run react-native android first?

I **tried** running:

    react-native android

But it said: 

&gt; `Unrecognized command &#39;android&#39; Run react-native --help to see list of
&gt; all available commands`

After trying:

    D:\ProjectRoot\ReactNativeProjects\AwesomeProject&gt;react-native eject

The error returned was:

&gt; Scanning folders for symlinks in
&gt; D:\ProjectRoot\ReactNativeProjects\AwesomeProject\node_modules (48ms)
&gt; App `name` must be defined in the `app.json` config file to define the
&gt; project name. It must not contain any spaces or dashes.

This is the app.json file:

    {
      &quot;expo&quot;: {
        &quot;name&quot;: &quot;AwesomeProject&quot;,
        &quot;description&quot;: &quot;A very interesting project.&quot;,
        &quot;slug&quot;: &quot;AwesomeProject&quot;,
        &quot;privacy&quot;: &quot;public&quot;,
        &quot;sdkVersion&quot;: &quot;30.0.0&quot;,
        &quot;platforms&quot;: [&quot;ios&quot;, &quot;android&quot;],
    	&quot;ios&quot;: {
          &quot;supportsTablet&quot;: true
        },
        &quot;android&quot;: {
          &quot;package&quot;: &quot;com.project.first&quot;
        },
        &quot;version&quot;: &quot;1.0.0&quot;,
        &quot;orientation&quot;: &quot;portrait&quot;,
        &quot;icon&quot;: &quot;./assets/images/icon.png&quot;,
        &quot;splash&quot;: {
          &quot;image&quot;: &quot;./assets/images/splash.png&quot;,
          &quot;resizeMode&quot;: &quot;contain&quot;,
          &quot;backgroundColor&quot;: &quot;#ffffff&quot;
        },
        &quot;updates&quot;: {
          &quot;fallbackToCacheTimeout&quot;: 0
        },
        &quot;assetBundlePatterns&quot;: [
          &quot;**/*&quot;
        ]
      }
    }



React native: Android project not found. Maybe run react-native android first?

I am new to android environment. I know iOS can be done in Xcode to disable device orientation. How can I disable landscape mode or any orientation mode in React Native Android?

Thanks.

How to disable landscape mode in React Native Android dev mode?

Hi am trying to set a shadow for my fab but my attempts has failed so far i tried setting shadow props but that is for ios only so i tried to play with `elevation` property but it doesn&#39;t look right.

Here&#39;s what i tried

      &lt;View
        style={{
          width: 56,
          height: 56,
          elevation: 2,
          borderRadius: 28,
          marginBottom: 3,
          backgroundColor: &#39;rgba(231,76,60,1)&#39;,
        }}
      &gt;&lt;/View&gt;

What i need to achieve

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/57VZ8.png

How to set shadows in React Native for android?

&gt;What is the purpose of the ***react-native link*** command?

What is react-native link?

When I develop hybrid apps with React Native. Does the JavaScript code I write transform into Java-Code or Java-Bytecode for the Dalvik/ART Runtime when I create an Android-App from my React Native code? Or are just the UI components compiled into native UI components? Or does a library like the Fetch API compile the JavaScript code into Java-Code or Java-Bytecode?

Does React Native compile JavaScript into Java for Android?

I&#39;ve setup the environment for react native on Windows. But when I run the command 

    react-native run-android

 
I get the following errors -

    * What went wrong:
    A problem occurred configuring project &#39;:app&#39;.
    &gt; Failed to notify project evaluation listener.
       &gt; Could not initialize class com.android.sdklib.repository.AndroidSdkHandler

How do I fix this?

Error: Could not initialize class com.android.sdklib.repository.AndroidSdkHandler

I am having trouble with react-native onPress Feature. The onPress should only work when it is actually been triggered by a touch event (i suppose) , that is when i press the button on the screen.  But it seems the onPress gets triggered itself when the render function is called. When i try to press manually, it doesn&#39;t work.

  

      import React, { Component } from &#39;react&#39;;
      import { PropTypes, Text, View ,Alert } from &#39;react-native&#39;;
      import { Button } from &#39;react-native-material-design&#39;;

    export default class Home extends Component {
      
      render() {
        return (
              &lt;View style={{flex:1}}&gt;
                &lt;Button value=&quot;Contacts&quot; raised={true} onPress={this.handleRoute(&#39;x&#39;)} /&gt;
                &lt;Button value=&quot;Contacts&quot; raised={true} onPress={this.handleRoute(&#39;y&#39;)} /&gt;
                &lt;Button value=&quot;Contacts&quot; raised={true} onPress={this.handleRoute(&#39;z&#39;)} /&gt;
              &lt;/View&gt;
              );
    }
    handleRoute(route){
      alert(route) // &gt;&gt; x , y, z 
        }
    }

      module.exports = Home;


What am i missing ? Is there something wrong with the way i have assigned or this is some bug ?
Any suggestion is highly appreciated.

[Video][1]

  [1]: https://youtu.be/oHHkyYJfE98

React Native onPress being called automatically

I&#39;m trying to run my first React Native project for first time on my device (Android 4.2.2).

And I get: 

&gt; unable to load script from assets index.android.bundle

Commands that I used:

 1. `cd (project directory)`
 2. `react-native start`
 3. `react-native run-android`

Unable to load script from assets index.android.bundle on windows

## KeyboardAvoidingView not Working Properly ##

I am trying to use the KeyboardAvoidingView with `behavior=&quot;padding&quot;`.
 
For some reason, when I&#39;m trying to enter any text in `TextInput`, there&#39;s a space below the TextInput. Attached is a picture of what is happening as well as the code. Any chance anyone has any idea whats happening here?

[![Whats-App-Image-2018-01-24-at-5-07-46-PM][1]][1]

      render() {
        return (
    
          &lt;KeyboardAvoidingView  style={{ flex: 1}}  behavior=&quot;padding&quot;&gt;
          &lt; View
              style={{
                flex: 1,
               
              backgroundColor: &quot;#FFFFFF&quot;,
             
            }}
          &gt;
            
            &lt;ScrollView
              contentContainerStyle={{ justifyContent: &quot;flex-end&quot;, flex: 1 }}&gt;
                    &lt;ChatInfo /&gt;
                  &lt;/ScrollView&gt;
    
            
              &lt;View style={styles.container}&gt;
              &lt;TextInput
                style={styles.input}
                underlineColorAndroid=&quot;transparent&quot;
                autoCapitalize=&quot;none&quot;
                onChangeText={text =&gt; this.setState({ text: text })}
                value={this.state.text}
              /&gt;
    
              &lt;TouchableOpacity
                style={styles.submitButton}
                onPress={this.submitName}
              &gt;
                &lt;Text style={styles.submitButtonText}&gt; SEND &lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
           
          &lt;/ View&gt;
          &lt;/KeyboardAvoidingView&gt;
        );
      }
    }
    
    export default connect()(ChatScreen);
    
    const styles = StyleSheet.create({
      input: {
        margin: 2,
        paddingLeft: 15,
        flex: 1,
        height: 40,
        padding: 10,
        fontSize: 14,
        fontWeight: &quot;400&quot;
      },
    
          container: {
            borderTopWidth: 1,
            minWidth: &quot;100%&quot;,
            borderColor: &quot;#cccccc&quot;,
            height: 44,
            flexDirection: &quot;row&quot;,
            justifyContent: &quot;space-between&quot;,
            backgroundColor: &quot;#fff&quot;
            
          },
    
      submitButtonText: {
        color: &quot;#0a9ffc&quot;,
        fontSize: 14,
        fontWeight: &quot;500&quot;
      },
    
      submitButton: {
        backgroundColor: &quot;#fff&quot;,
        padding: 10,
        margin: 2,
        height: 40,
        alignItems: &quot;center&quot;,
        justifyContent: &quot;center&quot;
      }
    });


  [1]: https://i.stack.imgur.com/Calck.jpg

KeyboardAvoidingView not Working Properly

I&#39;d like to manually force a Reload of my React Native app on demand without physically shaking the device. (I&#39;m getting carpal tunnel.)

I know that Live Reload / Hot Reload are available. I&#39;m looking for a on-demand command line solution.


Reload a React Native app on an Android device manually via command line

React-navigation docs are still young, and reading through the issues is not working quite much for me (changes on each version) does anyone have a working method to center title in Android using `react-navigation` in React Native?

How can we center title of react-navigation header?

I was trying to create a release apk file from Android but when I create a release apk with PNG image I&#39;m getting `Duplicate Resource` error. Initially I thought this is happening because I made a mistake in the existing project but when I created a new project with a single `Image` component itself I&#39;m getting the `Duplicate Resource` error. Here are the steps I followed

1. Create a app - `react-native init demo`
2. Create a assets folder in the project root folder.
3. Add a `PNG` image inside the assets folder.
4. Now implement the `Image` component with the above `PNG` image.
5. Now bundle it using the cmd

    ```react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/```

6. Then generate release apk using `Generate Signed APK` from `Android Studio`.

This will throw the following error:

    [drawable-mdpi-v4/assets_mario] /Users/jeffreyrajan/Tutorials/RN/errorCheck/android/app/src/main/res/drawable-mdpi/assets_mario.png	[drawable-mdpi-v4/assets_mario] /Users/jeffreyrajan/Tutorials/RN/errorCheck/android/app/build/generated/res/react/release/drawable-mdpi-v4/assets_mario.png: Error: Duplicate resources
    :app:mergeReleaseResources FAILED
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task &#39;:app:mergeReleaseResources&#39;.
    &gt; [drawable-mdpi-v4/assets_mario] /Users/jeffreyrajan/Tutorials/RN/errorCheck/android/app/src/main/res/drawable-mdpi/assets_mario.png	[drawable-mdpi-v4/assets_mario] /Users/jeffreyrajan/Tutorials/RN/errorCheck/android/app/build/generated/res/react/release/drawable-mdpi-v4/assets_mario.png: Error: Duplicate resources
    
    * 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 22s

Note: When you generate a `release apk` without any PNG image you will not get any error, it will create you the `release apk`.

Here are the other files code.

**App.js**

    import React, {Component} from &#39;react&#39;;
    import {Platform, StyleSheet, Image, View} from &#39;react-native&#39;;
    
    export default class App extends Component {
      render() {
        return (
          &lt;View style={styles.container}&gt;
            &lt;Image source={require(&#39;./assets/mario.png&#39;)} /&gt;
          &lt;/View&gt;
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1
      },
      welcome: {
        fontSize: 20,
        textAlign: &#39;center&#39;,
        margin: 10,
      },
      instructions: {
        textAlign: &#39;center&#39;,
        color: &#39;#333333&#39;,
        marginBottom: 5,
      },
    });

**package.json**

    {
      &quot;name&quot;: &quot;errorCheck&quot;,
      &quot;version&quot;: &quot;0.0.1&quot;,
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;node node_modules/react-native/local-cli/cli.js start&quot;,
        &quot;test&quot;: &quot;jest&quot;
      },
      &quot;dependencies&quot;: {
        &quot;react&quot;: &quot;16.6.0-alpha.8af6728&quot;,
        &quot;react-native&quot;: &quot;0.57.4&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;babel-jest&quot;: &quot;23.6.0&quot;,
        &quot;jest&quot;: &quot;23.6.0&quot;,
        &quot;metro-react-native-babel-preset&quot;: &quot;0.49.0&quot;,
        &quot;react-test-renderer&quot;: &quot;16.6.0-alpha.8af6728&quot;
      },
      &quot;jest&quot;: {
        &quot;preset&quot;: &quot;react-native&quot;
      }
    }

Any solution for this?

**Update:**

Here are the other details

    classpath &#39;com.android.tools.build:gradle:3.1.4&#39;
    
    ext {
            buildToolsVersion = &quot;27.0.3&quot;
            minSdkVersion = 16
            compileSdkVersion = 27
            targetSdkVersion = 26
            supportLibVersion = &quot;27.1.1&quot;
        }
    
    distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

Tried with `Android Studio 3.0, 3.0.1, 3.1, 3.1.4 &amp; 3.2`



React Native : Error: Duplicate resources - Android

Would you please help me, I am stuck to create a new project in react-native Like below screenshot. I have able to run old projects. but I am not able to run a new project

I have followed these steps:
 
1. `react-native init projectName` 
2. `cd projectName` 
3. `react-native run-projectName`

But I get the error below:

    error Failed to install the app. Make sure you have the Android development environment set up:

[![Screenshot][1]][1]


  [1]: https://i.stack.imgur.com/dqfMt.png

Facing issue &quot; Failed to install the app. Make sure you have the Android development environment &quot; in react native

I&#39;m trying to animate View with interpolate. I&#39;d like to get a current value of my Animated.Value, but don&#39;t know how. I didn&#39;t understand how to do it with [React-native docs][1].

&lt;!-- language-all: lang-js --&gt;

    this.state = {
          translateAnim: new Animated.Value(0)
    }
    DeviceEventEmitter.addListener(&#39;Accelerometer&#39;, function (data) {
      console.log(this.state.translateAnim);
      // returns an object, but I need a value in current moment
    }


  [1]: https://facebook.github.io/react-native/docs/animations.html#responding-to-the-current-animation-value

Get current value of Animated.Value, React-native

I try to run react-native app on genymotion android emulator on my mac.
When I write `react-native run-android` It gets 

    Running /usr/local/opt/android-sdk/platform-tools/adb reverse tcp:8081 tcp:8081
    error: closed
    Could not run adb reverse: Command failed: /usr/local/opt/android-sdk/platform-tools/adb reverse tcp:8081 tcp:8081
    Building and installing the app on the device (cd android &amp;&amp; ./gradlew installDebug...
    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
    MacBook-Pro-MacBook:ART-CarefulPeople macbook$ 

Then I&#39;ve tried:

1. `react-native start`
2. `react-native run-android`

The same result.

Then I&#39;ve tried:

1. `react-native bundle --entry-file index.android.js --platform android --bundle-output android/app/src/main/assets/index.android.bundle`

2. `curl &quot;http://localhost:8081/index.android.bundle?platform=android&quot; -o &quot;android/app/src/main/assets/index.android.bundle&quot;`

3. `react-native run-android`


The same result.

I&#39;ve tried just `adb reverse tcp:8081 tcp:8081` and it says `error: closed`

When I try to run app on android-sdk emulator it gets the same error above but without `error: closed`.

From android studio I can run this app and it works on genymotion. 
Tell me please what should I do to run my app on android emulator?



Run react-native on android emulator

I am getting this error after running my App:

&gt; error: bundling failed: Error: Unable to resolve module `react-native-safe-area-context` from `node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js`: react-native-safe-area-context could not be found within the project.

But the same thing I had done for my old demo. It worked perfectly fine.

I don&#39;t know what I am doing wrong here. Please check my code:

**For installing:**

1. React Native Navigation &amp; Gesture Handler:

```npm install --save react-navigation```

```npm install --save react-native-gesture-handler```

2.  React Native Stack:

```npm install --save react-navigation-stack```


**App.js**

```reactjs
import { createAppContainer } from &quot;react-navigation&quot;;
import { createStackNavigator } from &quot;react-navigation-stack&quot;;
import FirstOptionsPage from &quot;./FirstOptionsPage&quot;;

const MainNavigator = createStackNavigator(
  {
    FirstOptions: FirstOptionsPage
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        // backgroundColor: &#39;#28F1A6&#39;,
        elevation: 0,
        shadowOpacity: 0
      },
      headerTintColor: &quot;#ca375e&quot;,
      headerTitleStyle: {
        fontWeight: &quot;bold&quot;,
        color: &quot;#161616&quot;
      }
    }
  }
);

const App = createAppContainer(MainNavigator); // For setting Navigation Stack
export default App;
```

And **FirstOptionsPage.js:**

```reactjs 
import React from &quot;react&quot;;
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  ScrollView,
  Switch
} from &quot;react-native&quot;;

export default class FirstOptionsPage extends React.Component {
  static navigationOptions = {
    title: &quot;Preferences&quot;
  };

  constructor(props) {
    super(props);
    this.state = {
      switch1Value: false
    };
  }

  toggleSwitch1 = value =&gt; {
    this.setState({ switch1Value: value });
    console.log(&quot;Switch 1 is: &quot; + value);
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      &lt;SafeAreaView style={styles.mainContainerStyle}&gt;
        &lt;View style={styles.subContainerStyle}&gt;
          &lt;Text style={styles.subtitleTextStyle}&gt;Someone likes my post&lt;/Text&gt;
          &lt;View style={styles.switchStyle}&gt;
            &lt;Switch
              onValueChange={this.toggleSwitch1}
              value={this.state.switch1Value}
              thumbColor={MAGENTA_COLOR_CODE}
              trackColor={{
                false: GREY_COLOR_CODE,
                true: DARK_GREY_COLOR_CODE
              }}
            /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/SafeAreaView&gt;
    );
  }
}
```

I am new to React-Native. How can I fix this?


Getting this error: error: bundling failed: Error: Unable to resolve module `react-native-safe-area-context`

I am trying to run create-react-native-app on expo app in android.

Firstly ,I created the project by writing command

&gt; create-react-native-app test

then I executed

&gt; npm start

then scanned the qr code from expo app.

But after scanning QR code , I am getting following error:

    Uncaught Error: Java.net,sockettimeoutException: failed to connect to after 10000ms

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/rKTPZ.jpg


Github Issue:  

https://github.com/react-community/create-react-native-app/issues/144#issuecomment-296631692

Network Response Time Out Error (create-react-native-app) (expo)

I&#39;m creating an Android app using React Native in which there&#39;s a form. The placeholder doesn&#39;t even appear for the textInput fields so I thought of changing the placeholder color but I don&#39;t know how to do that. The docs mentioned some way which I don&#39;t understand.

Here&#39;s the code:


      &lt;TextInput
      secureTextEntry={secureTextEntry}
      style={inputStyle}
      placeholder={placeholder}
      value={value}
      onChangeText={onChangeText}
      /&gt;

      inputStyle: {
      color: &#39;#000&#39;,
      paddingRight: 5,
      paddingLeft: 5,
      fontSize: 18,
      lineHeight: 23,
      flex: 2,
      }

I also tried: 

      &lt;TextInput
      placeholderTextColor=&quot;blue&quot;
      style={inputStyle}
      placeholder={placeholder}
      value={value}
      onChangeText={onChangeText}
      /&gt;

and 

      inputStyle: {
      color: &#39;#000&#39;,
      paddingRight: 5,
      paddingLeft: 5,
      fontSize: 18,
      lineHeight: 23,
      flex: 2,
      placeholderTextColor: &#39;#333&#39;
      }



All React Native-Android Solutions on Gang of Coders

Total of 33 React Native-Android Solutions