Develop Reference

React-Native-Reanimated: error: node_modules\react-native-reanimated\src\index.ts:

I was making new project and I can't run the android emulator with this error.
It is located at 'node_modules\react-native-reanimated\src\index.ts' and this is just the code there:
// tree-shaken side effects
import './reanimated2/js-reanimated/global';
// #ts-ignore backward compatibility with treeshaking
export * from './reanimated1';
export * from './reanimated2';
export * as default from './Animated';
Im not sure what to do, please help. Thank you in advance!

I also search for an answer and this worked for me.
Visit this expo reanimated docs link https://docs.expo.dev/versions/latest/sdk/reanimated/#installation
and I added this in my 'babel.config.js' file
module.exports = function(api) {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
};
I think the presets depends if you are using expo. Here is the original code given by the docs:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
you can see that I used my default preset which is module:metro.

I've been facing this problem for about 12 long hours, and the solution for this problem was simply to
Copy and paste this code below inside the babel.config.js file.
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
};
Run your application using npx expo start -c

i have the same issue , This version works for me
"react-native-reanimated": "2.9.1"

I ran this command expo start -c everything was working fine. After that, I've stopped the app with Ctrl+c and run a normal npm start and there were no problems with it since

Use Firebase In-App-Messaging in Expo Project

I'm trying to add in a built-in application with react-native-expo a series of tools from firebase.I managed to add the following features Cloud Messaging and Firebase Analitycs.But I have to integrate In-app-messaging and Dynamic links
First time I install all firebase module/dependencies to do this task.
"#react-native-firebase/app": "^12.9.3",
"#react-native-firebase/in-app-messaging": "^12.9.3",
and my file looks like:
.......
import inAppMessaging from '#react-native-firebase/in-app-messaging
.......
useEffect(()=>{
await inAppMessaging().setMessagesDisplaySuppressed(true);
}[])
but I recive a warning:
]Unhandled promise rejection: Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.app().
After that I try to find a solution,I learn that expo allow to create plugins to extend expo functionality
I tty to salve problem fallow expo documentation but I couldn't figure out how to create these plugins.
Next I find a module that can help me with-rn-firebase but is not working and the module is depeciated.
Then I searched the internet until I discovered other people with the same problem this is the link I see in their app.json a basic config of plugin and I try to implement in my project,after I install dependencies that I need i add in my file:
"plugins": [
"#react-native-firebase/app",
"#react-native-firebase/analytics",
"#react-native-firebase/in-app-messaging"
],
But the fallowing error occure:
Package "#react-native-firebase/analytics" does not contain a valid config plugin.
Learn more: https://docs.expo.io/guides/config-plugins/#creating-a-plugin
Cannot use import statement outside a module
What I mean is, if anyone has ever faced this problem, I want in my project to be able to use in-app-messaging and dynamyc-links if someone has tried an implementation with expo and has any idea

Eventually I solved the problem,expo when I use the command expo:build android it only compiles my javascript files,but some of the code was written in java and other optional files in the android / ios folder.So instead of compiling with expo I used eas.
Faloowing command:
Run as administrator cmd and write this line npm install -g eas-cli.
Initialize new module in your expo/react native project with this line eas init.
Build aplication using this line for android: eas build --platform android
*For ios is a bit different you mast edit your file eas.json:
{
"cli": {
"version": ">= 0.43.0"
},
"build": {
"development": {
"distribution": "internal",
"android": {
"gradleCommand": ":app:assembleDebug"
},
"ios": {
"buildConfiguration": "Debug"
}
},
"preview": {
"distribution": "internal"
},
"production": {
"ios": {
"cocoapods": "1.11.2"
}
}
},
"submit": {
"production": {}
}
}
Build aplication using this line for ios: eas build --platform ios
Eas build include in complile all app file .gradle/.js/.java/.xml/.m/.h and this thing offer your posibility to build mobile app in expo with same functionality and complexity like react native cli.
Usefull Link
https://docs.expo.dev/build/setup/
React Native Expo Build Failing due to cocoapods version

I think you need to run locally using expo dev client
https://docs.expo.dev/development/getting-started/
Mostly, the package that is not supported by expo can run natively. But you need successfully built in eas build.

How to get current country of Device in React Native (iOS and Android)?

