I'm new to react-native, this community is awesome.
but i'm having an issue with configuring https://github.com/terrylinla/react-native-sketch-canvas with npx create-react-native-app .
all I've done so far is edit the metro.config.js
const extraNodeModules = {
'#terrylinla/react-native-sketch-canvas': './node_modules/#terrylinla\react-native-sketch-canvas/'
}
const resolverMainFields = ['browser','main'];
module.exports = {
resolver: {
extraNodeModules,
resolverMainFields
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
then cmd react-native run-android it bundles correctly but it never loads onto the emulator:
this is what it says in shell:
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
(node:8712) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use node --trace-warnings ... to show where the warning was created)
Jetifier found 987 file(s) to forward-jetify. Using 4 workers...
info Starting JS server...
info Launching emulator...
info Successfully launched emulator.
info Installing the app...
Configure project :terrylinla_react-native-sketch-canvas
WARNING: Configuration 'provided' is obsolete and has been replaced with 'compileOnly'.
It will be removed soon. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html
Task :app:stripDebugDebugSymbols UP-TO-DATE
Compatible side by side NDK version was not found.
<============-> 99% EXECUTING [10m 30s]
IDLE
IDLE
:app:installDebug
IDLE
So I just got metro to bundle my js files correctly. I discovered it was something to do with the react-native android gradle it's very confusing. But I just restarted my computer and ran the same commands. That fixed it.
these stackoverflow answers worked before for me to get my build working:
Stuck on info starting JS server
React-native run-android stuck at 99% appDebug
I hope this helps to anyone using create-react-native-app & metro-bundler
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()
})
module.exports = function () {
return {
"presets": ['module:metro-react-native-babel-preset'],
"plugins": [
["transform-inline-environment-variables", {
"include": [
"APP_ENV"
]
}]
]
}
};
This is my babel.config.js for my react-native project, and I'm trying to configure the transform-inline-environment-variables babel plugin. But whenever I run the app the environment variable is always undefined.
I run react-native start --reset-cache to clear the cache and run the project using the command APP_ENV=dev react-native run-ios.
But the variable is still undefined. What am I doing wrong here? The react-native version is 0.60.6
Try logging access directly (rather than destructuring):
console.log(process.env.APP_ENV)
Also, once you have the emulator connected, you can then run start, so:
yarn run-ios
Close the metro bundler terminal window and leave the emulator open
API_ENV=dev yarn start --reset-cache
This issue is covered in detail here.
Better still, replace your implementation with react-native-config.
This error starting showing up all of a sudden.
Node : v10.16.3
React native : 0.60.5
react-native-cli: 2.0.1
bundling failed: Error: Unable to resolve module stream from /Users/username/React Native/SampleApp/node_modules/browser-stdout/index.js: Module stream does not exist in the Haste module map
It's giving error for this line :
var WritableStream = require('stream').Writable
I tried installing 'stream' via npm
npm install stream
Then other similar errors started showing up.
One option is to use the client package readable-stream. If dependencies are requiring stream, then i would suggest adding the following to your babel config as well.
yarn add readable-stream
yarn add -D babel-plugin-rewrite-require
babel.config.js
module.exports = {
// rest of config
plugins: [
// other plugins
[
'babel-plugin-rewrite-require',
{
aliases: {
stream: 'readable-stream',
},
},
],
],
};
just install stream using npm install stream and run the project again.
I have recently upgraded my expo-cli to version 2.21.2 and Expo SDK v33 to get support of Background Playback of Audio. However, I'm getting the error while running the code. consider the code snippet attached below,
import { Audio } from 'expo-av';
Audio.setAudioModeAsync({
staysActiveInBackground : true,
playsInSilentModeIOS: true,
interruptionModeIOS: INTERRUPTION_MODE_IOS_DUCK_OTHERS,
shouldDuckAndroid : true,
});
Project Configurations app.json just modified infoPlist in ios,
"infoPlist": {
"UIBackgroundModes": [
"audio"
]
}
Unable to figure out the issue in setup, or in the project?
You probably forgot to add expo-av in your dependencies in package.json :
npm install expo-av
# OR yarn add expo-av
Since SDK 33, expo has released package expo-codemod which intends to transform most of theses kind of changes when upgrading an app.
https://www.npmjs.com/package/expo-codemod
For example, after installation, you could execute something like this to automatically fix new imports and upgrade your package.json accordingly :
npx expo-codemod sdk33-imports ./src