How can I change the project and app name of ReactNative project with react-native 0.60 - react-native

It's simple issue but I don't know how to do it. I'm looking for some references, but there are problems.
I'm using react-native : 0.60.5. Hence there is no eject method or command.
The project was not created with expo.
After I referenced How to Rename A React Native App and error Unrecognized command "eject", then I follow the process below.
change the app.json's name and diplayName field to name which I want to change
remove android/ and ios/ directory
use react-native upgrade --legacy true
But there is no change on the project name and app name.
Is there any way to change the project and app name? Thanks.

Please check the below steps :
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.
Hope it helps. feel free for doubts

for android edit strings.xml file which located in res/values/
string name="app_name">APP_NAME</string

I had a very hard time with this and this is what I did - hopefully it helps someone. Literally took me 15 minutes
https://www.npmjs.com/package/react-native-rename install react-native-rename and rename your app to whatever you need using the instructions provided for the package
Important part would be to use this:
npx react-native-rename "YourProjectName" -b com.yourporjectnamehere - because this is needed for android to work correctly
find in your project every file and folder name that will contain your previous name - for me it was mostly in ios folder. I had to rename all the folders and some of the files inside. just replace the part with your previous name with your current name
find all occurrences of your previous name left inside the project with the whole project search in your editor and replace them with the new name.
To make it work for ios
Delete Pods inside the ios folder
Delete node_modules
go to ios folder with your terminal and do pod install
do npm install in your original directory again
make sure all the caches are deleted for your ios simulator with yarn start --reset-cache
To make it work for android
Make sure that under android/app/src/com/yourprojectnamehere/ the folder contains MainApplication.java and MainActivity.java files and that the project name inside are updated
./gradlew clean inside android folder in terminal
Delete node_modules
npm install
react-native run-android and everything should be working
I know its a lot of steps, but from what I have found renaming react native app is not actually as easy as you might have thought

Related

How to hot reload a development package in an Expo app example nested folder?