I am trying to get current country of device in but didn't find anything. Is there something to do so in React Native?
I tried using react-native-device-info but it is also not supporting but in previous version it can be get by getDeviceCountry(). Now for the latest version it is showing error:
TypeError: _reactNativeDeviceInfo.default.getDeviceCountry is not a
function. (In '_reactNativeDeviceInfo.default.getDeviceCountry()',
'_reactNativeDeviceInfo.default.getDeviceCountry' is undefined)

According to the documentation of react-native-device-info for latest version, they have moved some of their apis to react-native-localize to reduce duplication in the react-native-community modules. react-native-localize worked perfectly for me.
Setup:
$ npm install --save react-native-localize
# --- or ---
$ yarn add react-native-localize
Usage:
import * as RNLocalize from "react-native-localize";
console.log(RNLocalize.getLocales());
console.log(RNLocalize.getCurrencies());
console.log(RNLocalize.getCountry());
console.log(RNLocalize.getCalendar());
console.log(RNLocalize.getTemperatureUnit());
console.log(RNLocalize.getTimeZone());
console.log(RNLocalize.uses24HourClock());
and many more. For detailed description please visit their official documentation by the given link: react-native-localize

Its solved my problem;
BREAKING CHANGE: remove is24Hour, getTimezone, isAutoTimeZone and isAutoDateAndTime, getDeviceLocale, getDeviceCountry, getPreferredLocales
This was the result of a survey. It removes API duplication in the react-native-community modules
Related PR: https://github.com/react-native-community/react-native-localize/pull/65
Use yarn add
https://github.com/mikehardy/react-native-localize.git#e062f0d2dc3171dc18fdb7b7139d347ad03933dc to maintain
isAutoTimeZone + isAutoDateAndTime until merged

The accepted answer didn't work for me, maybe due to https://github.com/zoontek/react-native-localize/issues/81.
However, Expo has something from its ecosystem, which worked out perfectly:
expo install expo-localization
import { getLocales } from 'expo-localization';
console.log(getLocales()[0].regionCode);
Edit: docs here https://docs.expo.io/versions/latest/sdk/localization/#localizationregion

Looks like it's a bug in the React Native. Please check their Troubleshooting section
Here is what they advice:
Seems to be a bug caused by react-native link. You can manually delete
libRNDeviceInfo-tvOS.a in Xcode -> [Your iOS build target] -> Build
Phrases -> Link Binary with Libraries.

Please use this package to get device country . to has different type of configs.
react-native-device-country
Some Examples
import DeviceCountry, {
TYPE_ANY,
TYPE_TELEPHONY,
TYPE_CONFIGURATION,
} from 'react-native-device-country';
DeviceCountry.getCountryCode()
.then((result) => {
console.log(result);
// {"code": "BY", "type": "telephony"}
})
.catch((e) => {
console.log(e);
});
DeviceCountry.getCountryCode(TYPE_TELEPHONY)
.then((result) => {
console.log(result);
// {"code": "BY", "type": "telephony"}
})
.catch((e) => {
console.log(e);
});
DeviceCountry.getCountryCode(TYPE_CONFIGURATION)
.then((result) => {
console.log(result);
// {"code": "BY", "type": "config"}
})
.catch((e) => {
console.log(e);
});

ReactNative: Uncaught TypeError: Cannot read property 'forEach' of undefined, while building KitchenSink demo

I am trying to compile a 'kitchen-sink' demo, for 'react-native':
NativeBase-KitchenSink
, and I have followed the following links already:
Solution to "React native: Android project not found. Maybe run react-native android first?"
Solution to "Expo : Cannot find a module LogReporter"
That is, from the installation of 'npm' till the installation of required tools using 'Yarn'.
And now I am stuck myself:
a. I run the command npm install in the 'root directory' of this project.
b. Then I run expo start, I see that the problems addressed in link 1 and 2 have gone away.
c. Then when the browser is up, I issue expo build:android
The following error shows up:
[11:14:44] Checking if current build exists...
[11:14:48] No currently active or previous builds for this project.
[11:14:50] Publishing to channel 'default'...
[11:14:56] Building iOS bundle
[11:15:09] Building Android bundle
[11:15:20] Analyzing assets
[11:15:27] Uploading assets
[11:15:27] No assets to upload, skipped.
[11:15:27] Processing asset bundle patterns:
[11:15:27] - D:\Projects\ReactNativeProjects\AwesomeProject\**\*
[11:15:27] Cannot read property 'forEach' of undefined
[11:15:27] TypeError: Cannot read property 'forEach' of undefined
at C:\xdl#51.4.0\src\Project.js:903:26
at Generator.next (<anonymous>)
at step (C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:191)
at C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:361
Please help me know where I am wrong? Some posts say the code is correct.
[EDIT]:
I also did a new thing in my 'app.json', just before executing command react-native eject, to create Android and iOS folders:
(Note: It is not mandatory to issue the react-native eject command, as this will cause permanent change according to the documentations)
{
"expo": {
"name": "AwesomeProject",
"description": "A Kitchen Sink project.",
"slug": "AwesomeProject",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": [
"ios",
"android"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.abhsax.first"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/logo.png",
"splash": {
"image": "./assets/splashscreen.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
]
},
"changes": "----below are the changes----",
"name": "AwesomeProject",
"displayName": "AwesomeProject"
}
That is, just when I added:
"name": "AwesomeProject",
"displayName": "AwesomeProject"
at the bottom of my 'app.json'
the command react-native eject started working, which was not working earlier, as the output was:
App name must be defined in the app.json config file to define the
project name. It must not contain any spaces or dashes.
Clearly, it is the hybrid of two different versions of the package managers: 'Expo' and 'npm'.
But the 'forEach' error in the concern here, did not go away.
Further efforts done were useless, so I am not putting them here.
I shall keep on trying until I figure it out.

