Expo - React Native FileSystem error on requirement - react-native

I can't require react-native-fs, the app throws the exception:
'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 installed it following the guide from the oficial docs.
App.js:
import React from 'react';
import { View } from 'react-native';
const RNFS = require("react-native-fs");
export default function App() {
return (
<View>
</View>
);
}
package.json:
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"expo": "~39.0.2",
"expo-splash-screen": "~0.6.0",
"expo-status-bar": "~1.0.2",
"expo-updates": "~0.3.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.2",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.10.1",
"react-native-unimodules": "~0.11.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"babel-jest": "~25.2.6",
"jest": "~25.2.6",
"react-test-renderer": "~16.13.1"
},
"jest": {
"preset": "react-native"
},
"private": true
}
Obviously, if I remove the require line, the error disappears.

Related

Error: Unable to resolve module ./reanimated1 from *:\*\*\node_modules\react-native-reanimated\src\Animated.js:

i am following this tutorial https://ritikjain1272.medium.com/making-drawer-navigator-and-a-splash-screen-on-your-react-native-app-2fb561ee17f1 and along the line, I get this Error as shown below :
To reload the app press "r"
To open developer menu press "d"
BUNDLE ./index.js
error: Error: Unable to resolve module ./reanimated1 from D:\ReactNative\HealthPanda\node_modules\react-native-reanimated\src\Animated.js:
None of these files exist:
* node_modules\react-native-reanimated\src\reanimated1(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
* node_modules\react-native-reanimated\src\reanimated1\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
> 1 | import { Image, ScrollView, Text, View } from 'react-native';
2 | import Easing from './Easing';
3 | import AnimatedClock from './core/AnimatedClock';
4 | import AnimatedValue from './core/AnimatedValue';
at ModuleResolver.resolveDependency (D:\ReactNative\HealthPanda\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:107:15)
at DependencyGraph.resolveDependency (D:\ReactNative\HealthPanda\node_modules\metro\src\node-haste\DependencyGraph.js:288:43)
at Object.resolve (D:\ReactNative\HealthPanda\node_modules\metro\src\lib\transformHelpers.js:129:24)
at resolve (D:\ReactNative\HealthPanda\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:33)
at D:\ReactNative\HealthPanda\node_modules\metro\src\DeltaBundler\traverseDependencies.js:412:26
at Array.reduce (<anonymous>)
at resolveDependencies (D:\ReactNative\HealthPanda\node_modules\metro\src\DeltaBundler\traverseDependencies.js:411:33)
at processModule (D:\ReactNative\HealthPanda\node_modules\metro\src\DeltaBundler\traverseDependencies.js:140:31)
at async addDependency (D:\ReactNative\HealthPanda\node_modules\metro\src\DeltaBundler\traverseDependencies.js:230:18)
at async Promise.all (index 11)
My package.json is looking like this :
{
"name": "HealthPanda",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^1.9.9",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.7.2",
"react-native-vector-icons": "^8.1.0",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.1",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/runtime": "^7.15.4",
"#react-native-community/eslint-config": "^3.0.1",
"babel-jest": "^27.2.0",
"eslint": "^7.32.0",
"jest": "^27.2.0",
"metro-react-native-babel-preset": "^0.66.2",
"react-native-codegen": "^0.0.7",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
What do i appear to be doing wrong? Please i need help here.

Expo native runtime is not available: something went wrong and we aren't sure what it was

I am getting this error while compiling my code. I can only see a white screen in my app.
I am new to react-native, your efforts would be appreciated.
My App.js
import 'react-native-gesture-handler';
import React from 'react';
export default function App() {
return (<Text>Hello, I am your cat!</Text>);
};
Package.json
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start"
},
"dependencies": {
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/cli": "^5.0.1",
"expo": "~41.0.1",
"expo-splash-screen": "~0.10.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.5.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-eject": "^0.1.2",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.1.0",
"react-native-screens": "~3.0.0",
"react-native-unimodules": "~0.13.3",
"react-native-web": "~0.13.12",
"react-navigation-drawer": "^2.7.1"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
"private": true
}

Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'

I am using #react-navigation/stack in my expo app and everything has been working fine. I wanted to start to add tab/drawer navigation to my app and keep running into the following 2 errors when I try to import
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'.
and
Attempted import error: 'Appearance' is not exported from 'react-native-web/dist/index'.
The following is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/async-storage": "^1.11.0",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/material-bottom-tabs": "^5.2.16",
"#react-navigation/material-top-tabs": "^5.2.16",
"#react-navigation/native": "^5.7.3",
"#react-navigation/stack": "^5.9.0",
"#reduxjs/toolkit": "^1.4.0",
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-elements": "^2.2.1",
"react-native-gesture-handler": "~1.6.0",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "~1.9.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-tab-view": "^2.15.1",
"react-native-web": "~0.11.7",
"react-redux": "^7.2.1",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
I've gone as far as creating a whole new expo app the solve this problem-but I still hit a wall once I import the bottom/top tab navigators. Any idea how to solve this?
Downgrade react-native-paper to 4.0.0-alpha.1 solved my issue. It seemed like expo#38.0.0 was incompatible with react-native-paper#^4.0.1.
node_modules\react-native-floating-label-input\src\index.tsx
import Animated, { EasingNode, timing, interpolateColors } from 'react-native-reanimated';
Replace the file with the following and it will be fixed.
import Animated, { Easing as EasingNode, timing, interpolateColors } from 'react-native-reanimated';

Connection to MQTT broker via React Native error: Bad User Name or Password

I'm developing a mobile app in React Native, and I'm trying to communicate to an MQTT server to receive informations about the chargers that I have connected to the server.
The question is:
I can connect successfully to the mosquito server and receive messages, but I can't connect to my server, the error is the following: MQTT CONNACK: Bad Username or Password.
I've already tried many approaches, and still nothing. And the user and the password are 100% correct.
Here is my creation of the client.
It may help, this is my package.json:
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"buffer": "^5.6.0",
"expo": "~38.0.8",
"expo-splash-screen": "~0.3.1",
"expo-status-bar": "^1.0.0",
"expo-updates": "~0.2.10",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "~0.62.2",
"react-native-gesture-handler": "~1.6.1",
"react-native-paho-mqtt": "^0.1.1",
"react-native-reanimated": "~1.9.0",
"react-native-screens": "~2.9.0",
"react-native-unimodules": "~0.10.1",
"react-native-web": "~0.11.7",
"sp-react-native-mqtt": "^0.4.25",
"url": "^0.11.0"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"babel-jest": "~25.2.6",
"jest": "~25.2.6",
"react-test-renderer": "~16.11.0"
},
"jest": {
"preset": "react-native"
},
"private": true
}
Thank you all for your help.

React native expo app with snapshot jest tests configuration

I couldn't make Jest snapshot testing work in React native expo app. I am getting all kinds of errors depending on set of node modules and configuration.
Examples are:
* SyntaxError: Unexpected identifier import ... or about import React from another file,
* jest encountered an unexpected token import,
* Errors related to script_transformer .
Here is my package.json
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"lint": "eslint .",
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node_modules/.bin/jest"
},
"dependencies": {
"expo": "^31.0.0",
"moment": "^2.22.2",
"pouchdb-react-native": "^6.4.1",
"prop-types": "^15.6.2",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-easy-toast": "^1.1.0",
"react-native-range-datepicker": "^1.8.2",
"react-navigation": "^2.18.2",
"react-redux": "^5.1.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"babel-plugin-syntax-class-properties": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"eslint": "^5.9.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-react": "^7.11.1",
"jest-expo": "^31.0.0",
"react-test-renderer": "^16.7.0"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(pouchdb-react-native|pouchdb-adapter-asyncstorage))"
]
}
}
Can someone point me to a working Repo of a React-native Expo app with Jest snapshot tests.
jest-expo has better snapshots supoport now,
check https://docs.expo.io/versions/latest/guides/testing-with-jest/#snapshot-test