We Keep Coding

React Native: Convert an Expo bare project to a pure react native app

TL;DR
Similar questions have been asked before on SO (such as Convert Expo project to Original React Native project, Commands to use after converting from expo to react-native-cli, and Expo to react native init) but none of them explain how to completely remove all Expo modules and dependencies from my project, so that I end up with a pure React Native app (the same as if I had run react-native init... in the first place).
So is it possible to remove all of this extra crap that I never asked for or expected to be installed, with one simple command? MTIA! :-)
Background
Basically I got into this mess by ejecting from a managed Expo project, then customising the android folder a lot before realising that my build/install times were ludicrously slow.
So to fix this, I ran yarn global add depcheck and depcheck, which suggested that I could/should remove all of the following packages (the most seemingly-important ones are marked with an asterisk):
expo-updates*
filtrex
firebase-admin
lodash
mathjs
moment
native-base
nodemailer
react-native-android-location-enabler
react-native-credit-card-input
react-native-document-picker
react-native-fast-image
react-native-geolocation-service
react-native-image-crop-picker
react-native-js-bottom-sheet
react-native-reanimated
react-native-signature-capture
react-native-unimodules*
react-native-web
react-timer-mixin
recyclerlistview
shortid
stripe-client
styled-system
#babel/core
#react-native-community/eslint-config
babel-jest
jest
prettier
react-test-renderer
So I blindly ran yarn remove ... on all of those packages, and now I get a ton of errors on attempting to build. I won't list them here since it's obvious that they're mostly (if not entirely) related to the expo-updates and react-native-unimodules packages marked above.
I'm not explicitly using anything Expo-related in my code, so this should be a cake walk IMO, but is proving to be quite difficult!
So how can I remove this extra cruft properly? Do I need to start fresh with react-native init? MTIA :-)

Ejected expo projects needs unimodules to function properly.so i don't think there is a simple command that does everything you asked for. You can follow some steps to get it working.
Branch out for safety.
Eject, check if it is working and commit.
Delete all except .git folder in the project(also can keep a copy of .git somewhere else if project is not stored remotely).
Do initiate a bare react-native project to the same folder(have to do it from parent folder with same project name as the current project folder name, it will prompt the folder is not empty. choose to continue).
Discard the deletion of the files with your Codes.
Add packages that use in project(for expo packages, find replacement packages. Most probably will be mentioned in expo documentation).
Run Project, (might get some missing dependencies.if so, add and rerun)

