Detect development environment in react-native.config.js - react-native

I want to access __DEV__ in react-native.config.js so I can manage some native libraries linking in the development & production environments like sample bellow:
const VECTOR_ICONS_FONTS_PATH =
'./node_modules/react-native-vector-icons/Fonts';
const VECTOR_FONTS = ['MaterialCommunityIcons.ttf'];
module.exports = {
assets: ['./src/assets/fonts/nop/nop.ttf'],
dependencies: {
'react-native-vector-icons': {
platforms: {
ios: null,
android: null,
},
assets: VECTOR_FONTS.map((font) => VECTOR_ICONS_FONTS_PATH + '/' + font),
},
'react-native-flipper': {
platforms: {
ios: null,
android: __DEV__ ? undefined : null,
},
},
},
};
But if I do this I get the following error:
$ react-native run-android
error Unrecognized command "run-android".
info Run "react-native --help" to see a list of all available commands.
error Command failed with exit code 1.

What version of Nodejs and NPM are you using?
This can sometimes happen when the project is not initialized properly.
Perhaps try the following:
Update NodeJs/NPM if not LTS
Delete the node_modules directory
Run npm install or yarn install
Run react-native init
Run react-native run-android
(Duplicate of react-native run-android is unrecognized)

Related

React-Native Expo Export Web Receiving Error 'Invalid Project Root' While Building Production App

Hi I am receiving the error that the project root is invalid. I will also add that I am using expo alongside my project.
This happens when executing the command npx expo export:web
Also happens when executing the command npx expo build
webpack.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
};
metro.config.js
(Not sure if metro is relevant as I believe it is more for development purposes...)
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
react-native.config.js
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
web: {},
},
assets: ["./assets/fonts"], // stays the same
};
npm start works fine and everything works accordingly in the browser. The goal is to build this for production and begin hosting on a web server.
I am hoping that I am simply missing a location to a directory in a config file but any insight is appreciated.
First, just run it with expo start, after it started press w.

React Native ios build folder outside of project root

When I run react-native run-ios --verbose I see that my app is created at
/Users/username/Library/Developer/Xcode/DerivedData/AppName-ztrewhgfdsjtizchezgdoiujklztre/Build/Products/Debug-iphonesimulator/AppName.app
instead of ios/build inside my project root.
I have been searching for ways to configure this inside react-native.config.js but could not find how to explictly stated in the docs.
This is my react-native.config.js:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ["./assets/fonts/"],
}

Missing dependencies when using yarn workspace with React native init

I want to setup a monorepo.
I init my React native project with npx react-native init myProject as the first project. (there will be more project added later)
Folder structure
Parent
myProject
package.json (created by react-native)
yarn.lock
package.json (where I setup workspace)
Then I setup yarn workspace from the parent folder of myProject.
{ "name": "Parent",
"private": true,
"workspaces": {
"packages": [
"*"
],
"nohoist": [
"**/react-native",
"**/react-native-*",
"**/#react-native-*",
"**/#react-native-*/**",
"**/#react-navigation",
"**/#react-navigation/**",
"**/hermes-engine",
"**/rn-*"
] }
}
Everything seems to work until I push to git and clone back. I use yarn install but got this error when start the project (run android or run ios)
Error: Unable to resolve module `scheduler` from `node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js`: scheduler could not be found within the project or in these directories:
..\node_modules
The only way I can fix that is to cd myProject and run npm install (it will add some packages and the app will work) while cd and using yarn install won't do anything
I just want to use yarn for the project so what can I do to fix this problem?
I figure out how to fix it. I forgot to edit metro.config in RN folder.
const path = require('path')
const linkedLibs = [path.resolve(__dirname, '..')]
console.info('CONFIG', linkedLibs)
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
watchFolders: linkedLibs,
};
Use this and everything will be fine

Is the pod file mandatory in a third party package to use that in a react-native project new react-native version

Hi I tried to Install a Third Party Package in my React-native Project(0.61.5).
I am facing an Error with that Which doesn't have pods in it.
So Is it really necessary for a third party React-Native Package to include pods with it ?
You can ignore auto linking in 3rd package.
your-project/react-native.config.js
module.exports = {
...
dependencies: {
...
'your-package-name': {
platforms: {
ios: null,
},
},
},
};
Then you can manual add your package to your project.

How to disable autolinking on iOS?

I've installed react-native-localization in my react native project (v0.6). Library is not supporting autolinker yet so I need to disable it for iOS and Android in react-native.config.js.
I already tried to add dependencies in react-native.config.js. After that, I did react-native link react-native-localization command and build an app.
This is my react-native.config.js file:
'use strict';
const ios = require('#react-native-community/cli-platform-ios');
const android = require('#react-native-community/cli-platform-android');
module.exports = {
dependencies: {
'react-native-localization': {
platforms: {
android: null, // disable Android platform, other platforms will still autolink if provided
ios: null,
},
},
},
commands: [...ios.commands, ...android.commands],
platforms: {
ios: {
linkConfig: ios.linkConfig,
projectConfig: ios.projectConfig,
dependencyConfig: ios.dependencyConfig,
},
android: {
linkConfig: android.linkConfig,
projectConfig: android.projectConfig,
dependencyConfig: android.dependencyConfig,
},
},
/**
* Used when running RNTester (with React Native from source)
*/
reactNativePath: '.',
project: {
ios: {
project: './RNTester/RNTester.xcodeproj',
},
android: {
sourceDir: './RNTester',
},
},
};
Error in simulator says:
"Please check your configuration. Did you run 'react-native link'?
As now, react-native has added the support for CocoaPods inside of his projects. (https://github.com/facebook/react-native/releases)
Sadly, i don't know why, but the autolinking feature never works for me on iOS but always goes trough in Android. The only solution i found is to do a react-native link only for iOS (renaming the android folder to something else), then do cd ios and pod install. After that, in the majority of the cases, it would work out of the box, while other libs needs still to be updated to have a full integration with RN 0.60.
Hope all this will be fixed soon but until that we only have to wait and hope that the libs work without any other complications