Failed to load Analytics native module - react-native

I'm trying to use Segment for analytics on my React Native app. I want it to work for both Android and iOs. This issue persists on both OS's.
I installed the NPM library as explained here by doing:
yarn add #segment/analytics-react-native
yarn react-native link
Expected behaviour: I'm able to use analytics in the app
Actual behaviour: an error is thrown with message "Failed to load Analytics native module"
Code: (i do this in App.tsx/componentDidMount)
import Segment from '#segment/analytics-react-native';
import FirebaseAnalytics from '#segment/analytics-react-native-firebase'
Segment.setup(keys.segment.writeKey, {
recordScreenViews: true,
trackAppLifecycleEvents: true,
trackAttributionData: true,
using: [FirebaseAnalytics]
})
This is pretty much what they use in the documents. I'm not sure what I'm doing wrong. One thing to note is that I'm using Expo, not plain react-native.
I've tried solutions mentioned here and here but to no avail.

Related

react-native-fs not working on react-native version 0.69

I am using react-native version 0.69 and I want to read a file stored in assets in my react native project.
using following syntax in App.js
import fs from 'react-native-fs';
I have installed 'react-native-fs' and followed all the links I could find on the internet but I am still getting below error while running the app.
ERROR TypeError: null is not an object (evaluating 'RNFSManager.RNFSFileTypeRegular')
ERROR 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.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
I tried to run react-native link react-nativs-fs but link support has been removed in react-native >= 60 as mentioned in official docs,
I am unable to get this to work, any help would be appreciated. I have seen similar issues on the stackoverflow but none has given the answer for react native >=0.60 versions
Also I am using expo to create the app.
my OS is Windows 10 64 bit.
react-native-fs is not supported with Expo but it is only supported by Pure React Native.
Expo has a package that offers filesystem support:
expo-file-system

React native project crashing with Redux Toolkit

I'm using an Expo Bare Workflow setup with my React Native App.
I followed this guide EXACTLY https://redux-toolkit.js.org/tutorials/quick-start copy pasted everything.
Imported
import { store } from "./src/main/redux/store";
import { Provider } from "react-redux";
on my App.js but it crashes when I build the app for Expo Go testing using eas update. If I remove those two imports, the app works fine.
I've followed the quickstart guide exactly, so for the code you can refer to the quick start guide as it might be redundant if I still post it here.
There's no error message from the App because it crashes on startup. I do get one from xcode saying com.facebook.ABI46_0_0React.ExceptionsManagerQueue and the rest are some obscure messages

Expo Bare Workflow - How To Use And Setup react-native-pdf and react-native-blob-util - 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.

How to manually link React Native new components with expo?

Right now I am trying to add sqlite-storage(https://github.com/andpor/react-native-sqlite-storage) and react-native-fs(https://github.com/itinance/react-native-fs/) to a project being done in react-native. Both, however, require me to add some lines of code to the ios and android files. Case is, I created this project using expo, and expo doesn't seem to have those files available.
Currently, I am trying to create some sort of offline storage for my app (I think I'll ditch sqlite because it won't be as necessary and just keep the react-native-fs and write the data on JSON).
I have already tried linking and re-installing it many times and it doesn't seem to work, since it keeps returning the "RNFSManager is undefined" error when I use react-native-fs. A few of the people with this problem I found said they had to manually link, but they all had access to those files I don't have (like setting and gradle, things expo doesn't give me direct access to), so I am not sure what I should do.
SQLite and FileSystem are both included on expo.
First you need to add them to your project with:
expo install expo-sqlite
expo install expo-file-system
Then you only need to import them
import { SQLite } from 'expo-sqlite';
import * as FileSystem from 'expo-file-system';
For more info you can check the expo docs for
FileSystem
and
SQLite
You will need to eject your expo project, so the android and ios folder will be created.
After that, you will be able to add nativecode to your react-native app.
The expo documentation is nicely done, you will have all the infos about the pros and cons of ejecting

"Application ... not registered" with React Native app on AWS Mobile Hub

I'm trying to learn and understand how AWS Mobile Hub works.
Based on I'm trying to create a React Native app from scratch and connect to a AWS Mobile Hub.
I followed the steps in the AWS Mobile React Native Starter # Use features in your app to create a React Native app from scratch.
Setup a new project in AWS Mobile Hub.
Used awsmobile init <ID> to setup the react project for AWS Mobile Hub.
Enabled User Sign-in on AWS Mobile Hub project.
Setup Authentication in the React Native project.
(ps. there is an error in the guidelines because 'Amplify' import is missing)
Run the app with npm run ios
No matter what I do, I alway get a 'Application ... has not been registered' error.
The example backend from 'AWS Mobile React Native Starter' does work.
I have tried to compare both AWS Mobile Projects, but cannot find what causes the 'Application ... has not been registered' error.
I want to understand this AWS Mobile Hub thing and want to be able to setup projects myself and know how to integrate it into apps.
Any help to solve this error is greatly appreciated.
Finally found the problem.
First I thought it was because index.ios.js and index.android.js were missing, but then saw those are not needed anymore.
Aparently, when doing an application from scratch, the created 'index.js' does not have the correct component name. Changing the wrong name in AppRegistry.registerComponent('wrongname', () => App); to the correct application name, matching aws_project_name in aws-exports.js, fixed the issue.
The app now loads. Hurray!
Next problem: when signing in I get a 'No Userpool' message. Checked all config and Mobile Hub project, but the user pool seems correctly configured...
Update: also found the issue with 'No userpool'. When debugging the application, I noticed that the configuration received by Amplify.configure function was undefined. But I copied this code:
import { withAuthenticator } from 'aws-amplify-react-native';
import {awsmobile} from './aws-exports';
from this AWS React Native Starter App tutorial. But apparently it is not working.
Replacing that bit by this:
import Amplify from 'aws-amplify-react-native';
import aws_exports from './aws-exports';
from
AWS Documentation » AWS Mobile » Developer Guide » AWS Amplify Library for React Native » Get Started
. Now it suddenly works.
Thanks AWS! Took me couple of nights to find :-/
I saw that problem before when there is a version of aws-amplify installed under aws-amplify-react-native. That happens when the version of aws-amplify installed on the project is not the one that requires aws-amplify-react-native. I hope everything goes well with your app.