React Native's run-android command is failing to update my modified code

I am currently working with React Native version 0.52.0 and react-native-cli version 2.0.1 on my Windows PC to develop android applications. Despite making numerous changes, when I execute react-native run-android, the build process is successful but the resulting app displays the default React Native screen.

This is the outcome after running react-native run-android- https://i.stack.imgur.com/ouWsW.png

The app that appears is as follows-

https://i.stack.imgur.com/LIxwB.png

index.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('albums', () => App);

app.js

import React from 'react'
import ReactNative, { Text } from 'react-native'

export default const App = () => {
  return (
    <Text>Hello World</Text>
  )
}

When I initialized a new project using react-native init albums, only an index.js file was generated without index.android.js or index.ios.js files. What mistake am I making?

Answer №1

If you find yourself in the correct directory, follow these steps:

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/

In case you have index.android.js, use this command instead:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

Finally, run react-native run-android in your terminal.

Answer №2

SOLUTION

Execute the following command in your terminal:
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

Once completed, the output will display as follows:

`c:\Users\lenger\Desktop\webrowser>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
Scanning folders for symlinks in c:\Users\lenger\Desktop\webrowser\node_modules (43ms)
Scanning folders for symlinks in c:\Users\lenger\Desktop\webrowser\node_modules (38ms)
Loading dependency graph, done.
bundle: start
bundle: finish
bundle: Writing bundle output to: android/app/src/main/assets/index.android.bundle
bundle: Done writing bundle output

After completing this step, rerun react-native run-android to see your modifications take effect.

For more details, visit this link.

Answer №3

Success! I was able to resolve the issue by following these steps: Step 1)

rm -rf /usr/local/var/run/watchman && brew uninstall watchman && brew install watchman

Step 2)

react-native start

Answer №4

Access the package.json file and make the necessary updates.

"scripts": {
"android": "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 && react-native run-android",
"ios": "react-native run-ios"
},

If you are in the correct directory, follow these steps:

Execute the following command to automatically run both commands.

npm run android

Answer №5

If you're using a terminal, navigate to your project folder and run the following command:

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/

Answer №6

After stumbling upon this helpful comment on Github, my problem was finally fixed.

@neonsec Cool, it works like a charm!

and I discovered the reason behind this issue

https://github.com/facebook/watchman/blob/4b98623e8fde17588f27494f3ae8f084b9b227d3/QueryableView.cpp#L48

Apparently, watchman does nothing if a .git/index.lock or a .hg/wlock file exists

The Solution: DELETE the .git/index.lock file

## navigate to root app directory
rm -f .git/index.lock

For more information, check out: https://github.com/facebook/watchman/blob/4b98623e8fde17588f27494f3ae8f084b9b227d3/QueryableView.cpp#L48

Answer №7

It's possible that you're modifying the incorrect file and forgetting to reference it in the AppRegistry class.

Take a look at your complete index.android.js or share it here to confirm that the file being imported is the one you need to edit.

Answer №8

To execute the script, follow these steps:

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

Once done, proceed with the following commands:

$ gradlew clean
$ react-native link

Answer №9

Here is a solution that worked for me:

To resolve this issue, navigate to your project folder and execute the following command:

c:\Users\lenger\Desktop\YourProjectFolder>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

During the process, the system will scan folders for symlinks before generating the necessary files.

\Users\lenger\Desktop\webrowser\node_modules (43ms)
Scanning folders for symlinks in c:\Users\lenger\Desktop\webrowser\node_modules (38ms)
Loading dependency graph, done.
bundle: start
bundle: finish
bundle: Writing bundle output to: android/app/src/main/assets/index.android.bundle
bundle: Done writing bundle output

After executing the previous step, run 'react-native run-android' once again.

If you would like more details about this solution, you can visit the following link:

Answer №10

Solution for CodePush Users

Recently, I encountered a similar issue where my code wasn't updating in production builds but was functioning fine in development mode.

The culprit turned out to be CodePush. It was triggering updates because the app's version matched the last target release version set by CodePush as mandatory. This happened even though I had not changed the version number for testing purposes. To resolve this, I simply commented out the CodePush code in my App.js file and voila! The issue was resolved.

Answer №11

After giving @SmoggeR_js solution a shot and still encountering the same issue, consider the following steps (assuming keys have been created and the apk has already been signed)

  1. Remove build from the android/app directory
  2. Remove build from the android directory
  3. Execute rm -rf $HOME/.gradle/caches/ to clear the cache
  4. Navigate to build.gradle --> android/app/build.gradle
  5. Comment out this line
    apply from: "../../node_modules/react-native/react.gradle"
  6. Delete the index.android.bundle file from the assets folder
    ( android/app/src/main/assets/index.android.bundle)
  7. Run the following command
    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
  8. react-native run-android --variant=release
    (ensure that signed keys have been generated and updated in the gradle file as outlined in this reference ()

Answer №12

I was facing a similar issue, but I managed to fix it by removing the following line from my gradle.properties file:

org.gradle.configureondemand = true

Answer №13

One issue I encountered was when I decided to eliminate internet permissions from my AndroidManifest.xml file, thinking it wasn't necessary. Little did I know that React Native relies on this permission to establish a connection between my app and the development machine, allowing for live-debugging.

<uses-permission android:name="android.permission.INTERNET" />

Answer №14

To resolve the issue, follow these steps: Launch your Android Studio and navigate to the "Tools" menu. From there, select "AVD manager" and right click on the emulator you are currently using. Choose "Wipe Data", then opt for "Cold Boot Now". This should address the problem at hand.

https://i.stack.imgur.com/a1ary.png

Answer №15

If you happen to be utilizing index.android.js, here are the steps you should take:

Erase the file named index.android.bundle located within android/app/src/main/assets directory and then -

  1. react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

  2. cd ./android

  3. ./gradlew assembleRelease -x bundleReleaseJsAndAssets

Answer №16

Follow these 3 simple steps to enhance your app:

  1. Activate Live Reload
  2. Deactivate Hot Reloading
  3. In Dev Settings, deselect JS Dev Mode

Your app will now update automatically whenever you make changes to the code.

Answer №17

Give this a shot

cd .git (inside your react-native directory)
remove index.lock

then restart the metro bundler by running react-native start

voila!...

Answer №18

There was a missing index.android.js and index.ios.js file

In this scenario, it is necessary to adhere to the guidelines on your mobile device/emulator as outlined below:

https://i.stack.imgur.com/Rjp81.png

Upon saving your App.js, ensure to input the letter R twice in uppercase

To facilitate automatic updates, on an Android emulator press CTRL + M (CMD + M for MacOS) or shake the Android device with the active app running, then select either Hot reloading (keep current state, only changing edited file) or Live reloading (refresh entire application).

Answer №19

I made a silly mistake by forgetting to save the edits in App.js. Once I save the data, it will reflect correctly :)

Answer №20

When I deactivate debugging, the updates work for me. This is how I solved it.

In Chrome dev tools > Network > Disable cache Hopefully that will work for you too

Answer №21

If you navigate to your project directory, you'll find a package.json file. To simplify running your application, you can insert the code snippet below into the scripts section of that json file. After adding this snippet, you'll be able to start your application with just one command: npm run android-windows. Make sure to include the following code script for it to work correctly.

"android-windows": "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 && react-native run-android"

https://i.stack.imgur.com/OdtCz.jpg

Answer №22

If you are utilizing "codepush," be aware of the following:

After spending two hours attempting to understand why my Android application consistently reverted back to previous code, failing to display the latest features, I discovered the root cause: an outdated CodePush version causing the app to downgrade.

Answer №23

Consider removing the following folders:

  • ./android/.idea directories.
  • ./android/.gradle directories.

This solution resolved the issue for me

https://i.stack.imgur.com/w1kjan.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to locate 'URL' in the redux-auth-wrapper

Upon attempting to activate my ReactJS project using the npm start command, I encountered the following error message: ERROR in ./node_modules/redux-auth-wrapper/history4/locationHelper.js 17:11-25 Module not found: Error: Can't resolve 'url ...

Error message on WordPress or NPM: the JavaScript file for Bootstrap cannot run without jQuery loaded first

Currently, I am using NPM to bundle bootstrap along with several other scripts for a Wordpress theme. Since WordPress already loads jquery by default, I have made sure to exclude jquery from the bundle. However, even though I can see in Google Dev Tools t ...

Compiling React Native in Node.JS encountered a critical error

I'm in the process of putting together a react native guide for creating forms, which can be accessed here: - https://github.com/smhatre59/cloudstorage However, when I try to compile using "npm run-script build" or even for development using "npm sta ...

What are the best steps to follow when creating a new package within a lerna monorepo?

I have recently come into possession of a monorepo that contains a packages folder housing all the current packages. My goal is to include a new main package that is essential for my existing panel package, which is currently at version 0.34.0. Since I fre ...

What impact does including a parent View Tag have on the styling in React Native?

Why does adding a View parent break my styles? Could React Native's View tag have default styles that I'm not aware of? Displayed below is the Button component along with screenshots demonstrating the difference when using and not using the View ...

What is the best way to send a multistring variable as a parameter to PHP?

How can I pass a string variable with multiple values (such as 1,2,3,4) into a PHP script through a URL parameter? Let's consider some PHP code connected to a MySQL server: $id_ = $_GET['id']; $q=mysql_query("SELECT * FROM brain WHERE bra ...

Executing the NPM command for Mounteback utilizing Nodemon

Dealing with manual restarts while using mountebank JS for my mocks has been quite a hassle. To tackle this issue, I decided to include nodemon in my package.json and got it up and running. However, the problem arises when it doesn't automatically res ...

Access denied when executing npm run dev

On a single server, I have multiple websites. However, when I execute the command npm run dev (an abbreviation for npm run development) on one specific site, it returns a permission denied error related to the main /tmp/developmentblabla.sh directory. In ...

What's the best way to implement an NPM package in a Deno application?

I am curious about integrating the NPM package into my Deno application. Can anyone guide me on how to achieve this? ...

Leverage SQLite database in React-Native for Android development on Windows platform

I have been experimenting with a demo app in React-Native that includes the usage of SQLite Database. Following the instructions from this link, I tried running the command npm install --save react-native-sqlite-storage in my project's main repository ...

The code encountered an error because it tried to access the property 'isServer' from an undefined value

I encountered an error when attempting to run yarn install in my project folder. yarn install v1.22.15 [1/5] Validating package.json... [2/5] Resolving packages... [3/5] Fetching packages... error An unexpected error occurred: "https://registry.y ...

Issue encountered while installing a package with "n low-risk vulnerabilities"

Just set up a new react-native project on big-sur. Encountered an error while trying to install an npm package. How can I resolve this? npm install @react-navigation/native up to date, audited 1026 packages in 2s 6 low severity vulnerabilities To addr ...

Error encountered in MochaTest - UnhandledPromiseRejectionWarning: The function 'done' is not recognized as a valid function

Currently, I am conducting a test to create a user in a MongoDB using Mocha. Here is the code snippet for the test: The primary issue I encountered while running 'npm test' are as follows: 1. The terminal freezes and never completes the test. 2. ...

Encountered a problem while setting up React app using npm

I've encountered an issue while trying to install a react app using npm. Even after downgrading my npm version to 3, I am still facing errors. My internet connection is strong as well. Thank you in advance for your assistance! https://i.stack.imgur ...

Creating a personalized MultiAutoCompleteTextView within a Material TextInputLayout: A Step-by-Step Guide

My goal is to personalize a MultiAutoCompleteTextView, which will be housed within a TextInputLayout for Material design purposes. This will enhance reusability and flexibility of the underlying code. However, I am encountering some issues even before sta ...

The installation of webpack on macOS is failing because of a missing dependency

Is anyone else experiencing this issue? node-pre-gyp info it worked if it ends with ok node-pre-gyp info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d53525958104d4f58e8838485">[email protected]</a> node ...

Using Percentage-Based Margin in React-Native

I've encountered a problem in my React Native project where using a percentage value for the margin style attribute seems to shrink the height of one of my View components. However, if I switch to using an absolute value, the issue disappears and ever ...

The LoaderRunner callback was triggered by the bootstrap version ^3.4.1 before

I encountered a surprising error while using the Azure Build pipeline, specifically in the loadrunner.js file. The error message from the pipeline is: "The callback was already called". C:\Windows\system32\cmd.exe /D /S /C ""C:&bso ...

What have I recently downloaded using NPM?

While attempting to install a package manager called NPM, I encountered an unexpected issue. The command that I entered was: sudo npm install foever -g Due to a typographical error, I mistakenly typed "foever" instead of "forever." Surprisingly, the sy ...

The module '@angular/core/core' does not contain the exported member 'ɵɵFactoryDeclaration'

Hello everyone, We are currently experiencing an issue with our Angular project during the ng build process. An error message is popping up that has us stumped. Despite trying various solutions provided by the GitHub and Stack Overflow communities, we stil ...