you have to upgrade the expo cli version
do npm install -g expo-cli
and then expo start again

I resolved this by knowing that I was again mixing up with the package managers: 'npm' and 'yarn', and this time you do not need 'expo' for time being or all-together, so modify your 'app.json', removing expo section.
All I had to do was to issue the following commands in order.
Add React Base
yarn add react-base --save
Install Peer Dependencies
The peer dependencies included from any 'npm' packages does not automatically get installed. Your application will not depend on it explicitly.
react-native link
In the case of this demo project, one dependency was missing:
react-native link react-native-vector-icons
Start Yarn
yarn start
Run on android device or simulator.
react-native run-android
[Note:] Java 8 is recommended to be installed instead of higher versions of Java. see: What to install? Java 8 or Java 10
I wish it helps.
Happy coding :-)

Try changing:
"assetBundlePatterns": ["**/*"] to "assetBundlePatterns": ["assets/*"]
in your app.json file.

cordova_plugins.js is not updated after adding new plugin

I just started using cordova with android.
I have a problem when adding plugins.
I used cordova plugin to add org.apache.cordova.camera from cmd in Win7.
It is added but not in cordova_plugins.js file.
File is getting updated when I type cordova run android this in cmd but then all my code is deleted and replaced with skeletal web-based application. Why is this happening? How to automatically get this file updated?
This is how my cordova_plugins.js looks like:
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"file": "plugins/org.apache.cordova.dialogs/www/notification.js",
"id": "org.apache.cordova.dialogs.notification",
"merges": [
"navigator.notification"
]
},
{
"file": "plugins/org.apache.cordova.dialogs/www/android/notification.js",
"id": "org.apache.cordova.dialogs.notification_android",
"merges": [
"navigator.notification"
]
},
{
"file": "plugins/org.apache.cordova.vibration/www/vibration.js",
"id": "org.apache.cordova.vibration.notification",
"merges": [
"navigator.notification"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"org.apache.cordova.dialogs": "0.2.5",
"org.apache.cordova.vibration": "0.3.6"
}
// BOTTOM OF METADATA
});
As you can see there is no camera plugin. It is added in my project, but not in this file and that's reason it is not working when I try to use it in my js files.
I hope you understood what I am saying.

Does it show up in the list when you type:
cordova plugin ls
Did you rerun:
cordova build wp7

What worked for me:
Delete ./platforms [or move to some other place as a backup]
Delete ./plugins [or move to some other place as a backup]
Build e.g: ionic cordova build android --prod or ionic cordova prepare
This resets everything, fetches FRESH plugins from config.xml
PS: add/remove/update versions of plugins and packages from package.json and run npm i beforehand.
You might need to update config.xml with the right versions too (if you are trying to fix a version conflict)

I was having the same issue with another plugin, and I did the old and magic trick: I restarted Windows (Windows 7)
After restart Windows I did the following steps:
Removed all plugins (I don't know if it is necessary to remove all)
Removed cordova_plugins.js
I executed platforms/android/cordova/clean.bat
Mi plugin had a dependency (Inappbrowser), so I installed Inappbrowser first.
I installed the plugin
I don't know if all these steps are necessary, maybe just works restarting Windows. However, it worked for me.