I have finally acheived this almost 6 hours later by:
Creating a new React Native app from scratch (react-native init MyAppName).
Finding replacements for all the Expo modules that were being used (not by me directly, but by other packages).
Reconfiguring my Firebase project to play nice with the app (particularly the SHA keys).
Uninstalling the old app, installing the new and clearing caches for the "new" app (I say "new" because I didn't expect this step to be necessary, but somehow, for some stupid reason, Android was trying to use the old, cached app files).
The last step was absolutely crucial; it took me about 2 hours of head scratching and screaming at the PC before I finally stumbled upon this: React Native white blank screen issue. Many thanks to #DiwakarPrasad for this absolute gem of knowledge!

How could I show current GIT branch in my Vue 3 Web application

I like to have a visual cue of the current GIT branch I am working on and have that set up in my IDE (I currently use VIM but I know VSCode also does this). I like/need it so much that I would really also like to see it in my development build when serving locally.
I currently do this manually with a label that I update by hand each time I create a new branch to work on. However, I often forget to do this and subsequently confuse myself.
I'm wondering whether it would be possible to pull this information from GIT and show it in my UI in the same way VSCode does?
Specifically I am using Vue 3 and Typescript but I guess that is not super relevant to the general problem.
Anyone have a feel of how you would do this?

If you are using Webpack as a bundler, there is a git-commit-info-webpack-plugin which can write some Git info (branch name, last commit date/hash/author) into a json file on each build.
Just import the json file into your app and use it....

How to find dead code in a large react project?

In order to refactor a client-side project, i'm looking for a safe way to find (and delete) unused code.
What tools do you use to find unused/dead code in large react projects? Our product has been in development for some years, and it is getting very hard to manually detect code that is no longer in use. We do however try to delete as much unused code as possible.
Suggestions for general strategies/techniques (other than specific tools) are also appreciated.
Thank you

Solution:
For node projects, run the following command in your project root:
npx unimported
If you're using flow type annotations, you need to add the --flow flag:
npx unimported --flow
Source & docs: https://github.com/smeijer/unimported
Outcome:
Background
Just like the other answers, I've tried a lot of different libraries but never had real success.
I needed to find entire files that aren't being used. Not just functions or variables. For that, I already have my linter.
I've tried deadfile, unrequired, trucker, but all without success.
After searching for over a year, there was one thing left to do. Write something myself.
unimported starts at your entry point, and follows all your import/require statements. All code files that exist in your source folder, that aren't imported, are being reported.
Note, at this moment it only scans for source files. Not for images or other assets. As those are often "imported" in other ways (through tags or via css).
Also, it will have false positives. For example; sometimes we write scripts that are meant to simplify our development process, such as build steps. Those aren't directly imported.
Also, sometimes we install peer dependencies and our code doesn't directly import those. Those will be reported.
But for me, unimported is already very useful. I've removed a dozen of files from my projects. So it's definitely worth a shot.
If you have any troubles with it, please let me know. Trough github issues, or contact me on twitter: https://twitter.com/meijer_s

Solution for Webpack: UnusedWebpackPlugin
I work on a big front-end React project (1100+ js files) and stumbled upon the same problem: how to find out which files are unused anymore?
I've tested the next tools so far:
findead
deadfile
unrequired
None of them really worked. One of the reason is that we use "not standard" imports. In additional to the regular relative paths in our imports we also use paths resolved by the webpack resolve feature which basically allows us to use neat import 'pages/something' rather than cumbersome import '../../../pages/something'.
UnusedWebpackPlugin
So here is the solution I've finally come across thanks to Liam O'Boyle (elyobo) #GitHub:
https://github.com/MatthieuLemoine/unused-webpack-plugin
It's a webpack plugin so it's gonna work only if your bundler is webpack.
I personaly find it good that you don't need to run it separately but instead it's built into your building process throwing warnings when something is not ok.
Our research topic: https://github.com/spencermountain/unrequired/issues/6

Libraries such as unrequired and deadcode only support legacy code.
In order to find the unused assets, to remove manually, you can use deadfile
library:https://m-izadmehr.github.io/deadfile/
Out of box support for ES5, ES6, React, Vue, ESM, CommonJs.
It supports import/require and even dynamic import.
It can simply find unused files, in any JS project.
Without any config, it supports ES6, React, JSX, and Vue files:

First of all, very good question, in large project coders usually try many lines of code test and at the end of result, hard to find the unused code.
There is two possible that must be work for you - i usually do whenever i need to remove and reduce the unused code into my project.
1st way WebStorm IDE:
If you're using the web-storm IDE for JS development or React JS / React Native or Vue js etc it's tell us and indicate us alote of mention with different color or red warning as unused code inside the editor
but it's not works in your particular scenario there is another way to remove the unused code .
2nd Way unrequired Library: (JSX is not supported)
The second way to remove the unused code inside the project is unrequired library you can visit here : unrequired github
another library called depcheck under NPM & github here
Just follow their appropriate method - how to use them you will fix this unused issue easily
Hopefully that helps you

I think the easiest solution for a create-react-app bootstrapped application is to use ESLint. Tried using various webpack plugins, but ran into out of memory issues with each plugin.
Use the no-unused-modules which is now a part of eslint-plugin-import.
After setting up eslint, installing eslint-plugin-import, add the following to the rules:
"rules: {
...otherRules,
"import/no-unused-modules": [1, {"unusedExports": true}]
}

My approach is an intensive use of ESlint and make it run both on IDE ad before every push.
It points out unused variables, methods, imports and so on.
Webpack (which has too nice plugins for dead code detection) take care about avoiding to bundle unimported code.

findead
With findead you can find all unused components in your project. Just install and run:
Install
npm i -g findead
Usage
findead /path/to/search

This question recalls me that react by default removes the deadcode from the src when you run the build command.
Notes:
you need to run build command only when you want to ship your app to production.

How to get angular2 to work in eclipse with typescript

So I was starting researching about angular2 and since I saw so many references to typescript being prefered I am trying to switch to it from javascript. Problem is, I saw a nice little guide I could follow to install it all in eclipse (angular, javascript, everything needed to launch the 5 minute guide code on the main page of angular), so I did it and managed to get it to work.
Now I would like to do the same with typescript, but I find myself lost since it doesn't seem to be working, I can't launch code, it's like node.js isn't working anymore, but since I do not know what the expected result is, I am not sure what is missing.
For example, I re did the 5 minute guide and notice as a difference that I do not have the installation of the modules, nor any run-as configuration ready, in fact, I can't manage to run as any typescript code I try to do.

What I did was:
1- Install Eclipse Mars, other guys uses older versions
2- Install Node.js
3- Install WildFly Server
4- Install TypeScript plugin https://marketplace.eclipse.org/content/typescript
5- Import my project in eclipse, you may have to create a new static web project and add your files in there. The 5 minute quick start is not an eclipse web project so you may not be able to import this. Do not forget to copy and past the same structure with the node modules that you have
6- Right click on the project > Configure > Enable Typescript Builder
7- Right Click the project > Properties > TypeScript > Compiler and configure as follows:
I hope this will do it for you.
Remember, this plugin does not respect json configuration file, so you have to do this manually as in the screenshot. Also, if you are going to provide arguments to your component constructor, You will have errors. Let me know if you got those. Another thing to mention is that using some annotations like #Input will not work, you will have to use inputs:[] inside your #Component annotation.

