How to resolve a missing library on react-native? - javascript

Image libraries
Image Error
I'm following this tutorial https://www.youtube.com/watch?v=Ov3Z3vD5zFw&t=202s to make a Chat App, i didn't change any part of the tutorial but i got this error. The only difference between the tutorial and my code is his project was made on Expo, and mine was make normally.
I uninstall and reinstall the #react-navigation/stack, and update it, but now i don't know what to do.

Related

React native is unable to find modules that definitely exist

So after playing with Expo for a bit I've decided that I'd rather develop with the option for native features if needed.
I've followed all the steps here: https://reactnative.dev/docs/environment-setup and double checked them.
I ran npx react-native init <myprojectname> which was create successfully. I've then copied my minimal existing code to my new project, and now I can't run the app. I was able to run my code when it was on expo, and I was able to run the initial native setup before copying my code.
The issue doesn't seem to be related to the code itself though. Maybe some configuration?
It says it is Unable to resolve module.. and that None of these files exist.
These files most definitely exist.
I've tried cleaning the app's cache from my phone. Completely deleting it and reinstalling.
I've tried renaming my screen name from HomeScreen.tsx to HomeScreen.native.tsx.
Nothing seems to work. What is the issue here?
This is the error screen
And this is my files structure:

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!

VS Code module error TimelineMax from GSAP

It might sound nooby, but I do not know what's the problem and I searched for hours for an answer on the internet. I am using React with VS Code. When I want to use MagicScroll with GSAP (TimelineMax, TweenMax) to scroll to the next anchor/section direcly on my website, in the VS Code terminal appears "Module not found: Can't resolve 'TimelineMax' in 'C:\Users\marcv\webapp\src'". I have installed with npm the following: magicscroll, gsap, greensock, scrollmagic-plugins, scrollmagic-plugins-gsap. But the error doesn't go away even though I see everywhere that gsap package contains the timelinemax package. Am I right? I'm quite new in this field.
Thanks a lot for your time and if you have any question or need more information, feel free to ask.
Specifically, I want to use this: codepen.io/andystent/pen/GRgjBdJ?editors=0010.
I see at the settings that I need those 5 external scripts. So what do I need to install to have TimelineMax package?

How do I install freedraw for leaflet?

I need to get a leaflet freedraw plugin to work with my project. But I have no idea how to do that because there is no real tutorial about how to do it on the entire internet it seems. What are the steps to get the plugin to work with the project? I've visited the project's GitHub page but there is no tutorial either. What I need to do before I can just sit and write the code? I'm honestly trying to fix this for like two days but there's just nothing to start from including old questions from Stack Overflow with zero answers...
I've tried to install the plugin with ndm which gave me a bunch of errors with no results. Even after that, I had no idea how to connect the plugin with my project or what to do... I also tried installing the freedraw plugin with Bower which installed some files, but still, I had no idea how to get them to work with my project.
Leaflet freedraw plugin - https://github.com/Wildhoney/Leaflet.FreeDraw
Someone, please help I'm definitely not the first one waiting for full working step by step tutorial on how to get it running with leaflet.
If you don't use npm or bower you can load the plugin directly like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.freedraw/2.0.1/leaflet-freedraw.web.js"></script>
Invocation is as per the GitHub page
const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
map.addLayer(freeDraw);
Add options as required.

React Native this._lazyCallableModules[name] is not a function

I had a fully functioning react native app, and I tried to install the Facebook Login button. I followed these instructions:
https://developers.facebook.com/docs/react-native/login
and
https://developers.facebook.com/docs/react-native/configure-ios
There is a known issue using react-native link to connect the Facebook SDK to the project, and so I tried linking it manually. I could not get the Facebook Login to work, and now when I use react-native run-ios, my app just shows a black screen!
As a test, I used create-react-native-app to create a new app, and I launched it, and I'm getting this error:
this._lazyCallableModules[name] is not a function (MessageQueue.js 155:11)
Since I'm not sure what MessageQueue is and this is a brand new app, I'm not sure how to undo the damage I've done.
Has anyone experienced this, or do you at least have some idea of how I can go about resetting my react setup?
If I haven't given enough relevant information, please let me know.
Followed the answer given here and it's working well so far.
Downgrade the babel-preset-react-native package from 2.0.1 to 2.0.0. The command is npm install babel-preset-react-native#2.0.0. Use the --save flag if you want to store it to your package.json.
Updating to the latest React Native, clean & build solved it for me.

Categories