I'm new to React Native. I used the React Native Firebase starter kit and followed all the steps, but as soon as I want to start, it gets stuck at this screen:
Has anyone experienced this or know how to fix this?
UPDATE: When I run npm run iOS I get the following error:
Content of Package.json
{
"name": "ReactNativeStarter",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-install": "2.1.0",
"babel-jest": "^23.4.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"fs-extra": "^6.0.1",
"jest": "^23.4.0",
"react-test-renderer": "^16.4.1",
"replace-in-file": "^3.4.0"
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"rename": "node ./bin/rename.js",
"start": "react-native start",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"fbjs": "^0.8.17",
"react": "^16.3.2",
"react-native": "^0.56.0",
"react-native-firebase": "^4.3.6"
}
}
Content of .babelrc
{
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
Looks like Babel needs to be upgraded.
When upgrading to 0.56, make sure to bump your babel-preset-react-native package.json dependency to ^5.0.1 or newer.
However, you are using babel-preset-react-native-stage-0 which does not seem to support React Native 0.56.0. See https://github.com/skevy/babel-preset-react-native-stage-0/issues/8
My advice would be to try using babel-preset-react-native until a fix for babel-preset-react-native-stage-0 is released.
Related
I am trying to use webrtc in my react native app but whenever i install my app , it closes automatically this starts happening after I installed the react-native-webrtc package in my app ,before that my app was working
here's my package.json
{
"name": "demoApp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.11.0",
"react-native": "0.62.1",
"react-native-webrtc": "^1.75.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/runtime": "^7.9.2",
"#react-native-community/eslint-config": "^1.0.0",
"babel-jest": "^25.2.6",
"eslint": "^6.8.0",
"jest": "^25.2.7",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
I even tried 1.75.1 and 1.75.0 version of react-native-webrtc but still Same Issue
After install react-native-webrtc package,
you have to follow this guide.
Simply add this in your gradle.properties:
android.enableDexingArtifactTransform.desugaring=false
and enjoy!
I am trying to setup a monorepo with react and react native app using a yarn workspaces.
My problem is with mobx (and react-mobx) library. When I use it in the shared package it does not work.
Here is the simple component in the shared library. It should just render a button and number and increment the number when the text is clicked:
import React, {Fragment} from 'react'
import {action, decorate, computed, observable} from 'mobx'
import {observer} from 'mobx-react'
class Store {
_number = 0
increment = () => {
this._number++
}
get number() {
return String(this._number)
}
}
// All of those are defined
console.log('TEST', {action, decorate, computed, observable, observer})
decorate(Store, {
_number: observable,
increment: action,
number: computed,
})
class TestComponent extends React.Component {
static defaultProps = {
clickableComponent: 'button',
numberElement: 'div',
}
store = new Store()
render() {
const {clickableComponent: ClickableComponent, numberElement: NumberElement} = this.props
const {number, increment} = this.store
return <Fragment>
<ClickableComponent onClick={increment}>Incremenet</ClickableComponent>
<NumberElement>{number}</NumberElement>
</Fragment>
}
}
export default observer(TestComponent)
In browser (react) app I get the following error:
Failed to compile
PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/index.module.js
Module not found: Can't resolve 'react-dom' in '[PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react'
In native app (react-native) I get the following runtime error:
error: bundling failed: Error: Unable to resolve module `react-native` from `PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/native.js`: Module `react-native` does not exist in the Haste module map
I think the problem is with packages and linking them. There are couple of things I've tried to fix this issue, none of them worked:
Add mobx and mobx-react into workspaces.nohoist
Move all dependencies of the shared library into peerDependencies
Make sure to use mobx#4.x so it is compatible with react-native
Here is the root package.json:
{
"name": "monorepo-rn",
"private": true,
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"workspaces": {
"packages": [
"packages/**"
],
"nohoist": [
"**/react-native",
"**/react-native/**"
]
},
"scripts": {
"run:web": "yarn workspace web start",
"run:native:ios": "yarn workspace nativeapp react-native run-ios",
"run:native:android": "yarn workspace nativeapp react-native run-android"
}
}
Here is the package.json of the shared package:
{
"name": "test-component",
"version": "1.0.0",
"main": "src/index.js",
"license": "MIT",
"scripts": {
"build": "babel src --out-dir lib"
},
"peerDependencies": {
"mobx": "^4.x",
"mobx-react": "^5.x",
"react": "^16.x",
"react-dom": "^16.x"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"dependencies": {}
}
Here is the package.json of the webapp:
{
"name": "web",
"version": "0.1.0",
"dependencies": {
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.3",
"test-component": "1.0.0"
},
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired start",
"build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"react-app-rewire-babel-loader": "^0.1.1",
"react-app-rewired": "^2.0.3"
}
}
And here is the package.json of the react-native app:
{
"name": "nativeapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"test-component": "1.0.0",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "16.6.3",
"react-native": "0.58.3"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
I am using the latest yarn version to date: 1.13.0
I've created a repo with which it is possible to replicate the issue I have here.
If anyone will be able to help me get it working I will be insanely grateful!
I've figured it out. I needed to add mobx-react into nohoist of the root package.json file (see the snippet bellow). I had to tweak the native configuration lite bit (I've used react-native-monorepo-helper). The app now works on all platforms as it should.
The fix was to add following nohoist into the root package.json:
"nohoist": [
"**/react-native",
"**/react-native/**",
"**/mobx-react/**",
"**/mobx-react"
]
See this repo. It now contains working code.
When i try to run:
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
I receive this error:
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "C:\\..\\AppDirectory\\node_modules\\#babel\\preset-env\\lib\\index.js")
I've tried removing node-modules directory, cleaning cache, npm install, etc, etc, etc. I've also tried installing Babel manually but the same issue persists.
I had the same error before when generating the .apk, but could solve it installing babel dependencies, now this doesn't work neither.
This is my package.json
{
"name": "Appname",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-test-renderer": "16.3.1",
"babel-preset-react-native-stage-0": "^1.0.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest"
},
"dependencies": {
"#babel/core": "^7.0.0-beta.54",
"#babel/preset-env": "^7.0.0-beta.54",
"#babel/preset-react": "^7.0.0-beta.54",
"babel-core": "^6.26.3",
"babel-preset-react-native": "^2.1.0",
"babel-upgrade": "0.0.20",
"react": "16.3.1",
"react-native": "^0.55",
"react-native-circle-checkbox": "^0.1.6",
"react-native-modal": "^6.4.0",
"react-native-phone-call": "^1.0.7",
"react-navigation": "^2.6.2",
"react-redux": "^5.0.7",
"react-router-native": "^4.3.0",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
}
}
And this is my .babelrc file:
{
"presets": ["#babel/react"],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
I'm facing this issue in react native v-0.56.0. Please Help me out. When i am downgrading to 50 or 49 it's working fine, but on latest version it's giving this error when creating build !
cmd npm run ios
My babelrc
{
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
And my package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-react-native": "^5.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"jest": "^23.3.0",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"react": "^16.3.0",
"react-native": "^0.56.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
}
}
I'm trying to build a very simple react-native app to test react-navigation. It works fine until I install react-navigation and load the following code.
import { StackNavigator } from 'react-navigation';
Upon running, it gives me the message "unable to resolve module
'react/lib/ReactComponentWithPureRenderMixin' from 'Users/me/Desktop/Code/flexbox/node_modules/react-navigation/src/views/Header.js'..." despite the file actually existing at that location when I navigate to it manually. I've tried the clearing watchman, deleting / reinstalling the modules, and resetting the packager cache many times. Any thoughts? My package.json below.
{
"name": "flexbox",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-navigation": "^1.0.0-beta.7"
},
"devDependencies": {
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "19.0.2",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}
You need to change your dependency to this
{
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"
}
As discussed in this ticket: https://github.com/react-community/react-navigation/issues/923