You can try to add those plugins on top of Mars:
https://github.com/angelozerr/angular2-eclipse
https://github.com/angelozerr/typescript.java
Those 2 are incubating but already provide good features. There is another one, that I didn't try but which has some popularity:
https://github.com/palantir/eclipse-typescript

Eclipse >= Neon
sudo npm install -g angular-cli (ng help must work)
See: https://github.com/angelozerr/angular2-eclipse
Install it and restart Eclipse
Open a .ts file

Eclipse Oxygen
Default javascript installation, then added the default free plugin for angular 2 / typescript from here:
angular2.ide - http://oss.opensagres.fr/angular2-eclipse/1.3.0/
After installing I opened an existing Angular 4 / TS project, worked fine. I then installed support for .scss from http://www.liclipse.com/text/updates. All setup and configured with Typescript 2.4.1 / nodejs v6.9.4.
But within days it now fails to open .ts files at all. Re-installation of the ng plugin did not fix it, I uninstalled liclipse plugin and no change either. It basically leaves eclipse unusable for ng4 projects as is.
The logs show the following errors.
org.eclipse.core.runtime.CoreException: Plug-in "ts.eclipse.ide.jsdt.ui" was unable to instantiate class "ts.eclipse.ide.jsdt.internal.ui.editor.TypeScriptEditor".
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.throwException(RegistryStrategyOSGI.java:194)
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.createExecutableExtension(RegistryStrategyOSGI.java:188)
at org.eclipse.core.internal.registry.ExtensionRegistry.createExecutableExtension(ExtensionRegistry.java:905)
...
Caused by: java.lang.NoClassDefFoundError: org/eclipse/wst/jsdt/ui/text/JavaScriptSourceViewerConfiguration
at java.lang.Class.getDeclaredConstructors0(Native Method)
at java.lang.Class.privateGetDeclaredConstructors(Unknown Source)
...
Caused by: java.lang.ClassNotFoundException: An error occurred while automatically activating bundle org.eclipse.wst.jsdt.ui (441).
at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:112)
at org.eclipse.osgi.internal.loader.classpath.ClasspathManager.findLocalClass(ClasspathManager.java:529)
...
Caused by: java.lang.ClassFormatError: Name index 1 in LocalVariableTable has bad constant type in class file org/eclipse/wst/jsdt/internal/core/JavaModelManager

I found
TypeEcs plugin for Typescript
it provide below.
•Syntax highlighting
•Code Completion
•Code Outline
•Find References
•Rename / Refactor
•Open Type
•Code Compilation
•Format Code
•Comment Code
•Open Declaration
•Mark Occurences
•Type Script Debug

Node.js / npm - anyway to tell if a package is pure JS or not?

I've noticed that in trying to get seemingly simple node packages to install with npm (e.g. nerve, a "micro-framework") I often run into some form of dependency pain. After some digging, I tracked down the problem with nerve to the bcrypt module, which is apparently written in C/C++ and has to be compiled after the package manager downloads it.
Unfortunately, it seems like if you want this to work on Windows, the answer is (from one of the bcrypt issues threads) "install a Linux VM". So earlier today I did just that, and started running into other dependencies (you need certain unnamed apt packages installed before you can even think about building, despite GCC being installed), then eventually after seeing yet another C compiler error (about some package or other not being able to find "Arrays.c" I think), I actually gave up, and switched from nerve to express instead. Ironically, the larger and more complicated express installs with npm on Linux and Windows without a single issue.
So, my question is: is there any filter / dependency tracking available that lets you see if a package has additional dependencies besides node core? Because to me the allure of node is "everything in Javascript", and this kind of stuff dispels the illusion quite unpleasantly. In fact, despite having done more than my time working with C/C++, whenever I see a requirement to "make" something these days I generally run in the other direction screaming. :)

The first solution doesn't tell you if a dependency makes the package impure or not. Much better to search for gyp generated output:
find node_modules/ | grep binding.gyp || echo pure

Look out for the "scripts" field in the package.json.
If it contains something like
"scripts": {
"install": "make build",
}
and a Makefile in the root directory, there's a good possibility that the package has some native module which would have to be compiled and built. Many packages include a Makefile only to compile tests.
This check on the package documents does not exclude the possibility that some dependency will have to be compiled and built. That would mean repeating this process for each dependency in the package.json, their dependencies and so on.
That said many modules have been updated to install, without build on Windows, express for one. However that cannot be assured of all packages.
Using a Linux VM seems to be the best alternative. Developing Node.js applications on Window gives you step by step instructions on installing a VM, Node.js and Express.

Node is not "everything javascript" , since one way to extend node core is to write c/c++ plugins.
So Node is more a javascript wrapper around c/c++ modules using V8.
How could you write efficient database drivers in pure javascript for instance ? it would be possible but slow.
as for the filters , it is up to the author to document his package. there is no automatic filter.