[Fabric][React Native 0.68] NativeModules replacement

[Alaa-Ben]

Description

Hi !
When not using fabric, NativesModules can be imported from 'react-native', and then some modules can be used, for example to get the device locale:

  ? NativeModules.SettingsManager.settings.AppleLocale || NativeModules.SettingsManager.settings.AppleLanguages[0]
  : NativeModules.I18nManager.localeIdentifier

After enabling fabric, this crashed because NativeModules is empty.
So my question is: What is the equivalent ? How do you access SettingsManager and I18nManager when fabric is enabled ?

Version

0.68

Output of npx react-native info

System:
OS: macOS 12.3
CPU: (10) x64 Apple M1 Pro
Memory: 38.38 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 17.8.0 - ~/.nvm/versions/node/v17.8.0/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.5.5 - ~/.nvm/versions/node/v17.8.0/bin/npm
Watchman: 2022.03.14.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.2 - /Users/qucit/.rvm/gems/ruby-2.7.2/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8193401
Xcode: 13.3/13E113 - /usr/bin/xcodebuild
Languages:
Java: 11.0.14.1 - /Library/Java/JavaVirtualMachines/temurin-11.jdk/Contents/Home/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.0 => 0.68.0
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Quite straightforward.
Disable fabric, importe NativeModules and try to use I18nManager and SettingsManager, no issue.
Enable fabric, do the the same thing => crash because NativeModules is {}

Snack, code example, screenshot, or link to a repository

No response

[simonhoss]

For iOS it seems this worked for me:

import {Settings} from 'react-native';
const deviceLanguage = Settings.get('AppleLocale') || Settings.get('AppleLanguages')[0]

[tominou]

Same issue here with RN0.69.1

[mojtabasji]

in my case when nativeModules in packages return null and it crushed when i want use ssh with every package
Is there an alternative for nativeModules that can fix it??
my configuration is this:
+-- @babel/core@7.18.6 +-- @ridenui/react-native-riden-ssh@1.8.22 +-- expo-status-bar@1.3.0 +-- expo@45.0.6 +-- react-dom@17.0.2 +-- react-native-web@0.17.7 +-- react-native@0.68.2 +-- react-ssh2-hook@0.5.0-- react@17.0.2
`

[harrymash2006]

any update on above error? I am getting same error on Android when I try to use: NativeModules.I18nManager.localeIdentifier

It returns this error: cannot read property 'localidentifier' of null

[alexhernandez]

This seems to work for me:

import { Settings, I18nManager, Platform } from 'react-native';

function getLocale() {
  let currentLocale = 'en';

  if (Platform.OS === 'ios') {
    const settings = Settings.get('AppleLocale');
    const locale = settings || settings?.[0]
    if (locale) currentLocale = locale;
  } else {
    const locale = I18nManager.getConstants().localeIdentifier;
    if (locale) currentLocale = locale;
  }

  return currentLocale
}
  

[cortinico]

After enabling fabric, this crashed because NativeModules is empty.
So my question is: What is the equivalent ? How do you access SettingsManager and I18nManager when fabric is enabled

Starting from React Native 0.73, you'll be able to use NativeModules. thanks to the Interop Layer we'll be shipping.

For the time being, you'll have to implement a Turbo Native Module

[hkn-tr]

import {Settings,I18nManager} from 'react-native';//Settings only for IOS
export const DiliAl=()=>{
	var locale='?????';
	if (Platform.OS === 'ios') {
		locale = Settings.get('AppleLocale') || Settings.get('AppleLanguages')[0];
	} else {
		locale = I18nManager.getConstants().localeIdentifier;
	}	
	console.log( locale );
	return(
		<View style={[]} >
		    <Text style={[]} >{locale}</Text>
		</View>
	)
}

[legendero]

import {Settings,I18nManager} from 'react-native';//Settings only for IOS
export const DiliAl=()=>{
	var locale='?????';
	if (Platform.OS === 'ios') {
		locale = Settings.get('AppleLocale') || Settings.get('AppleLanguages')[0];
	} else {
		locale = I18nManager.getConstants().localeIdentifier;
	}	
	console.log( locale );
	return(
		<View style={[]} >
		    <Text style={[]} >{locale}</Text>
		</View>
	)
}

this worked for me, thanks