I have a problem "Unable to resolve module".
// Please, read the question before publish comments with links for first result from google.
This is the import line where I got the error:
import Interactor from 'react-native-native-orientation-interactor';
What I did:
Create a react-native library
Run npm link inside the library folder
Run npm link react-native-native-orientation-interactor inside a demo react-native app
Add import statement
Got the error with import.
If I press Cmd+B on import statement I can open a file from node_modules folder. Also I can see my library (as a link) inside node_modules.
But I didn't find any solution for me.
Upd1: I added my library as a dependency in package.json
"dependencies": {
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-native-orientation-interactor": "*"
},
1 - First of all you have written double native in react-native-native-orientation-interaction
2 - Another thing is, don't add dependencies manually..
Use Proper installation guide like
npm install --save react-native-orientation-interactor
or
yarn add react-native-orientation-interactor
then link the dependency.
3 - And actually I didn't get any module named 'react-native-orientation-interaction'.
react-native-orientation
here is the one of valid module dependency.
always read the whole proper Documentation.( Correct me if I am wrong)
If you are able to link your package correctly, and problem still persists.
From my experience you can do two things to resolve error.
1) Try to install pod in ios/ directory
or
2) Just close the Termianl and re-run
I have been playing with the Vue for few months and i really loved it. I am using the webstorm as an editor, it has all the pre-installed templates for the Vue and other frameworks and the development was really fun with the Vue. Anyway, when i decided to deploy the app on Heroku, it didn't work. When i run the project on my local machine it works fine but when i deploy on the Heroku, i get an empty page. I googled for the solution and i found out there should be some dist folder that i never had, even on my local machine i can't find this folder. For now, i have these folders:
My question, do i have to create DIST folder and move there the index.html and some other files? Do i have to run the npm build(i did and nothing actully happened). Here is my p.json:
"scripts": {
"postinstall": "npm install express",
"start": "node server.js"
},
"dependencies": {
"vue": "^2.5.2"
},
so what i do wrong and how i make my app work?
Thx
You need to create a final version. If you use cli vue version 3, you can use command vue-cli-service build.
Link: https://cli.vuejs.org/guide/build-targets.html#library
After build project you can download folder dist in heroky (or example surge.sh) and visit you site online.
Good luck.
I installed the IntelliJ Prettier plugin for web development. Unfortunately I was not able to specifiy a custom configuration, which consists of this line: "prettier.singleQuote": true.
What I tried:
Under Languages & Frameworks > JavaScript > Prettier I specified once the global and once the project specific prettier installation. (In the screenshot you'll see the global package).
Not regarding configuration file I tried creating a .prettierrc file in my projects' root where the package.json lies. The config file looks like this
.prettierrc
{
"prettier.printWidth": 5,
"prettier.trailingComma": "none",
"prettier.singleQuote": true
}
Since this didn't work I renamed it to .prettierrc.json which didn't work either. Then I tried to use the "prettier" tag in my projects' package.json like this:
"devDependencies": {
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.3",
"jest-fetch-mock": "^1.5.0",
"jest-styled-components": "5.0.0",
"prettier": "^1.13.5",
"react-test-renderer": "^16.2.0"
},
"prettier": {
"prettier.singleQuote": true
},
Still when I format with CTRL+ALT+SHIFT+P it only applies the default configuration and not the provided one, thus replacing all existing single to double-quotes.
I also tried a few things mentioned here (IntelliJ Forum), which didn't work for me either. What am I missing? (Tried also a desperate IDEA restart ...)
I assume prettier is installed.
To configure prettier you have go > Settings > Tools > External Tools
Create prettier action, Follow screenshot for commands.
Follow below steps to apply prettier on js file
Open a file
Hit Ctrl+shift+a or Right click on file > External Tools > Prettier (action name)
Type your action name (prettier name which you given)
Hit Enter
please click here for more info on this.
https://intellij-support.jetbrains.com/hc/en-us/community/posts/360002745119-How-to-have-Reformat-Code-feature-behave-exactly-like-Prettier-
"You can re-import settings at any time using Apply Prettier Code Style Rules in the .prettierrc right-click menu:
"
I installed all dependencies and libs like the instructions on https://facebook.github.io/react-native/docs/getting-started.html
Everything is fine.
But when i try to run react-native run-android i throws me errors (see screenshot)
HAXM is installed on my machine as well.
What can i do to run it on my machine in the emulator?
SDK:
"SDK location no found" export/add your sdk location path in PATH variable. For linux maching run following command in terminal:
$ export PATH="/Users/<username>/Library/Android/sdk/platform-tools/:$PATH"
$ react-native run-android
Go to your project android folder. And create a file called "local.properties".
Inside this file write this:
"sdk.dir={sdk_location}"
Just replace {skd_location} with the path to your android sdk.
Then run "react-native run-android" again and it should work.
The error simply specifies that you are not providing the sdk path to you project. So for this you need to create a local.properties file inside your android folder of the project. Inside that local.properties file just add the location for your android SDK as below :-
sdk.dir = /Users/piet/Library/Android/sdk //this is your sdk path
I have provided the path from the screenshot given by you but change the path of your android SDK if it is different.
I'm trying to figure out how to change a ReactNative app name.
The installed APK on my device is simply "App", with the Android icon.
How can I change this?
I've tried changing package.json and re-running react-native upgrade but it didn't update AndroidManifest.xml
The generator does not override the strings.xml file located in android/app/src/main/res/values/, so you have to change the app_name variable manually
For Android
Modify displayName in app.json file
Modify app_name in android/app/src/main/res/values/strings.xml
then Run these commands one by one
cd android
./gradlew clean
cd ..
react-native run-android
For iOS
Modify Display Name in Project target (General Tab)
Select your application project as Host Application in Project target for testing (General Tab)
Try react-native-rename this npm package will ease the process
This package assumes that you created your react-native project
using react-native init.
Note: This package does not attempt to properly rename build artifacts such as ios/build or Cocoa Pod installation targets. After renaming your project you should clean, build, and reinstall third party dependencies to get it running properly with the new name.
// in project directory
npx react-native-rename <newName>
First of all:
Open app.json file in your react-native project directory. And, just replace displayName json property's value in this file. e.g.:
{
"name": "SomethingSomething",
"displayName": "My New App Name"
}
For Android app:
Open strings.xml file, replace the <string name="app_name"> tag's value to your new app name. e.g.:
<string name="app_name">My New App Name</string>
For iOS:
Open info.plist, replace the value after <key>CFBundleDisplayName</key> to your app name. e.g.:
<key>CFBundleDisplayName</key>
<string>My New App Name</string>
Uninstall your previous app installed on your device. Use npm install in project main directory, in ios folder directory run pod install commands. Now, simply install app in your device.
The way I did this for android (hacky, but it works) is just changed the string app_name field in
android/app/src/main/res/values/strings.xml
It will change the name of your installed android app to whatever you put as the value.
UPDATE 2021
React native version: 0.64.0
Android
Find and open following files and change as required. \android\app\src\main\res\values\strings.xml
<resources>
<string name="app_name">My App</string>
</resources>
app.json
{
"name": "MyApp",
"displayName": "My App"
}
iOS
Find and open the \ios\YourAppName\Info.plist and change as required.
NOTE: if your name has spaces use instead of spaces.
<key>CFBundleDisplayName</key>
<string>My App</string>
I find that, if you want to change both the app name and the package name (i.e. rename the entire app), the following steps are necessary:
Make sure you don't have anything precious (non-generated, manually copied resources) in the android/ and ios/ subfolders.
Delete both the android/ and ios/ folder.
Change the "name" entry in your package.json to the new name.
Change the app name in both your index.android.js and index.ios.js:
AppRegistry.registerComponent('NewAppName', () => App);
Run react-native upgrade to re-generate the platform subfolders.
If you have linked resources (like custom fonts etc.) run react-native link.
If you have other generated resources (like app icons) run the scripts to generate them (e.g. yo).
Finally, uninstall the old app on each device and run the new one.
If you are asking only for Android here is solution
Modify displayName in /app.json file
Modify app_name in android/app/src/main/res/values/strings.xml
then
Run these commands one by one
cd android
gradlew clean
cd ..
react-native run-android
If you don't have any thing precious in your android folder, you can delete the folder then run react-native upgrade then react-native android. These will recreate AndroidManifest.xml along with necessary files and folders. (Tried on 0.18 in Windows 10)
for android
android/app/src/main/res/values/strings.xml
My Android App
for ios
Just open it in xCode select project tab general just rename it.
simply change <string name="app_name"> 'NEW_APP_NAME' </string>
located in
[project_dir]/android/app/src/main/res/values/strings.xml
NOTE: recommended
react-native-rename
by Paul Nyondo maybe affect MainApplication.java file, DON'T USE IT!
Change the name at \android\app\src\main\res\values\strings.xml,
app.jon, and ./android/app/src/main/java/MainActivity.java
**strings.xml**
<resources>
<string name="app_name">NewAppName</string>
</resources>
**app.json**
{
"name": "NewAppName",
"displayName": "NewAppName"
}
**MainActivity.java**
#Override
protected String getMainComponentName() {
return "NewAppName";
}
Then run these commands on terminal
cd android
./gradlew clean
cd ..
npx react-native run-android
before changing the app name get your code's backup and then , Go to following path in and replace your app name with new app name and change i one more file app.json
E:***\android\app\src\main\res\values\strings.xml
<resources>
<string name="app_name">New Name</string>
</resources>
app.json
{
"name": "oldName",
"displayName": "New Name"
}
Change the app name in
\android\app\src\main\res\values\strings.xml
<resources>
<string name="app_name">My App</string>
</resources>
-app.json
{
"name": "MyApp",
"displayName": "My App"
}
-package.json
"name": "My App",
-also have to change return "appName" from android/app/src/main/java/com/companyName/appName/MainActivity.java
#Override
protected String getMainComponentName() {
return "My App"
}
You can try this
Update displayName in app.json to the new name
Delete ios/ and android/ directories
Run react-native eject
Run react-native link
Simply way
PROJECT >android > app > main > res > style
Then change the app name
first of all create a whole backup of the project including node modules (in order to restore icons/phots ..etc in the future)
Update name and displayName in app.json to the new name
rename app folder the same as app name
Delete ios/ and android/ directories
delete ndoe modules
update name in package.json (you must use new name for import & require() in your code. eg : import {x} from 'NewAppName/src/api')
watchman watch-del-all
rm -rf /tmp/haste-map-react-native-packager-*
rm -rf /tmp/metro-bundler-cache-*
restart pc
sudo npm install
react-native eject
restore icons/images
react-native link
restart pc
run app
caution : you may have to setup things manually. in my case SplashScreen
Changed my app name in android/app/src/main/res/values/strings.xml as:
<resources>
<string name="app_name">My App</string>
</resources>
and re-run using npx react-native run-android
To change the name of the react-native Application
1 . Open ./android/app/src/main/java/[multiple folders]/MainActivity.java
#Override
protected String getMainComponentName() {
return "NameOfTheApp";
}
Open android/app/src/main/res/values/strings.xml
NEW APP NAME
Change Name in App.json and package.json.
4.For clean android project run following command
cd android &&./gradlew clean
Just adding to Chhay Rith Hy answer
If you are using Windows, you should use backslash or else you'll get an error "'.' is not recognized as internal or external command(...)"
So, instead of doing:
./gradlew clean
You should do:
.\gradlew clean
Update 2023
(React Native Version > 0.69)
The accepted answer works fine. However, there is a problem: all the built files are still based on the old name, which will cause unpredicted issues.
So my suggestion is to delete ios and android folders and regenerate them. Here are the steps to do so:
delete ios and android folders from the root directory
sudo rm -rf android/ ios/ (on Windows delete manually)
add react native eject package
yarn add react-native-eject
change the name of app in package.json and app.json to your desired new name
regenrate ios and android folders
npx react-native eject
link installed modules in ios
cd ios && pod install
create a new android build (root directory)
react-native run-android
create a new ios build (root directory)
react-native run-ios
NOTE:
By following this approach you will lose icons and fonts that are already added to your project! However, in my opinion it totally worth it, because you solve this issue once and for all.