Is it possible to an Expo app example to load a module located in the parent folder AND to see changes in the example app when i rebuild the package (with tsc -w to rebuild on any saved files)?
I precise that the module is not publish on npm yet.
I've already succeed to do that using monorepo architecture with yarn workspaces and expo-yarn-workspaces package.
But what about the case when you don't want to publish your package like a monorepo?
For example, in this repo https://github.com/cuvent/react-native-vision-camera
There is an example RN app in bare workflow and in its package.json there is no mention of the developed package (meaning that it's not installed like a normal dependency).
But in the app src/App.tsx, the package is used like that :
import { Camera, frameRateIncluded, sortFormatsByResolution, filterFormatsByAspectRatio } from 'react-native-vision-camera';
Though, the react-native-vision-camera is used like it's already and normally installed with yarn or npm.
How does it work ?
Thanks.
Finally, I've found something that works for me.
You can find my config for metro if you want here:
https://github.com/grean/react-native-metro-config-app-example
With it, you can access the parent component from the expo app, modify it and immediately see the hot-reload changes.
Create a file metro.config file in your expo root app directory with that code inside:
let config = require('#grean/react-native-metro-config-app-example/index.js');
module.exports = config
For a whole example, you can check this repo out:
https://github.com/grean/react-native-scale-text

Do I really need all these dependencies?

I'm new to react native, and I notice when I create a new project using react-native init projectName that it creates something like 600+ folders in the node_modules folder.
I was sort of expecting to be able to create a bare bones project with only essential dependencies and then add new stuff as necessary as I would do in any other language. I don't really know what any of the dependencies are already, and of the half a dozen or so things I've needed so far I've had to install a new dependency and haven't used anything from here except for the essential react and react-native modules.
Is this how you guys all start your projects, or does this contain hundreds of extras that don't need to be in my project, and if so how do I create a bare bones project? I tried looking at options for the init command and saw one called skip-install that looked like it would install w/o installing all the dependencies but it seems to have had no effect.
Node Module folder contains all the dependencies of the whole app. You can check this in every folder's Readme.md file. If you add any new library in your package.json, everything will be listed there.
To start with, create-react-app contains
a compiler (Babel),
a bundler (Webpack),
a linter (ESLint),
a styling pipeline tool (SCSS),
a development server with live reloading,
a code minifier,
a test runner (Jest),

React/RCTEventEmitter.h file not found

I am trying to implement PushNotificationIOS with a detached Expo app. I am running SDK 21.0.0 (React Native 0.48).
I am getting React/RCTEventEmitter file not found
I have completed the following steps:
Open my .xcworkspace project
Drag the RCTPushNotification.xcodeproj into my Libraries folder
Added libRCTPushNotification.a into App > Build Phases > Link Binary With Libraries
Added $(SRCROOT)/../node_modules/react-native/Libraries under Header Search Paths - I also tried without the /../. I have a bunch of Pods in the Header Search Paths list too.
I then added the following into AppDelegate.m but when I click through to the file (⌘ + click), I get a question mark.
#import <React/RCTPushNotificationManager.h>
If I change it to the below, it works, I can click through
#import "RCTPushNotificationManager.h"
However, this is my problem
When I clean and build my project, I get the below error in RCTPushNotificationManager.h to say:
'React/RCTEventEmitter.h' file not found
#Dan I have ran into this exact same issue, it also occurs for RCTLinking, and other libraries dependent on eventEmitter.h and a detached Expo project.
The issue turns out to be that RCTPushNotification doesn't have the reference to React from Cocoapods file React since Expo manages React in Cocoapods. So you should go into RCTPushNotification.xcodeproj then into Targets - RCTPushNotification Header Search Paths and add the link to "ios/Pods/Headers/Public/React" and set to recursive.
The easiest way to do the above is navigate to your iOS/Pods/Headers/Public/React and drag and drop the folder straight into build settings for header search paths like the below image.
Heads up finally after this you will have to reference ReactCommon/yoga most likely as well, ReactCommon/yoga however should be in your 'node_modules/react-native/ReactCommon/yoga'
This works for me on detached Expo project
"react": "16.6.3",
"react-native": "0.58.6",
Add 'RCTPushNotification' to your pod and run pod install
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'RCTPushNotification',
]
Since nothing mentioned above worked for me, I started experimenting, and this is what solved it for me:
1. Link React-Core & Public
As mentioned by Escamilla, in xcode open the RCTPushNotification.xcodeproj and under Build Settings search for header search path and add there the 2 path:
"$(SRCROOT)/../../../../ios/Pods/Headers/Public"
"$(SRCROOT)/../../../../ios/Pods/Headers/Public/React-Core"
2. Copy RCTPushNotificationManager.h manually into React-Core
In the root folder of your project execute:
cp ./node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotificationManager.h ./ios/Pods/Headers/Public/React-Core/React
This will copy RCTPushNotificationManager.h wich is in node_modules/react-native/Libraries/PushNotificationIOS/ manually into the React folder which is in ios/Pods/Headers/Public/React-Core/React.
I have no idea if that is a good solution but it works. Maybe if someone could explain me why it was not in there in the first place? That would be golden.
I followed the setup instructions 1 by 1 very carefully doing everything right but nothing worked except the manual copy mentioned above…
Also, this is randomly resetted once in a while and has to be done again -.-'
Open up your project in XCode.
Open up the Libraries folder. You should see React.xcodeproj and several RCT*.xcodeproj.
Drag the React.xcodeproj into each of the other projects.
Click on each project and navigate to the Build Phases tab.
Click on Target Dependencies and add React as a target dependency
Just follow these steps:
create project react-native init project.
add this line to pod file in ios folder: pod 'React-RCTPushNotification', :path => '../node_modules/react-native/Libraries/PushNotificationIOS'
cd ios && pod install
cd .. && react-native run-ios
No need to do messy manual linking
Replace #import RCTEventEmitter.h or #import React/RCTEventEmitter.h with #import <React/RCTEventEmitter.h>
Its work for me
this worked for me!
add the missed lib manually
https://github.com/microsoft/react-native-code-push/issues/1565#issuecomment-489738672
USE those libraries:
https://github.com/zo0r/react-native-push-notification
https://github.com/react-native-community/react-native-push-notification-ios
follow step by step,
everything will work
no need anything else
not forget to
pod install

