Description
Android crashes due to NullPointerException in RuntimeUtils.java when using the keyboard input features. The issue stems from the React Native UI Lib package's dependency structure for Android, where patches need to be applied to both react-native-ui-lib AND uilib-native packages.
Related to
Steps to reproduce
- Use
react-native-ui-lib in a React Native application
- Implement components that use keyboard-related features
- Run on Android
- App crashes with
NullPointerException in RuntimeUtils.java during keyboard interaction
- Apply patch to
react-native-ui-lib but crashes continue
Expected behavior
The app should handle keyboard interactions properly without crashing.
Actual behavior
The app crashes with errors like:
Fatal Exception: java.lang.NullPointerException
Attempt to invoke virtual method 'void com.facebook.react.uimanager.UIManagerModule.onBatchComplete()' on a null object reference
at com.wix.reactnativeuilib.keyboardinput.utils.RuntimeUtils$1.run(RuntimeUtils.java:13)
More Info
Root Cause Analysis
The root cause of this issue is a non-obvious relationship between react-native-ui-lib and uilib-native packages.
When building the Android app, the react-native-ui-lib package doesn't use its own native Android code. Instead, it points to the uilib-native package's Android code, as configured in react-native-ui-lib/react-native.config.js:
// node_modules/react-native-ui-lib/react-native.config.js
module.exports = {
dependency: {
platforms: {
android: {
sourceDir: "../uilib-native/android/",
// Other config...
},
},
},
};
This means that patching only react-native-ui-lib doesn't affect the Android build, since it's actually using code from uilib-native.
Code snippet
Original problematic code in uilib-native:
// node_modules/uilib-native/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/utils/RuntimeUtils.java
package com.wix.reactnativeuilib.keyboardinput.utils;
import com.facebook.react.uimanager.UIManagerModule;
import com.wix.reactnativeuilib.keyboardinput.ReactContextHolder;
public class RuntimeUtils {
private static final Runnable sUIUpdateClosure = new Runnable() {
@Override
public void run() {
ReactContextHolder.getContext().getNativeModule(UIManagerModule.class).onBatchComplete();
}
};
public static void runOnUIThread(Runnable runnable) {
if (ReactContextHolder.getContext() != null) {
ReactContextHolder.getContext().runOnUiQueueThread(runnable);
}
}
public static void dispatchUIUpdates(final Runnable userRunnable) {
runOnUIThread(new Runnable() {
@Override
public void run() {
userRunnable.run();
if (ReactContextHolder.getContext() != null) {
ReactContextHolder.getContext().runOnNativeModulesQueueThread(sUIUpdateClosure);
}
}
});
}
}
Fixed version with proper null checks:
package com.wix.reactnativeuilib.keyboardinput.utils;
import android.util.Log;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.uimanager.UIManagerModule;
import com.wix.reactnativeuilib.keyboardinput.ReactContextHolder;
public class RuntimeUtils {
private static final Runnable sUIUpdateClosure = new Runnable() {
@Override
public void run() {
try {
ReactContext context = ReactContextHolder.getContext();
if (context != null) {
UIManagerModule uiManager = context.getNativeModule(UIManagerModule.class);
if (uiManager != null) {
uiManager.onBatchComplete();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
};
public static void runOnUIThread(Runnable runnable) {
try {
if (ReactContextHolder.getContext() != null) {
ReactContextHolder.getContext().runOnUiQueueThread(runnable);
}
} catch (Exception e) {
e.printStackTrace();
}
}
public static void dispatchUIUpdates(final Runnable userRunnable) {
if (ReactContextHolder.getContext() == null) {
return; // Skip if context is null
}
try {
runOnUIThread(new Runnable() {
@Override
public void run() {
try {
// Re-check context before running user code
if (ReactContextHolder.getContext() != null) {
userRunnable.run();
// Get a fresh context reference before queue operation
ReactContext context = ReactContextHolder.getContext();
if (context != null) {
context.runOnNativeModulesQueueThread(sUIUpdateClosure);
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
});
} catch (Exception e) {
e.printStackTrace();
}
}
}
Solution
To fix this issue, you need to patch both packages using patch-package:
- First, patch
react-native-ui-lib
- Then, patch
uilib-native
- Apply both patches using
patch-package in your postinstall script
Example patches are provided in the code snippets above.
Verification
To verify that patches are correctly applied:
- Check that both package source files contain your patches
- Add Log statements in the patched code (like
Log.d("TAG", "message"))
- Monitor the Android logs during app execution to confirm the patched code is running
Screenshots/Video
N/A
Environment
- React Native version: 0.76.x
- React Native UI Lib version: 7.38.1
- uilib-native version: 4.5.1 (indirectly used by react-native-ui-lib)
Affected platforms
Reference: react/react-native#47662
Description
Android crashes due to
NullPointerExceptioninRuntimeUtils.javawhen using the keyboard input features. The issue stems from the React Native UI Lib package's dependency structure for Android, where patches need to be applied to bothreact-native-ui-libANDuilib-nativepackages.Related to
Steps to reproduce
react-native-ui-libin a React Native applicationNullPointerExceptioninRuntimeUtils.javaduring keyboard interactionreact-native-ui-libbut crashes continueExpected behavior
The app should handle keyboard interactions properly without crashing.
Actual behavior
The app crashes with errors like:
More Info
Root Cause Analysis
The root cause of this issue is a non-obvious relationship between
react-native-ui-libanduilib-nativepackages.When building the Android app, the
react-native-ui-libpackage doesn't use its own native Android code. Instead, it points to theuilib-nativepackage's Android code, as configured inreact-native-ui-lib/react-native.config.js:This means that patching only
react-native-ui-libdoesn't affect the Android build, since it's actually using code fromuilib-native.Code snippet
Original problematic code in
uilib-native:Fixed version with proper null checks:
Solution
To fix this issue, you need to patch both packages using
patch-package:react-native-ui-libuilib-nativepatch-packagein your postinstall scriptExample patches are provided in the code snippets above.
Verification
To verify that patches are correctly applied:
Log.d("TAG", "message"))Screenshots/Video
N/A
Environment
Affected platforms
Reference: react/react-native#47662