Expo Bare Workflow - How To Use And Setup react-native-pdf and react-native-blob-util - React Native - react-native

What is the proper way to use native module in react native expo bare workflow ?
I want to use react-native-pdf and react-native-blob-util
But I got error :
TypeError: null is not an object (evaluating 'ReactNativeBlobUtil.DocumentDir')
And
Invariant Violation: "main" has not been registered. This can happen if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
I have following this link : https://openbase.com/js/react-native-pdf
I read in the expo documentation we can use native module using expo bare workflow. And now my project is bare workflow. In the middle of building my apps using expo bare workflow I got and error when using react-native-pdf and react-native-blob-util
I want when user click the button the apps will open the pdf file which have source link pdf from my server.
Is it possible to setup using this native module in expo bare workflow since bare workflow in the documentation said it like this :
https://docs.expo.dev/introduction/managed-vs-bare/
Bare Workflow
In the bare workflow the developer has complete control, along with
the complexity that comes with that. You can use all packages from the
Expo SDK, development builds, and all Expo and EAS Services.
Configuration with app.json / app.config.js is mostly not supported in
this context; instead, you will need to configure each native project
directly.
Please give me a solution of this problem ? If it is not possible please point me to use another best pdf viewer.

Finally solved the problem.
Native Module cannot run in Expo Go
So expo publish will not working because it is run in Expo Go.
Instead, we must change to run in native. Use case example : npm run android or expo run:android. It will run into bare workflow with native module in our code.

I had this same issue. The fix for me was to rebuild the development client first.
npx expo start --dev-client -c
Then run android/iOS.
There is no need to build with expo run:android.

Related

React Native Error - TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNShare.FACEBOOK')

I'm working on react native project and I am using expo. I want to add the react-native-share package to my project, however I keep getting this error before I even add any code.
TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNShare.FACEBOOK')
Now I know that expo has it's own version of the share, however you can't specify where a person can share it too, which honestly makes the feature useless. It seems to be clear that the reason I can't use this package is because I am using expo and can't install pod into the project -- due to expo reject it --. So what should I do? Any suggestions on how to work around this?
You can't normally use dependencies with native code using Expo. At least when using the classic build system (you're using it when you run expo start in the terminal to run your project). react-native-share has native code (you can check that by going to the repo and seeing if the library has ios and android folders) and therefore can't be used with "standard" Expo.
If you want to use custom native code in your project, you either need to eject from Expo to the bare workflow or - a newer option - use Expo EAS and custom dev clients. Expo EAS allows you to stay in the managed workflow and still use native modules. You might need to write something called a config plugin for some of those native dependencies you want to use, but looking at the documentation, react-native-share should be working just fine without a config plugin.
So: Either eject to the Expo bare workflow, or use Expo EAS and custom dev clients to use native dependencies with the Expo managed workflow. Do note however that you need at least Expo SDK 41 to use EAS and custom development clients.
To learn more about migrating from the classic build system to EAS, see Expo's guide / documentation.

How to run a react native app (a bare workflow from expo or a regular one) in web (browser)?

I'm trying to run my React Native app as a web site, on a browser.
I tried to go according to https://necolas.github.io/react-native-web/docs/installation/ but the instructions on the Setup page are not clear.
I found some (rare) posts regarding this, but they are old (2019) and seem to deviate from the info in the link above.
I use yarn android to run it on android.
So, I tried using yarn web. Didn't work.
Also, tried the basic react-native start followed by react-native run-web.
It seems the run-web command is not what is needed.
Any assist appreciated.
P.S. I initialized my project through Expo, as a Bare Workflow project. Hope that helps
According to the docs:
Expo for web can work on any React Native project. When you initialize a new project with a bare workflow template using expo-cli, if you run yarn web or npm run web it will start up expo-cli and open your project in a web browser.
The same guides for web from the managed workflow apply here.
So basically just initialise your project using expo init project-name and then select bare workflow or managed workflow. After that you can execute npm run web. It will open up the browser and run the web version of it. Keep in mind that there are some incompatibility of libraries from expo, for example, the Webview is incompatible on the web so you need to switch when on web to an iframe or so.

Why is that we cannot install native libraries on Expo? (that requires linking)

I am a newbie and learned react-native expo. I am curious why we can't use any native library with Expo.
For example, if I want to use filesystem on expo I just cant use it, I know expo has it's own file system but I want to use another library but that library requires linking so it is not working in expo. Why is that?
I have tried everything.
This is the library that I want to use ==> https://github.com/itinance/react-native-fs
It requires command : react-native link react-native-fs
How do I do it?
You first have to understand the difference between react-native cli & expo
Please read this documentation to understand the difference
React Native expo uses their own servers to compile your javascript into java and return APK file as a complete APP, and that is the reason you do not need android SDKs or android studio environment on your PC when you are using expo
but when you are using react-native cli you do need the android studio environment such as SDKs, because when you are using cli , it compiles the code using that android studio sdk/environment that you made in your PC that is why you do not need a third party server like expo do.
and thats the reason you get android files right in your react-native project and due to which you can add native modules to it.
However you also have the option to use expo-eject, You can read more about expo-eject in this documentation
Thank You!, Have a great day & welcome to stackoverflow community!.

Converting project to react native init

Firstly I created my project with create-react-native-app and I'm developing my app with npm start and I have expo installed on my emulator. How can I convert these project into react native init, I don't want to use expo anymore...I don't neeed any api-es from them...
Thank you
The best resource for this is in the create-react-native-app repository. Try having a look here to get started.
The short answer is to use npm run eject
If you have experience generating signed APKs for Android and code signing with iOS then you shouldn't run into too much trouble.
If you don't, then take the time to go through the Android docs and also this guide should help you get up on running on iOS as well.
Good luck!
Instead of creating your project using the command create-react-native-app, you may create a react native project by following "Building Projects with Native Code" of the getting start guide: https://facebook.github.io/react-native/docs/getting-started.html.
Here you will find out how to:
1. Set up the environment.
2. Installation of phone emulator.
3. Connection of your phone via USB for testing.
4. Create a project using the react-native init command.

Can I not use Expo (cloud service) at all using React Native

I have build an app using react native(detached) but the thing is I would want to completely get rid of Expo. The reason is, what if one day EXPO service get shut down or no more supported.
So in this case I would not want the app to be affected.
Currently I need to publish my app thru ExpoKit to see the latest changes, how would I build my android app so it would not have any reference to Expo but still be able to work properly
Currently this is how I understand how the react native and expo works: first u build ur app using react native code and then a bundle.js is generated somewhere on cloud(EXPO) using publish command so the app communicate with that bundle.js.
Note I am not using any feature from Expo so why would I need Expo in this case?
Edited: If I am detaching my app from expo, I mean why would I still need Expo? Can't I just build the app and run the app without expo at all?
You can build your whole application without using expo, just follow the steps from facebook documentation in "Building Projects with Native Code" tab.
or
you can run "npm run eject" in your project root directory folder.
After this, you can build your appliaction using react-native cli commands, like
react-native run-android.
edited :--
For building apk for production, you can follow steps given in facebook documentation as generating signed apk and for released IPA for iOS yo can follow building your app for production for IOS.