React native - reload do nothing - android

I just started with React Native. I have my smartphone connected and after react-native run-android I can see "Hello World" on the screen. But when I change "Hello World" to something else, save the file, and then tap on the reload command on my device (after shaking phone), I can't see any changes. I need to react-native run-android again to see new things. I am working on Windows 10. Also build takes a lot of time. I have read similar things, but didn't find any reasonable solution. Can anyone help?
Also: Sometimes when I tap Reload then I need to press enter in packager server terminal, to reload view, but changes don't appear.

I had the same issue and found several solutions. The following is working for me:
To enable life reloading with the >0.29 react-native-versions
go to file: yourProjectFolder//node_modules/react-native/local-cli/server/server.js
Commend the line (62): process.exit(11) -> //process.exit(11)
About Point 2: I am not sure since when the solution of 2.1. is needed but i think ~ react-native v.33. Please correct this if someone knows exactly. For you just look if you find the index.js at the 2. or 2.1. path.
2.1 (Older Path of React-Native FileWatcher index.js) Go to file: yourProjectFolder//node_modules/react-native/node_modules\node-haste\lib\FileWatcher\index.js"
2.2 (Newer Path of React-Native FileWatcher index.js) Go to file:
yourProjectFolder\node_modules\react-native\packager\react-packager\src\node-haste\FileWatcher\index.js
STEP 1 for 2.1 + 2.2:
Increase at the top of the index.js file: MAX_WAIT_TIME=120000 > MAX_WAIT_TIME=360000
Change function (_createWatcher) to:
STEP 2 for 2.1 (Older Path of index.js)
key: '_createWatcher',
value: function _createWatcher(rootConfig) {
var watcher = new WatcherClass(rootConfig.dir, {
glob: rootConfig.globs,
dot: false
});
return new Promise(function (resolve, reject) {
const rejectTimeout = setTimeout(function() {
reject(new Error([
'Watcher took too long to load',
'Try running `watchman version` from your terminal',
'https://facebook.github.io/watchman/docs/troubleshooting.html',
].join('\n')));
}, MAX_WAIT_TIME);
watcher.once('ready', function () {
clearTimeout(rejectTimeout);
resolve(watcher);
});
});
}
STEP 2 for 2.2 (Newer Path of index.js)
_createWatcher(rootConfig) {
var watcher = new WatcherClass(rootConfig.dir, {
glob: rootConfig.globs,
dot: false
});
return new Promise(function (resolve, reject) {
const rejectTimeout = setTimeout(function() {
reject(new Error([
'Watcher took too long to load',
'Try running `watchman version` from your terminal',
'https://facebook.github.io/watchman/docs/troubleshooting.html',
].join('\n')));
}, MAX_WAIT_TIME);
watcher.once('ready', function () {
clearTimeout(rejectTimeout);
resolve(watcher);
});
});
}
This solution worked for me. Hope I could help you and correct me if I am wrong.

Related

React-Native-Reanimated: error: node_modules\react-native-reanimated\src\index.ts:

I was making new project and I can't run the android emulator with this error.
It is located at 'node_modules\react-native-reanimated\src\index.ts' and this is just the code there:
// tree-shaken side effects
import './reanimated2/js-reanimated/global';
// #ts-ignore backward compatibility with treeshaking
export * from './reanimated1';
export * from './reanimated2';
export * as default from './Animated';
Im not sure what to do, please help. Thank you in advance!
I also search for an answer and this worked for me.
Visit this expo reanimated docs link https://docs.expo.dev/versions/latest/sdk/reanimated/#installation
and I added this in my 'babel.config.js' file
module.exports = function(api) {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
};
I think the presets depends if you are using expo. Here is the original code given by the docs:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
you can see that I used my default preset which is module:metro.
I've been facing this problem for about 12 long hours, and the solution for this problem was simply to
Copy and paste this code below inside the babel.config.js file.
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
};
Run your application using npx expo start -c
i have the same issue , This version works for me
"react-native-reanimated": "2.9.1"
I ran this command expo start -c everything was working fine. After that, I've stopped the app with Ctrl+c and run a normal npm start and there were no problems with it since

Url Launcher does not work with MissingPluginException Flutter

I am trying to launch a url in my flutter application. What i'm trying to do is very simple and it works in all other projects except for this one! The browser should be launched on an inkwell onTap event. I tried the exact same code in other projects and worked. I also tried to create a new flutter project and the code worked.
The app does not crash and i don't get any error but on Debug i get a missing plugin exception.
I tried flutter clean and flutter run but didn't work! I tried invalidating cache and restart but also didn't work! I tried removing and re installing the plugin but also didn't work!
Here's the code:
_launchMapsUrl() async {
final url = 'https://www.google.com';
if (await canLaunch(url)) {
await launch(url);
} else {
print('Could not launch $url');
}
}
the onTap:
onTap: () {
_launchMapsUrl();
},
The Compiled and Target SDK versions are 29 and the version of the launcher in my pubspec.yaml is url_launcher: ^5.7.10
For the record the other projects that the code worked in are of the same versions
I think it has something to do with caching issue i'm not really sure, i'm very new to flutter.
Can you please recommend a solution.