Can I Copy Over React Native Files Initialized Under One Project Over To Another Separately Initialized Project?

Let's say I initialize a project under react-native init <filename>, installed a bunch of node packages, and added code.
Then separately I initialize a different project under react-viro init <filename>, installed a bunch of node packages, and added code.
If I wanted to combine what I created under react-native init into what I created under react-viro init, is it as simple as copying files over and reinstalling missing node packages into the react-viro project?
Assuming you are working in the ./src folder, every file is independent of iOS or Android as part of the JavaScript bundle.
You can simply copy the .js files over and install the node packages in that project.
You probably should not copy any files that are outside the ./src folder, but I also suspect you wouldn't need to. Files in the Android and iOS folders are rarely touched as they contain operating system config settings and custom modules that you would have wrote in the native languages.
If the file renders JSX, you will be safe to just copy it over and hook it back up.
To state it another way, go into the folder that has node_modules in it. You shouldn't copy anything that is in that folder except additional files that you created. This is where people normally create an src folder and place all their JavaScript. You probably have an index file in there that points to ./src/app.js or you may have an index.ios.js and index.android.js that both point to a ./src/app.js. Anything inside src is safe.
That's my best answer without seeing your folders and files.
If you intend to copy code from one react native project to another, make sure the code you intend to copy is JS and not any native files. Make sure you do register the correct component using AppRegistry. Rest assured you can copy the code from one project to another.
Assuming you have a project at folder
/my-project/android
/my-project/ios
/my-project/src
Copy my-project and paste it at your desired folder like
/new-my-project
Change git origin
git remote set-url origin https://gitlab.com/..../**.git
Open /new-my-project/android in Android Studio, and then rename app/java/com.myproject to com.newmyproject
Go to app/build.grade and change com.myproject to com.newmyproject and sync
Create firebase project and download google-services.json file and add to new-my-project/android/app
Build application, then test application under metro bundler
npx react-native start
Create keystore, test notifications, change base_url_api, test apk etc Android finish now, iOS
Update pods on new-my-project/ios
pod install && pod update
open myproject.xcworkspace
Change bundle identifier to org.reactjs.native.newmyproject, version to 1.0, build to 1 and desired Display name. Let it index completely
Setup in firbase and replace GoogleService-Info.Plist file and Clean build folder in xcode
Go to developer.apple.com and create identifiers, APNS certificates, profiles
Download certificates from keychain and upload to firebase
Build the project in simulator/device and test it.
Done

react-native init in current folder

I have a folder setup with some files I already want to have in the folder. I want to be able to run
react-native init PROJECTNAME
and instead of creating a folder PROJECTNAME it would init a react-native project in the folder I am currently in.
Is this possible?
Currently, I have my setup already created from previous projects that I enjoy using (packages.json, config files, etc). I delete the node_modules, and then react-native init PROJECTNAME. Then I take the PROJECTNAME/ios PROJECTNAME/android folders generated within that folder, move them into the main project folder and it works pretty smoothly. Just not optimal.
You can do
$ cd .. && react-native init folder_name
It will overwrite your package.json but keep the non-default files.
This issue is currently tracked there.
You should have install react-native-cli instead of react-native globally as described here.
And then the command is:
npx react-native-cli init appname --directory ./appPathToDir
The reason I wanted to do this was to have a sort of mono-repo, but I have transitioned away from this approach as I am not sure it is beneficial.
expo init /.
this will create expo app in current directory using the folder name