hi i'm very beginner in react native i create react native app using expo init
and after that i go an on this folder and run npm start its give me an error
mohit#mohit-PC:~/Desktop/this is not for you/rn$ cd fp/
mohit#mohit-PC:~/Desktop/this is not for you/rn/fp$ npm start
fp#1.0.0 start
expo start
Starting project at /home/mohit/Desktop/this is not for you/rn/fp
RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received 65536.
at new NodeError (node:internal/errors:371:5)
at validatePort (node:internal/validators:216:11)
at Server.listen (node:net:1461:5)
at /usr/local/lib/node_modules/expo-cli/node_modules/freeport-async/index.js:8:12
at new Promise ()
at testPortAsync (/usr/local/lib/node_modules/expo-cli/node_modules/freeport-async/index.js:6:10)
at availableAsync (/usr/local/lib/node_modules/expo-cli/node_modules/freeport-async/index.js:24:17)
at /usr/local/lib/node_modules/expo-cli/node_modules/freeport-async/index.js:37:23
at new Promise ()
at freePortRangeAsync (/usr/local/lib/node_modules/expo-cli/node_modules/freeport-async/index.js:33:10)
Related
What I am seeing is adding the react-native-reanimated babel plugin (react-native-reanimated/plugin) is causing source maps to be invalid when bundling. I am using Bugsnag and it is saying my source map does not match my code.
Is anyone else using reanimated 2 and experiencing this? Does anyone have any suggestions for workarounds for this? I cannot solve some bugs reported on Bugsnag because of this.
Thanks for the help!
I validated the source map using the npm package sourcemap-validator and it indeed throws an error saying the source map doesn't match the bundle.
I have reproduced this with a new react-native init project. This error occurs in my project using react-native 0.66.4 and in the sample app with react-native 0.70.6
Sample App
https://github.com/MorganTrudeau/rn-sample
There is a README in the repo with steps to reproduce the invalid source map.
Short explanation of what I have done to verify map sourcemap and why I think it is the reanimated babel plugin.
Steps to verify sourcemap
All this code is in the repo provided above to test yourself.
// babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
// Create the bundle and sourcemap
npx react-native bundle --platform android --dev false --entry-file index.js --reset-cache --bundle-output index.android.bundle --sourcemap-output index.android.bundle.map --minify false
// validate_sourcemap.js
// Sourcemap validation code using sourcemap-validator library
var validate = require('sourcemap-validator'),
fs = require('fs'),
assert = require('assert'),
min = fs.readFileSync('index.android.bundle', 'utf-8'),
map = fs.readFileSync('index.android.bundle.map', 'utf-8');
assert.doesNotThrow(function () {
validate(min, map);
}, 'The sourcemap is not valid');
console.log('Valid source map');
The verification above fails with react-native-reanimated/plugin. If you remove the react-native-reanimated/plugin and re-bundle and run the verification again it passes.
I have tested on a fresh react-native init project. I am assuming this is why my sourcemaps are not working on Bugsnag.
Thanks.
Im implementing tests framework (jest) in react native with testing-library/react-native, on an existing project.
When I run their example (intro) the app give the infamous error:
Jest did not exit one second after the test run has completed.
when I try to check it with the flag --detectOpenHandles, it shows that the library itself is the problem.
I have no config file for jest.
RN - 66.4
jest - 28.1.0
babel-jest - 26.6.3
jest-circus - 26.6.3
eslint-plugin-jest - 26.1.1
My problem was solved by this code:
beforeAll(done => {
done()
})
afterAll(done => {
// Closing the DB connection allows Jest to exit successfully.
mongoose.connection.close()
done()
})
I'm trying to migrate my app on 0.60, but it keeps getting stuck on jetify process.
Basically, after this line:
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
It's just stuck and does nothing. And I need jetifier for react-native-firebase and some other native libraries. Any suggestions?
Update
It seems the problem is in symlinks. I'm using Lerna.
There is also one more situation when the npx react-native run-android stucks at jetifying state
If you run npm run android it'll start the metro server as well,
However, to re-run npm run android, you need to close the metro command window and allow npm run android to start a new metro server
In the end what I did was rewriting a jetify specifying which modules I need to jetify.
My jetify index.js:
const {fork} = require('child_process');
const {join} = require('path');
const {getClassesMapping, readDir, chunk} = require('./src/utils');
const cpus = require('os').cpus().length;
const arg = process.argv.slice(2)[0];
const mode = arg && (arg === 'reverse' || arg === '-r') ? 'reverse' : 'forward';
const SEARCH_DIRS = [
........modules here
];
const classesMapping = getClassesMapping();
for (const SEARCH_DIR of SEARCH_DIRS) {
const files = readDir(SEARCH_DIR);
console.log(
`Jetifier found ${
files.length
} file(s) to ${mode}-jetify. Using ${cpus} workers...`,
);
for (const filesChunk of chunk(files, cpus)) {
const worker = fork(join(__dirname, 'src', 'worker.js'));
worker.send({filesChunk, classesMapping, mode});
}
}
And postinstall in package.json:
"postinstall": "cp ./jetify.js ./node_modules/jetifier/index.js"
Trying to fetch current Location using geoLocation, it is not working in React Native version(0.60) and above, But it is working in below versions
I realised, GeoLocation folder is not there in nodeModules/React-Native/Libraries,
did they remove it from ReactNative(0.60)?
navigator.geolocation.getCurrentPosition((position) => {
console.log(position)
},
(error) => alert(JSON.stringify(error)),)
Getting this error:
Type Error: Undefined is not an object(evaluating
'navigator.geolocation.getCurrentPosition
It seems geolocation has been removed from react native .60 version.
Try this:
npm install #react-native-community/geolocation --save
react-native link #react-native-community/geolocation
You can check this related SO post for more details.
npm install #react-native-community/geolocation --save
react-native link #react-native-community/geolocation
then:
import Geolocation form '#react-native-community/geolocation';
Geolocation.etCurrentPosition((position) => {
console.log(position)
},
(error) => alert(JSON.stringify(error))
I want to explore this project https://github.com/mqttjs/MQTT.js within the React Native environment. So I did this:
react-native init myproject
npm install --save mqtt
Then I pasted this sample code from the mqttjs into my App.js a bit after the "Welcome to React Native" component.
var mqtt = require('mqtt')
var client = mqtt.connect('mqtt://test.mosquitto.org')
client.on('connect', function () {
client.subscribe('presence', function (err) {
if (!err) {
client.publish('presence', 'Hello mqtt')
}
})
})
client.on('message', function (topic, message) {
// message is Buffer
console.log(message.toString())
client.end()
})
But when I run react-native run-android, I get a compilation error with a message like
Module url does not exist in the Haste module map
I tried replacing mqtt://test.mosquitto.org with a url to my own mosquitto broker with some of these values: mqtt://192.168.0.20, tcp://192.168.0.20, 192.168.0.20. But all these still generated the same error.
What am I doing wrong?
You can solve this by explicitly installing the url module:
npm install url