Error while trying to access files in the app

I'm building a react-native app that uses tensorflow to recognize images, I'm following the steps in this tutorial.
I did everything according to the explanations, including the part of "Fetching files". I created the assets folder and put the files in it (the path is correct).
But when I run this code:
const tfImageRecognition = new TfImageRecognition({
model: require('./assets/tensorflow_inception_graph.pb'),
labels: require('./assets/tensorflow_labels.txt'),
});
The app gives the following error:
I already tried to create a new project, I imported the react-native-tensorflow import { TfImageRecognition } from 'react-native-tensorflow';, I updated the cache, I deleted the folder node_modules and also I created the file "rn-cli.config.js" that is requested in the tutorial to give access to the files in the assets folder. Any idea how to fix this?
I'm using expo to run the app on mobile (android).
npm: 5.51
expo: 51.4.0
react-native: 0.54.0
react-native-cli: 2.0.1
This problem didn't occur with me. Try react-native start --reset-cache and then run the app again.
There is a better way to this.
import model from './assets/tensorflow_inception_graph.pb';
import labels from './assets/tensorflow_labels.txt';
const tfImageRecognition = new TfImageRecognition({
model,
labels
});
Restart your server.
I tried the same example as you mentioned I got accessed Image and Text.
I stored files inside assets in the same directory. Can you share code to produce an error that you faced?
async recognizeImage() {
try {
const tfImageRecognition = new TfImageRecognition({
model:require('./assets/tensorflow_inception_graph.pb'),
labels: require('./assets/tensorflow_labels.txt')
})
const results = await tfImageRecognition.recognize({
image: this.image
})
const resultText = `Name: ${results[0].name} - Confidence: ${results[0].confidence}`
this.setState({result: resultText})
await tfImageRecognition.close()
} catch(err) {
alert(err)
}
}
As you mentioned your using expo then I'm assuming that run npm eject already. As react-native-tensorflow this library require native changes
You must add extensions in your rn-cli.config.js, in order to require tensorflow_inception_graph.pb and tensorflow_labels.txt
module.exports = {
getAssetExts() {
return ['pb', 'txt']
}
}
Replace ./ with so ../ , so final code will be -
model: require('../assets/tensorflow_inception_graph.pb'),
labels: require('../assets/tensorflow_labels.txt')

$cordovaDatePicker not working after android build

I have written an android app using Ionic. The app uses $cordovaDatePicker from the ngCordova website, and this works fine when I do ionic run android and install the app onto my phone.
The problem is if I run ionic build android, then install the apk from a website to test it in the real world, the datepicker doesn't show at all. The function it's in is being called fine, and if I console.log $cordovaDatePicker then I can see an object is output as I'd expect.
The function I am calling looks like this:
var options = {
date: new Date(),
mode: 'date'
};
$cordovaDatePicker.show(options).then(function(date) {
$timeout(function() {
scope.selectedDateTime = date;
}, 50);
}, function(err) {
alert(err);
});
I've tried adding every permission from this page and that still didn't help. Because the datepicker window is never shown, neither the success or error callbacks are reached. Does anyone have any ideas?
Thanks for any help.
Got this working in the end by:
Upgrading Ionic to the latest version via npm
Removing the datepicker plugin (v0.8.1)
Installing it again with the latest version (v 0.8.9)
Not sure what changed but it's working OK now!

Gradle SwingBuilder: "Toolkit not found: apple.awt.CToolkit" error

I have a Gradle task that is supposed to prompt if the user wants to continue or not (part of a larger task for my Android app).
I'm using SwingBuilder to to try construct a dialog but I'm getting the following error when I try to build:
Error:(94) Execution failed for task ':XXXXXX:ask'.
> Toolkit not found: apple.awt.CToolkit
Obviously, I don't have something installed on my Mac but I'm not sure what I need to install. Is this a Java dependency? Or Gradle? (Googling this does not help very much either - the only relevant link is something to do with Google AppEngine which does not help me much).
Here's the task:
task ask << {
def pass = ''
new SwingBuilder().edt {
dialog(modal: true,
title: 'Continue',
alwaysOnTop: true,
resizable: false,
locationRelativeTo: null,
pack: true,
show: true
) {
vbox {
label(text: "Are you sure you want to continue?")
button(defaultButton: true, text: 'Continue', actionPerformed: {
//do something
dispose();
})
button(defaultButton: true, text: 'Cancel', actionPerformed: {
//do something
dispose(); // Close dialog
})
}
}
}
According to this issue on GitHub, the problem appears to be with the fact that IntelliJ IDEA runs on Java 6 by default. You'll need to force it to run with Java 7 instead, as described in this JetBrains support article.
One thing to bear in mind is that IntelliJ has problems with Java 7 and above on Mac, which is why it defaults to Java 6. You can find more details in that support article I linked to.

Categories

Resources